Your first flow

This tutorial walks you through a complete AI-assisted flow — from opening a project to seeing your code running in the browser.

Prerequisites

Ssscript installed and a project open in the editor.
Signed in with an active subscription (AI prompts require authentication).

Step 1 — Open Agent view

Press ⌘1 (macOS) or Ctrl+1 (Windows/Linux) to switch to Agent view. This gives you a full-screen AI panel focused on prompts and conversation.

If you prefer to see the code alongside the AI, press ⌘2 / Ctrl+2 for Code view instead — the flow works the same way.

Step 2 — Plan with `@@plan`

Start by asking the AI to analyze your project. Type @@plan in the prompt input (the agent mode picker appears after @@), then describe what you want:

@@plan Add a scroll-triggered fade-in animation to the hero section

The agent analyzes your code and produces a structured plan with a summary, steps, risks, and open questions. Review the plan — if it looks right, proceed. If not, refine your prompt with more detail.

Click Dismiss to clear the plan card when you’re ready to move on.

Step 3 — Build with `@@build`

Now ask the AI to implement the plan. Type @@build and describe the task (or reference the plan you just reviewed):

@@build Implement the scroll fade-in animation from the plan

The agent writes code across your project files. You will see activity rows as it works — tool calls, file edits, and reasoning.

Step 4 — Review the edits

When the agent finishes, review the proposed diffs:

If auto-apply is on (the default), the changes are already written to disk. Use Revert on any diff you want to undo.
If auto-apply is off, each diff shows Accept and Reject buttons. Click Accept to apply or Reject to discard.

Switch to Code view (⌘2) to see the changed files in the editor.

Step 5 — Run and test

Open the terminal (⌘J / Ctrl+J) and click Run to start the dev server. Your project opens at http://localhost:6454 — verify the animation works as expected.

If something is wrong, go back to the AI panel and describe the issue:

@@build The fade-in triggers too early — it should start when the element is 20% in the viewport

The AI will fix the issue and produce new diffs.

Step 6 — Publish (optional)

When you’re happy with the result, click Publish in the header to deploy your project. See Deploy & embed for the full flow.

Custom flows — Adapt the flow pattern for different tasks.
AI edits — Full reference for agent modes, models, and conversations.