# AI Implementation Prompt - BotUI Full Product Build
**Budget:** $200,000 USD | **Timeline:** 15 weeks | **Version:** 6.1.0
---
## CONTEXT
You are implementing frontend UI for General Bots Suite. ALL backend APIs already exist in BotServer - your job is purely to wire HTMX-based UI to existing endpoints.
### Tech Stack
- **Templates:** Rust Askama (HTML templates)
- **Interactivity:** HTMX (NO custom JavaScript unless absolutely necessary)
- **Styling:** CSS with CSS variables for theming
- **WebSocket:** htmx-ws extension for real-time features
- **Icons:** Use ONLY existing icons from `ui/suite/assets/icons/`
### Critical Rules
1. **HTMX ONLY** - No fetch(), no axios, no custom JS for API calls
2. **Server-side rendering** - All HTML generated by Rust/Askama
3. **Local assets** - NEVER use CDN links
4. **Zero warnings** - Clean Rust compilation required
5. **6 themes** - Use CSS variables, not hardcoded colors
---
## PHASE 1: CORE APPS ($45,000 - 3 weeks)
### Task 1.1: Paper App (Document Editor)
**Create:** `ui/suite/paper/paper.html`
Wire these endpoints:
```
POST /api/paper/new → Create new document
GET /api/paper/list → List documents
GET /api/paper/search?q= → Search documents
POST /api/paper/save → Save document
POST /api/paper/autosave → Auto-save (5s delay)
GET /api/paper/{id} → Get document
POST /api/paper/{id}/delete → Delete document
POST /api/paper/template/blank → Blank template
POST /api/paper/template/meeting → Meeting notes template
POST /api/paper/template/todo → Todo template
POST /api/paper/template/research→ Research template
POST /api/paper/ai/summarize → AI summarize
POST /api/paper/ai/expand → AI expand text
POST /api/paper/ai/improve → AI improve writing
POST /api/paper/ai/simplify → AI simplify
POST /api/paper/ai/translate → AI translate
POST /api/paper/ai/custom → AI custom prompt
GET /api/paper/export/pdf → Export PDF
GET /api/paper/export/docx → Export DOCX
GET /api/paper/export/md → Export Markdown
GET /api/paper/export/html → Export HTML
GET /api/paper/export/txt → Export Text
```
Structure:
- Sidebar: document list + search
- Main: rich text editor area
- Right panel: AI assistant tools
- Toolbar: save, templates, export
---
### Task 1.2: Research App
**Create:** `ui/suite/research/research.html`
Wire these endpoints:
```
GET /api/research/collections → List collections
POST /api/research/collections/new → Create collection
GET /api/research/collections/{id} → Get collection
POST /api/research/search → Search across sources
GET /api/research/recent → Recent searches
GET /api/research/trending → Trending topics
GET /api/research/prompts → Suggested prompts
GET /api/research/export-citations → Export citations
```
---
### Task 1.3: Sources App
**Create:** `ui/suite/sources/sources.html`
Wire these endpoints:
```
GET /api/sources/prompts → Prompt library
GET /api/sources/templates → Template library
GET /api/sources/news → News feed
GET /api/sources/mcp-servers → MCP server list
GET /api/sources/llm-tools → LLM tools list
GET /api/sources/models → Available models
GET /api/sources/search?q= → Search sources
```
Structure: Tab-based navigation between source types
---
### Task 1.4: Meet App (Video Conferencing)
**Create:** `ui/suite/meet/meet.html`
Wire these endpoints:
```
POST /api/meet/create → Create meeting
GET /api/meet/rooms → List active rooms
GET /api/meet/rooms/{room_id} → Get room details
POST /api/meet/rooms/{room_id}/join → Join room
POST /api/meet/transcription/{room_id} → Start transcription
POST /api/meet/token → Get meeting token
POST /api/meet/invite → Send invites
WS /ws/meet → Real-time meeting
POST /api/voice/start → Start voice
POST /api/voice/stop → Stop voice
```
---
### Task 1.5: Conversations (Enhance Chat)
**Enhance:** `ui/suite/chat/chat.html`
Add these endpoints:
```
POST /conversations/create → Create conversation
POST /conversations/{id}/join → Join
POST /conversations/{id}/leave → Leave
GET /conversations/{id}/members → List members
GET /conversations/{id}/messages → Get messages
POST /conversations/{id}/messages/send → Send message
POST /conversations/{id}/messages/{msg}/edit → Edit message
POST /conversations/{id}/messages/{msg}/delete → Delete message
POST /conversations/{id}/messages/{msg}/react → Add reaction
POST /conversations/{id}/messages/{msg}/pin → Pin message
GET /conversations/{id}/messages/search?q= → Search
POST /conversations/{id}/calls/start → Start call
POST /conversations/{id}/calls/join → Join call
POST /conversations/{id}/calls/leave → Leave call
POST /conversations/{id}/calls/mute → Mute
POST /conversations/{id}/calls/unmute → Unmute
POST /conversations/{id}/screen/share → Share screen
POST /conversations/{id}/screen/stop → Stop share
POST /conversations/{id}/recording/start → Start recording
POST /conversations/{id}/recording/stop → Stop recording
POST /conversations/{id}/whiteboard/create → Create whiteboard
POST /conversations/{id}/whiteboard/collaborate → Collaborate
```
---
### Task 1.6: Drive Enhancement
**Enhance:** `ui/suite/drive/index.html`
Add missing endpoints:
```
POST /files/copy → Copy file
POST /files/move → Move file
GET /files/shared → Shared with me
GET /files/permissions → Get permissions
GET /files/quota → Storage quota
GET /files/sync/status → Sync status
POST /files/sync/start → Start sync
POST /files/sync/stop → Stop sync
GET /files/versions → File versions
POST /files/restore → Restore version
POST /docs/merge → Merge documents
POST /docs/convert → Convert format
POST /docs/fill → Fill template
POST /docs/export → Export document
POST /docs/import → Import document
```
---
### Task 1.7: Calendar Enhancement
**Enhance:** `ui/suite/calendar/calendar.html`
Add missing endpoints:
```
GET /api/calendar/events/{id} → Get event
PUT /api/calendar/events/{id} → Update event
DELETE /api/calendar/events/{id} → Delete event
GET /api/calendar/export.ics → Export iCal
POST /api/calendar/import → Import iCal
```
---
### Task 1.8: Email Enhancement
**Enhance:** `ui/suite/mail/mail.html`
Add missing endpoints:
```
GET /api/email/accounts → List accounts
POST /api/email/accounts/add → Add account
DELETE /api/email/accounts/{id} → Remove account
GET /api/email/compose → Compose form
POST /api/email/send → Send email
POST /api/email/draft → Save draft
GET /api/email/folders/{account_id} → Get folders
GET /api/email/tracking/stats → Tracking stats
```
---
## PHASE 2: ADMIN PANEL ($55,000 - 4 weeks)
### Task 2.1: User Management
**Create:** `ui/suite/admin/users.html`
Wire ALL user endpoints:
```
POST /users/create → Create user
PUT /users/{id}/update → Update user
DELETE /users/{id}/delete → Delete user
GET /users/list → List users
GET /users/search?q= → Search users
GET /users/{id}/profile → Get profile
GET /users/{id}/settings → Get settings
GET /users/{id}/permissions → Get permissions
GET /users/{id}/roles → Get roles
GET /users/{id}/status → Get status
GET /users/{id}/presence → Get presence
GET /users/{id}/activity → Get activity
POST /users/{id}/security/2fa/enable → Enable 2FA
POST /users/{id}/security/2fa/disable → Disable 2FA
GET /users/{id}/security/devices → List devices
GET /users/{id}/security/sessions → List sessions
POST /users/{id}/notifications/preferences/update → Update prefs
```
---
### Task 2.2: Group Management
**Create:** `ui/suite/admin/groups.html`
Wire ALL group endpoints:
```
POST /groups/create → Create group
PUT /groups/{id}/update → Update group
DELETE /groups/{id}/delete → Delete group
GET /groups/list → List groups
GET /groups/search?q= → Search groups
GET /groups/{id}/members → Get members
POST /groups/{id}/members/add → Add member
POST /groups/{id}/members/roles → Set member role
DELETE /groups/{id}/members/remove → Remove member
GET /groups/{id}/permissions → Get permissions
GET /groups/{id}/settings → Get settings
GET /groups/{id}/analytics → Get analytics
POST /groups/{id}/join/request → Request join
POST /groups/{id}/join/approve → Approve join
POST /groups/{id}/join/reject → Reject join
POST /groups/{id}/invites/send → Send invite
GET /groups/{id}/invites/list → List invites
```
---
### Task 2.3: DNS Management
**Create:** `ui/suite/admin/dns.html`
```
POST /api/dns/register → Register hostname
POST /api/dns/remove → Remove hostname
```
---
### Task 2.4: Admin Shell
**Create:** `ui/suite/admin/index.html`
Sidebar navigation to: Dashboard, Users, Groups, Bots, DNS, Audit, Billing
---
## PHASE 3: SETTINGS ($30,000 - 2 weeks)
**Create directory:** `ui/suite/settings/`
Files needed:
- `index.html` - Settings shell with sidebar nav
- `profile.html` - User profile editing
- `security.html` - 2FA, sessions, devices, password change
- `appearance.html` - Theme selection (6 themes)
- `notifications.html` - Email/push/in-app preferences
- `storage.html` - Cloud sync configuration
- `integrations.html` - API keys, webhooks, OAuth connections
- `privacy.html` - Data export, account deletion
- `billing.html` - Subscription management
---
## PHASE 4: MONITORING ($25,000 - 2 weeks)
**Create directory:** `ui/suite/monitoring/`
Files needed:
- `index.html` - Monitoring shell
- `services.html` - Service health grid
- `resources.html` - CPU/Memory/Disk charts
- `logs.html` - Real-time log viewer (WebSocket)
- `metrics.html` - Prometheus metrics display
- `alerts.html` - Alert rule configuration
- `health.html` - Health check endpoints
Key endpoints:
```
GET /api/services/status → Service health
GET /api/analytics/dashboard → Dashboard metrics
GET /api/analytics/metric → Individual metric
GET /metrics → Prometheus export
WS /ws/logs → Real-time logs
```
---
## PHASE 5: AUTH ($25,000 - 2 weeks)
**Enhance:** `ui/suite/auth/`
- `login.html` - Add 2FA challenge flow
- `register.html` - New user registration
- `forgot-password.html` - Password reset request
- `reset-password.html` - Password reset form
Key endpoints:
```
POST /api/auth/login → Login
POST /api/auth/register → Register
POST /api/auth/2fa/verify → Verify 2FA code
POST /api/auth/forgot-password → Request reset
POST /api/auth/reset-password → Reset password
GET /api/auth/oauth/google → Google OAuth
GET /api/auth/oauth/microsoft → Microsoft OAuth
```
---
## PHASE 6: POLISH ($20,000 - 2 weeks)
1. Update `base.html` navigation with all new apps
2. Mobile responsiveness for all views
3. ARIA labels and keyboard navigation
4. Extract strings for i18n preparation
5. Error states and loading indicators
6. Comprehensive testing
---
## HTMX PATTERNS TO USE
### Basic GET
```html
```
### Search with Debounce
```html
```
### Form Submit
```html
```
### Delete with Confirm
```html
```
### Polling
```html
```
### WebSocket
```html