Create Your Initial Project

Prepared to witness Sypha's capabilities firsthand? This practical tutorial guides you through creating a website in under one minute. You'll discover how Sypha interprets your specifications, generates files, and refines based on your input—entirely through conversational interaction.

Upon completing this guide, you'll have developed a functional website and mastered the core principles of collaborating with Sypha.

Prerequisites

• Sypha installed in your editor (Install Guide)
• AI model selected (Model Setup)
• Any folder open in your editor (or create a new empty folder)

Step 1: Launch Sypha

Select the Sypha icon located in your editor's sidebar (left panel). The chat interface will appear.

Step 2: Provide Sypha with Instructions

Copy and insert this prompt into Sypha's chat interface:

Develop a simple website contained in a single HTML file. Requirements include:
- A greeting message displaying "Hello from Sypha!"
- A vibrant gradient background
- An interactive button that switches between various color schemes when activated
- Contemporary, minimalist design aesthetic
- All CSS styling and JavaScript functionality integrated within the same HTML file

Press Enter and watch Sypha work!

Step 3: What Happens Next

Sypha will:

1. Create a single file:

   • index.html - A complete webpage with embedded CSS and JavaScript

2. Ask for approval (unless you've enabled auto-approve)

   • Click "Approve" to let Sypha create the file
   • You can review what it plans to do first

3. Complete the task within seconds

Step 4: View Your Website

Once Sypha finishes:

1. Find index.html in your editor's file explorer
2. Right-click it and select:
   • "Reveal in Finder/Explorer" then double-click to open in your browser
3. Click the button to see the color themes change!

Try Making Changes

In the same chat, try asking:

Add a counter that shows how many times the button has been clicked

or

Make the welcome message fade in when the page loads

Sypha understands the context from your previous conversation and will update the file accordingly.

Next Steps

Now that you've experienced Sypha's capabilities, explore more:

Need Help?

• Stuck? Try starting fresh with /new in the chat
• Found a bug? Use /reportbug to help us improve
• Have questions? Join our Discord community