Mechanics
When a prompt is submitted:- Context Loading: The agent ingests the current
Code, design system states, content fields, and database collections. - Tool selection: It determines which tools to execute (e.g.,
write_code,create_collection). - Execution: Changes are applied to the project.
- Refresh: The preview pane updates.
Prompting Strategy
Describe what the feature should do (behavior), rather than how to write the code (implementation).- Vague: “Make the list better.”
- Implementation-focused: “Create a loop using
.map()to renderlielements with classitem.” - Behavior-focused: “Display a list of episodes where each item links to its details page.”
Tools
The agent has access to the following server-side tools:| Tool | Function |
|---|---|
write_code | Overwrites app code with new code. |
create_content_field | Defines editable content fields. |
create_design_field | Defines CSS variables. |
create_data_file | Creates data collections. |
insert_records | Seeds data into collections. |
update_spec | Updates project metadata. |
Limitations
- Single File: Modifications are restricted to a single
Sveltecomponent file. - CSS: Uses semantic classes and CSS variables, not utility frameworks like Tailwind (though you can use them by prompting the agent or manually including them).
- Runtime: Cannot execute arbitrary shell commands or write backend logic besides
proxy(yet). - Database: At the moment, collections under the ‘Data’ are all stored within a single Pocketbase JSON field. In a future update, these will be replaced with actual Pocketbase collections.