aiprompts/tsunami-builder.md
A split-screen builder for creating Tsunami applications: chat interface on left, tabbed preview/code/files on right. Users describe what they want, AI edits the code iteratively.
Top Section - Tabs:
Bottom Section - Build Panel (closable):
Draft mode: Auto-saved on every edit, persists when builder closes Published version: What runs in main Wave Terminal, only updates on explicit "Publish"
Flow:
Every AI request includes:
[System Instructions]
- General system prompt
- Full system.md (Tsunami framework guide)
[Conversation History]
- Recent messages (with prompt caching)
[Current Context] (injected fresh each turn, removed from previous turns)
- Current app.go content
- Compilation results (success or errors with line numbers)
- Static files listing (e.g., "/static/logo.png")
Context cleanup: Old "current context" blocks are removed from previous messages and replaced with "[OLD CONTEXT REMOVED]" to save tokens. Only the latest app.go + compile results stay in context.
Primary editing tool
old_str - Unique string to find in app.gonew_str - Replacement stringdescription - What this change doesBackend behavior:
go buildAI can make multiple edits in one response, getting compile feedback after each.
Bootstrap new apps
content - Full app.go file contentSame compilation behavior as str_replace.
Look up APIs, docs, examples
Read user-provided documentation
path - Path to file (e.g., "/docs/api-spec.md")/static/ directoryAfter every code change (AI or user):
1. Write app.go to disk
2. Run: go build app.go
3. Show build output in build panel
4. If success:
- Start/restart app process
- Update preview iframe
- Show success message in build panel
5. If failure:
- Parse error output (line numbers, messages)
- Show error in build panel (bottom of right side)
- Inject into AI context for next turn
Auto-retry: AI can fix its own compilation errors within the same response (up to 3 attempts).
Shown in build panel at bottom of right side.
Format for AI:
COMPILATION FAILED
Error at line 45:
43 | func(props TodoProps) any {
44 | return vdom.H("div", nil
> 45 | vdom.H("span", nil, "test")
| ^ missing closing parenthesis
46 | )
Message: expected ')', found 'vdom'
Apps can declare secrets using Tsunami's ConfigAtom:
var apiKeyAtom = app.ConfigAtom("api_key", "", &app.AtomMeta{
Desc: "OpenAI API Key",
Secret: true,
})
Builder detects these and shows input fields in UI for user to fill in.
V1 approach: No summarization, no smart handling.
When context limit hit: Show message "You've hit the conversation limit. Click 'Start Fresh' to continue editing this app in a new chat."
Starting fresh uses current app.go as the beginning state.
User: "Create a counter app"
AI: [calls create_appgo with full counter app]
Backend: ✓ Compiled successfully
Preview: Shows counter app
User: "Add a reset button"
AI: [calls str_replace to add reset button]
Backend: ✓ Compiled successfully
Preview: Updates with reset button
User: "Make buttons bigger"
AI: [calls str_replace to update button classes]
Backend: ✓ Compiled successfully
Preview: Updates with larger buttons
User: [switches to Code tab, tweaks color manually]
Backend: ✓ Compiled successfully
Preview: Updates
User: "Add a chart showing count over time"
AI: [calls web_search for "go charting library"]
AI: [calls str_replace to add chart]
Backend: ✗ Compilation failed - missing import
AI: [calls str_replace to add import]
Backend: ✓ Compiled successfully
Preview: Shows chart
These can be added in v2+ based on user feedback.