Core Concepts
The Builder
The builder is your workspace. It has three panels: Chat, Preview, and Code — plus a history drawer.
Chat Panel
The chat panel is where you describe what you want. Send messages in plain English. Each message adds to the conversation history, so follow-up requests like "add dark mode" or "fix the delete button" know the full context of what was built before.
Tips for better prompts
- ✅ Be specific about data — "Track tasks with a title, due date, priority (high/medium/low), and completed flag"
- ✅ Describe the UI you want — "Show tasks in a Kanban board grouped by priority"
- ✅ Mention functionality — "Clicking a task opens a detail modal with an edit form"
- ✅ Ask for charts by name — "Add a Chart.js bar chart showing tasks completed per day for the last 7 days"
- ❌ Don't be too vague — "make a nice app" gives the AI too much latitude
AI Intent Detection
If your prompt includes words like "AI", "chatbot", "smart", or "intelligent", Capsul will offer to activate AI features. This injects the CapsulAI SDK into your app, enabling runtime AI calls. You can also skip the dialog to build the app exactly as described without pre-selecting a template.
Preview Panel
The preview iframe renders your app live with the CapsulDB SDK injected. It has three view modes:
Desktop
Full width
Tablet
768px wide
Mobile
375px wide
An error monitor at the bottom of the preview panel captures runtime JavaScript errors and unhandled promise rejections from the app, so you can see issues without opening DevTools.
Code Editor
The code editor shows the full HTML source of your app. During streaming, it updates in real time as the AI writes code. You can read the code at any time — editing is not supported directly; use the chat to request changes instead.
Model Selector
Below the chat input, the model selector lets you switch AI provider and model without leaving the builder. Your selection is remembered per app. See AI Providers for a full model comparison.
Version History
Every generation creates a checkpoint. Click the History button (clock icon) to open the history drawer — it shows the last 5 versions with a timestamp. Click Restore on any version to roll back instantly. The restored version becomes the new current HTML.
See Version History for more detail.
Mobile Layout
On screens narrower than 768px, the builder switches to a tab-based layout with three tabs: Chat · Preview · Code. After generation completes, the view automatically switches to the Preview tab.