The only way to give AI agents interactive UIs — through just a URL
Rich, ephemeral web pages generated on demand. No installs. No accounts. Pages self-destruct when done.
npm install @limeade-labs/sparkui
Click to copy
AI agents are stuck in text. Macro trackers as emoji bars. Checkout flows as "paste your card number in chat." Workout timers as… countdown text?
Rich interactions squeezed into a text box. Users deserve better. Agents can do better.
SparkUI generates real, interactive web UIs on demand. A link in chat → rich UI in browser → results back to the agent.
No app installs. No accounts. No setup. Just a URL that works everywhere and self-destructs when done.
AI agents solve real problems. SparkUI gives them the UI to do it right.
These buttons hit a live SparkUI server and generate real ephemeral pages. Try them — they'll self-destruct in an hour.
Daily nutrition tracking with calorie & macro progress bars, meal logging, and totals.
Secure ephemeral checkout with product details, quantity, promo codes, and payment form.
Interactive exercise timer with rounds, rest periods, exercise checklists, and audio cues.
Multi-field form with star ratings, text inputs, selects, and real-time validation.
Real-time polls with bar chart results, single or multi-select, and auto-close support.
Categorized, checkable shopping list with real-time sync and collaborative editing.
Day and week views with color-coded events, detail modals, and today highlighting.
Request approval with approve/reject/changes buttons, comments, and confirmation dialogs.
Side-by-side product comparison with feature matrix, pros/cons, and selection.
Compose custom pages from 15+ built-in components — mix and match to build exactly what you need.
// POST /api/push — compose multiple components { "components": [ { "type": "header", "title": "Order #4821" }, { "type": "key-value", "pairs": { "Status": "Processing", "ETA": "March 18" }}, { "type": "progress", "value": 65, "label": "Fulfillment" }, { "type": "buttons", "items": [ { "label": "Track Package" }, { "label": "Contact Support" } ]} ] }
Your AI agent generates a page — pick a template or compose from 15 components — and pushes it via the REST API.
→User gets a URL in chat. One click opens a polished, interactive page in their browser. No installs. No accounts.
→User actions stream back to the agent via WebSocket in real-time. The agent responds, adapts, and continues the conversation.
┌─────────────┐ POST /api/push ┌───────────────┐ GET /s/:id ┌─────────────┐
│ │ ───────────────────▶ │ │ ◀───────────── │ │
│ Agent │ │ SparkUI │ │ Browser │
│ (AI/MCP) │ ◀── WebSocket ───── │ Server │ ── WebSocket ▶ │ (User) │
│ │ completion events │ │ user actions │ │
└─────────────┘ └───────────────┘ └─────────────┘
Three ways to integrate — from zero-config to full control.
Drop-in skill for OpenClaw agents. Your agent gets sparkui_push and sparkui_compose tools automatically.
Works with Claude Desktop, Cursor, and Windsurf. Standard MCP protocol — just add the server config.
Simple HTTP endpoints. Push templates, compose custom pages, manage lifecycle. Works with any language.
// In your SKILL.md — agent gets tools automatically ## Tools - sparkui_push: Push a template-based page - template: "checkout" | "poll" | "feedback-form" | ... - data: template-specific JSON - sparkui_compose: Build custom pages - components: array of UI components - title: page title // Agent usage: "Create a poll asking the team about lunch" → Agent calls sparkui_push automatically
// claude_desktop_config.json { "mcpServers": { "sparkui": { "command": "npx", "args": [ "@limeade-labs/sparkui", "mcp" ], "env": { "SPARKUI_URL": "https://sparkui.dev", "SPARKUI_TOKEN": "spk_your_token" } } } }
Other approaches exist. None were designed for this.
Push an interactive page in a single API call.
curl -X POST https://sparkui.dev/api/push \ -H "Authorization: Bearer YOUR_TOKEN" \ -H "Content-Type: application/json" \ -d '{ "template": "checkout", "data": { "product": { "name": "Flux Capacitor", "price": 1985.00, "image": "⚡" } } }' # → { "url": "/s/abc123", "expiresAt": "..." }
// Node.js — push + listen for results const res = await fetch('https://sparkui.dev/api/push', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ template: 'feedback-form', data: { fields: [ { type: 'rating', label: 'Experience', max: 5 }, { type: 'text', label: 'Comments' } ]} }) }); const { url, pageId } = await res.json(); // Connect WebSocket to receive user submissions const ws = new WebSocket(`wss://sparkui.dev/ws/${pageId}`); ws.on('message', (data) => console.log('User submitted:', data));