Framework-agnostic UI controls for AI/ML workflows - streaming progress, model loading, LLM parameters, and more
npm install ai-progress-controls








๐ฏ 7 Components โข ๐ฆ 10 Examples โข ๐ Complete Docs โข โ
WCAG AA Compliant
---
Stop rebuilding the same AI UI components for every project. Get production-ready components that work with ANY framework:
$3โ๏ธ React & Next.js Ready - Native adapters with hooks & SSR | $3โก Token Streaming - Real-time visualization with rate tracking $3โ
4 Visual Variants - default, minimal, gradient, glassmorphic |
| 7 Components | 10 Examples | 292 Tests | 91.34% Coverage | 0 Errors |
| :--------------: | :--------------: | :-----------: | :-----------------: | :-------------: |
| Fully documented | Copy-paste ready | 100% passing | Exceeds 80% target | SonarQube clean |
---
$3`` ` function App() { That's it! Props sync automatically, no refs needed. | $3Works in Vue, Angular, Svelte, or plain JavaScript: ` const progress = new StreamProgress({ maxTokens: 2000 }); That's it! Import, create, append - works in any framework. |
โ๏ธ React Adapter โข โฒ Next.js Adapter โข ๐ Web Components โข ๐ API Docs
Code Examples:
โ๏ธ React Examples โข โฒ Next.js Examples โข ๐ฎ Vanilla JS Examples
---
$3` Features: - โ
Hooks-based API | $3` Features: - โ
Full SSR support | $3` Features: - โ
Framework-agnostic |
---
`bash`
git clone https://github.com/Maneesh-Relanto/ai-progress-controls.git
cd ai-progress-controls
npm install
npm run dev
| ๐ Homepage | ๐ Examples Gallery |
| :---------------------------------------------------: | :---------------------------------------------: |
| Interactive demos of all 7 components | 10 copy-paste examples |
> ๐ก Pro Tip: Open index.html directly in your browser to see all components in action!
---
#### ๐ StreamProgress Real-time token streaming visualization โ Rate tracking (tokens/sec) | #### ๐ฅ ModelLoader Multi-stage model loading โ Download progress | #### ๐๏ธ ParameterSlider Single LLM parameter control โ Temperature, top-p, etc. |
#### ๐๏ธ ParameterPanel ๐ Multi-parameter configuration โ Grouped controls | #### โณ QueueProgress Queue position tracking โ Live position updates | #### ๐ RetryProgress Exponential backoff retry โ 4 retry strategies |
#### ๐ BatchProgress Batch processing progress โ Multiple items | ||
| ๐ Getting Started | ๐ฎ 28+ Examples | ๐ API Reference | ๐จ Theming Guide |
| :--------------------------------------------: | :----------------------------------------: | :------------------------------: | :--------------: |
| Quick setup guide | 4-6 per component | 1,100+ lines each | CSS variables |
---
$3Developers building AI apps face repetitive UI challenges: - ๐ด Generic progress bars don't show AI context (tokens, costs, queues) | $3Specialized UI components built FOR AI workflows: - ๐ข AI-aware components with token tracking, cost estimation |
---
Frontend & Fullstack developers building AI-powered applications
$3- ๐ค Developers integrating OpenAI/Anthropic/other LLM APIs | $3- ๐ฌ Chatbot interfaces with streaming responses |
---




#### ๐ฏ Components (7/7) - โ
StreamProgress - Token streaming | #### ๐ Documentation - โ
10 interactive examples (visual variants, theming, cursor states) |



292 tests โข 100% pass rate โข ~7.2s execution time
#### ๐ Test Coverage by Component | Component | Tests | Status | | #### ๐งช What's Tested โ
Lifecycle Methods - start, update, complete, cancel, reset |
๐ฌ Test Framework: Vitest with jsdom โข โก Fast: ~7.2s for 292 tests โข ๐ฏ Comprehensive: Every public API + visual variants tested
| Priority | Task | Status |
| :-------: | ------------------------------------- | :-----: |
| ๐ด High | npm package publishing | Ready |
| ๐ก Medium | Documentation website (GitHub Pages) | Planned |
| ๐ก Medium | E2E tests | Planned |
| ๐ข Low | Additional components (6+ identified) | Roadmap |
---
#### โ๏ธ React / Next.js ` | #### ๐ Vue / Nuxt ` | #### ๐ ฐ๏ธ Angular ` |
#### ๐งก Svelte / SvelteKit ` | #### ๐ฆ SolidJS ` | #### โก Vanilla JS ` |
Also works with: Preact โข Lit โข Astro โข Qwik โข Ember โข And any other JavaScript framework!
---
$3โ
Web Components (native browser standard) $3โ
Token counting & rate tracking | $3โ
WCAG AA compliant (4.5:1 contrast) $3โ
CSS custom properties |
---
$3Core Architecture โ
Web Components | $3Components โ
StreamProgress | $3Visual Variants & Animations ๐จ โ
4 Visual Variants (default, minimal, gradient, glassmorphic) | $3Documentation & Examples ๐ โ
10 Examples - Interactive demos |
- ๐ WorkflowProgress - Multi-step AI pipeline visualization
- ๐ ConfidenceThreshold - Adjustable confidence sliders with previews
- ๐ฏ ModelComparison - Side-by-side model performance comparison
- ๐ MetricsDisplay - Real-time metrics dashboard for AI operations
- ๐ค FileUploadProgress - Drag-drop file uploads for AI processing
- ๐ต TranscriptionProgress - Real-time audio transcription visualization
---
We maintain enterprise-grade quality standards with multiple layers of automated validation:
| Validation | Tool | Status | Metric |
| :------------------: | :--------------: | :----: | :-------------------: |
| ๐งช Unit Tests | Vitest | โ
| 292 tests passing |
| ๐ Coverage | Vitest | โ
| 91.34% (target: 80%) |
| ๐ Type Safety | TypeScript | โ
| Strict mode, 0 errors |
| โจ Code Quality | SonarQube | โ
| 0 critical issues |
| ๐จ Formatting | Prettier | โ
| Auto-formatted |
| โก Performance | Lighthouse | โ
| 95+ scores |
| โฟ Accessibility | Axe + Lighthouse | โ
| WCAG 2.1 AA |
| ๐ Security | npm audit | โ
| 0 vulnerabilities |
---
| Resource | Description | Link |
| :--------------------: | -------------------------------- | :---------------------------------------------: |
| ๐ Getting Started | Setup guide for all frameworks | View |
| ๐ API Reference | Complete API docs (7 components) | View |
| ๐ฎ Examples | 10 interactive examples | View |
| ๐จ Visual Variants | Customization & animations | View |
| ๐๏ธ Theming Guide | CSS variables & brand themes | View |
| โฟ Accessibility | WCAG compliance details | View |
---
Contributions welcome! This is an open-source project aimed at improving DX for AI application developers.
---
MIT License - See LICENSE file for details
Copyright ยฉ 2026 Maneesh Thakur
---
โญ Star this repo if you find it useful! โญ

