API Key: Get key

Feedback

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

Integration Status Modal

Show code

Use this when your app needs a small debug surface showing which downstream integrations are active. Your app supplies the statuses; BrightWrapper only renders the modal.

Recommended contract: expose a backend status endpoint such as GET /api/integrations/status and pass the normalized payload into the component.

const modal = new IntegrationStatusModal({ theme: 'light' }); modal.open({ title: 'Journal Integrations', checkedAt: 'Mar 15, 3:49 PM', description: 'PictoNode deltas are proposals only.', sections: [{ title: 'Integrations', items: [ { label: 'BrightWrapper chat UI', provider: 'BrightWrapper', status: 'active' }, { label: 'PictoNode graph delta extractor', provider: 'PictoNode', status: 'inactive' } ] }] });

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!');

Agent Widget

Show code

Terminal-style widget for real live Claude Code runs. This demo authenticates with your BrightWrapper API key, then proxies to Agent Manager against BrightWrapper's safe demo_app workspace. No shared demo key is embedded in the page.

Workspace: demo_app via Agent Manager
Enter a prompt and run a real Claude Code task against the safe demo_app workspace.
const widget = new AgentWidget({ container: document.getElementById('output'), runUrl: '/api/widget-demo/claude-code/run', pollUrl: '/api/widget-demo/claude-code/task', cancelUrl: '/api/widget-demo/claude-code/cancel', headers: { 'X-API-Key': apiKey }, theme: 'dark', source: 'claude', viewMode: 'split', showProgress: true, showActivityTimeline: true, showPromptDetails: true, progressOperationId: 'widget-demo-agent-run', }); // Start a real Agent Manager Claude Code run via BrightWrapper's proxy await widget.run({ prompt: prompt, workingDirectory: '/home/ubuntu/apps/bright-wrapper-llm/demo_app', projectName: 'bright-wrapper-widget-demo', maxBudgetUsd: 0.75, });