Core Concepts
CapsulAI
CapsulAI lets generated apps call AI models at runtime — so your app can generate content, answer questions, extract data, or hold conversations on the fly.
Activating AI features
When your prompt contains words like "AI", "chatbot", "smart", or "intelligent", Capsul detects AI intent and asks if you want to enable AI features. You can:
- • Pick a template — pre-configured patterns for chat assistants, content generators, document Q&A, etc.
- • Build without template — AI features are still active, the AI builds exactly what you described.
Once active, window.CapsulAI is injected into the app and a "✨ Capsul AI" badge is shown in the bottom-right corner.
API Reference
CapsulAI.complete(prompt, options?)
Send a single prompt string. Returns the AI response as a plain string.
const summary = await window.CapsulAI.complete( 'Summarise this text in 2 sentences: ' + articleText );
CapsulAI.chat(messages, options?)
Send a full messages array (OpenAI format). Returns the assistant reply as a string.
const reply = await window.CapsulAI.chat([
{ role: 'system', content: 'You are a friendly cooking assistant.' },
{ role: 'user', content: 'What can I make with chicken and rice?' },
]);options
{
model: 'llama-3.3-70b-versatile', // defaults to fast Groq model
provider: 'groq' // 'groq' | 'openrouter' | 'nvidia'
}Structured output (JSON)
CapsulAI returns plain text. For structured data, ask the AI to reply in JSON inside your prompt, then parse the response:
// Recipe generator example
const raw = await window.CapsulAI.complete(
`Generate a recipe for "${recipeName}" for ${servings} people.
Reply ONLY with valid JSON, no markdown fences, no explanation:
{
"ingredients": [{ "item": "...", "quantity": "..." }],
"instructions": ["step 1...", "step 2..."],
"prepTime": "20 minutes",
"calories": "450 per serving"
}`
);
// Parse — with fallback regex for models that add extra text
let recipe;
try {
recipe = JSON.parse(raw);
} catch {
const match = raw.match(/\{[\s\S]*\}/);
recipe = match ? JSON.parse(match[0]) : null;
}
if (recipe) renderRecipe(recipe);
else showError('Could not parse recipe — try again');Pattern for any generator
- 1. Collect user inputs from form fields
- 2. Include them in the CapsulAI prompt: "for ${name} with ${value}"
- 3. Ask for JSON output with a schema in the prompt
- 4. Parse with try/catch + regex fallback
- 5. Save the result to CapsulDB for history
- 6. Render the structured data
Best practices
- ►Always show a loading state — CapsulAI calls take 1–5 seconds. Show a spinner or skeleton so the user knows something is happening.
- ►Handle errors gracefully — Wrap in try/catch and show a friendly "AI unavailable — try again" message with a retry button.
- ►Pass user inputs directly — Never use generic placeholders. If the user typed "Spaghetti Bolognese" into a field, include that exact string in the prompt.
- ►Save results to CapsulDB — Store AI-generated results so users can revisit past generations without spending another AI call.
AI Templates
When AI intent is detected, you can choose a pre-configured template that adds detailed instructions to the system prompt:
AI Chat Assistant
Full chat interface with message history stored in CapsulDB, markdown rendering, typing indicator
Smart Form Filler
Natural language input → AI fills structured fields → save to CapsulDB
AI Content Generator
Email / blog / social post / summary generator with type and tone selectors
Document Q&A
Paste any document, ask questions — context is sent with every AI call
AI Data Extractor
Paste raw text → define columns → AI extracts structured table → CSV export