API Key: Get key

Feedback

Show code
FeedbackButton.createWithModal({ apiUrl: '/api/feedback', transcribeUrl: '/api/transcribe', projectName: 'my-app', theme: 'light' });

Voice Transcription

Show code
Click mic to record, click again to transcribe
new LLMTranscribe({ container: document.getElementById('container'), apiKey: 'your-key', apiUrl: '/api/transcribe', onTranscript: (text) => console.log(text) });

Chat

Show code
new LLMChatComponent({ containerId: 'chat', apiUrl: '/api/chat', headers: { 'X-API-Key': apiKey }, systemPrompt: 'You are Max from Pedal Power...' });

Progress Indicators

Show code
Result appears here
const progress = new LLMProgress({ container: el, projectName: 'my-app', theme: 'light' }); await progress.start('Working...'); // do LLM call progress.complete('Done!');

Multi Progress

Show code
Tagline, description & features
const multi = new LLMMultiProgress({ container: el, projectName: 'my-app' }); multi.addTask('task1', 'Generating...'); // do LLM call multi.completeTask('task1', 'Done');

Sequential Requests

Show code
Pros, cons & summary
const progress = new LLMProgress({ ... }); await progress.start('Analyzing...'); for (const step of steps) { const r = await llmCall(step); progress.addDebugEntry({ ... }); } progress.complete('Done!');

Claude Code

Show code

Autonomous AI agent that reads, analyzes, and writes code. This demo analyzes the Flask source code with read-only tools.

Task: Describe the Flask codebase architecture
const widget = new ClaudeCodeWidget({ container: document.getElementById('output'), runUrl: '/api/claude-code/run', pollUrl: '/api/task', cancelUrl: '/api/claude-code/cancel', theme: 'dark', headers: { 'X-API-Key': apiKey }, }); // Live session (admin-only) widget.run({ prompt: 'Describe the Flask codebase architecture', workingDirectory: '/home/ubuntu/apps/flask-demo', projectName: 'widget-demo', allowedTools: ['Read', 'Glob', 'Grep'], }); // Or replay pre-recorded logs (no API key needed) widget.replay(recordedLogs, { speed: 2 });