BrightWrapper Widget Demo

Interactive demos showing real-world usage of UI components

API Key

Enter your API key to test live LLM calls. Get an API key

LLM Progress llm-progress.js

Progress indicator with time estimates, logs, retry indicators, and debug panel. Click "Debug" to inspect the full prompt and response. Best for single LLM operations.

Fun Fact Generator

Enter a topic to generate an interesting fact about it.

Result

const progress = new LLMProgress({ container: document.getElementById('progress-container'), projectName: 'my-app', // Used for time estimate lookups theme: 'dark', showElapsed: true }); progress.setDebugInfo({ prompt: myPrompt }); await progress.start('Generating...'); // Time estimated from historical data const result = await callLLM(prompt); progress.setDebugInfo({ prompt: myPrompt, response: result }); progress.complete('Done!');

Multi Progress llm-multi-progress.js

Track multiple concurrent LLM operations with individual progress bars. Perfect for batch processing.

Content Package Generator

Enter a product or topic to generate a complete content package (tagline, description, and features).

Generated Content

const multi = new LLMMultiProgress({ container: document.getElementById('container'), projectName: 'my-app', theme: 'dark', showElapsed: true }); multi.addTask('tagline', 'Generating tagline...'); multi.addTask('description', 'Writing description...'); // Run in parallel, set debug info on completion const result = await generateTagline(); multi.setTaskDebugInfo('tagline', { prompt: '...', response: result }); multi.completeTask('tagline', 'Done!');

Chat Component chat_component.js

Full chat interface with message history, streaming responses, and time estimates.

AI Assistant

A complete chat interface. Try asking questions or having a conversation.

const chat = new LLMChatComponent({ containerId: 'chat-container', apiUrl: '/api/chat/stream', projectName: 'my-app', headers: { 'X-API-Key': apiKey }, systemPrompt: 'You are a helpful assistant.', initialMessage: 'Hello! How can I help you today?' });