# ⚡ Quick Integration Guide
## 1. Add New CSS Files to HTML
Add these lines to `templates/unified_dashboard.html` in the `` section:
```html
```
## 2. Add New JavaScript Files
Add these before the closing `` tag:
```html
```
## 3. Initialize Provider Discovery
Add this script after all JavaScript files are loaded:
```html
```
## 4. Replace Provider Tab Content
Find the "Providers" tab section and replace with:
```html
Total Providers
200
Free APIs
150
Categories
11
Online
120
```
## 5. Add Icons to Buttons
Replace button content with icon + text:
```html
```
## 6. Use Toast Notifications
Replace `alert()` or `console.log()` with toasts:
```javascript
// Success messages
toast.success('Data loaded successfully!');
// Errors
toast.error('Failed to connect to API', {
title: 'Connection Error',
duration: 5000
});
// Warnings
toast.warning('API rate limit approaching', {
duration: 4000
});
// Info
toast.info('Fetching latest data...', {
duration: 2000
});
```
## 7. Make Tables Responsive
Wrap existing tables:
```html
...
...
```
## 8. Add Loading States
```html
```
## 9. Test Everything
```javascript
// Check provider discovery
console.log('Providers:', providerDiscovery.getAllProviders().length);
console.log('Categories:', providerDiscovery.getCategories());
console.log('Stats:', providerDiscovery.getStats());
// Test toasts
toast.success('Test success');
toast.error('Test error');
toast.warning('Test warning');
toast.info('Test info');
// Test icons
console.log('Available icons:', window.iconLibrary.getAvailableIcons());
// Test accessibility
announce('Test announcement', 'polite');
```
## 10. Optional: Backend Provider Endpoint
Add this to your backend to enable health checks:
```python
@app.get("/api/providers")
async def get_providers():
"""Return all providers from config"""
import json
with open('providers_config_ultimate.json', 'r') as f:
config = json.load(f)
return config
@app.get("/api/providers/{provider_id}/health")
async def check_provider_health(provider_id: str):
"""Check if provider is reachable"""
# Implement actual health check
import httpx
async with httpx.AsyncClient() as client:
try:
# Get provider config and test endpoint
response = await client.get(provider_url, timeout=5.0)
return {
"status": "online" if response.status_code == 200 else "offline",
"response_time": response.elapsed.total_seconds() * 1000
}
except Exception as e:
return {"status": "offline", "error": str(e)}
```
---
## ✅ Verification
After integration, verify:
1. **Design Tokens Work:**
- Open DevTools → Console
- Type: `getComputedStyle(document.body).getPropertyValue('--color-accent-blue')`
- Should return: `#3b82f6`
2. **Icons Work:**
- Console: `window.iconLibrary.getAvailableIcons()`
- Should return: Array of 50+ icon names
3. **Provider Discovery Works:**
- Console: `providerDiscovery.getStats()`
- Should return: Object with provider counts
4. **Toasts Work:**
- Console: `toast.success('Test!')`
- Should show green toast in top-right corner
5. **Accessibility Works:**
- Press Tab key → Should see blue focus outlines
- Press Ctrl+K → Should focus search box (if configured)
---
## 🎉 Done!
Your dashboard now has:
- ✅ Enterprise design system
- ✅ Auto-discovery of 200+ providers
- ✅ Beautiful toast notifications
- ✅ SVG icon library
- ✅ Full accessibility
- ✅ Responsive design
Enjoy! 🚀