DeepStudio Deepsite V2 Website Builder

Step-by-Step Guide

Follow these concise steps to get productive quickly.

1. 1

   Welcome to DeepStudio

   Take a brief tour to see how projects, agents, and saves fit together. You can skip anytime.

2. 2

   Projects at a Glance

   Your gallery shows recent work with quick actions to open, duplicate, export, or delete. A demo project is preloaded so you can explore instantly.

3. 3

   Creating a Project

   Click New Project to start fresh. Give it a name and optional description.

4. 4

   Exporting a Project

   Use the card dropdown for exports: ZIP (deploy) or JSON (backup). You can duplicate or delete here too.

5. 5

   Editing a Project

   Click a project card to open the full workspace. Then click Next to continue the tour.

6. 6

   Workspace Layout

   Four areas: assistant conversation, virtual file system (VFS), editor tabs, and live preview. The VFS behaves like a project tree (HTML, CSS, JS, assets).

7. 7

   See the Agent in Action

   Example: ask the agent to change the "Our Services" button to a green accent. Watch it make the change.

8. 8

   Element Focus Tool

   Use the crosshair in the preview to select and focus any element. Click to highlight and target edits precisely.

9. 9

   Checkpoints & Manual Saves

   Discard Changes restores to the last saved point. Use Save to lock in a manual checkpoint.

10. 10

    Clear Conversation

    Reset the agent memory with the trashcan button. This clears the chat but keeps your files intact.

11. 11

    Connect Your Provider

    Set your API key in Settings → Provider. Try OpenRouter with gpt-oss-120b, or any supported provider.

    Privacy note: Remote providers (OpenAI, Anthropic, etc.) may receive your code. For maximum privacy, use local models via Ollama or LM Studio.
12. 12

    You're Ready!

    Prompt the agent, preview updates, and save when you're happy. You can replay this tour anytime from the Help menu.