GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
botui/AI_IMPLEMENTATION_PROMPT.md

15 KiB
Raw Blame History

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

<div hx-get="/api/items" hx-trigger="load" hx-swap="innerHTML"></div>

Search with Debounce

<input type="search" name="q"
       hx-get="/api/search" 
       hx-trigger="keyup changed delay:300ms"
       hx-target="#results">

Form Submit

<form hx-post="/api/items" hx-target="#list" hx-swap="beforeend">
    <input name="title" required>
    <button type="submit">Add</button>
</form>

Delete with Confirm

<button hx-delete="/api/items/{id}" 
        hx-confirm="Delete this item?"
        hx-target="closest tr"
        hx-swap="outerHTML">Delete</button>

Polling

<div hx-get="/api/status" hx-trigger="every 10s"></div>

WebSocket

<div hx-ext="ws" ws-connect="/ws/chat">
    <div id="messages"></div>
    <form ws-send>
        <input name="message">
        <button>Send</button>
    </form>
</div>

Tabs

<nav>
    <button hx-get="/tab1" hx-target="#content" class="active">Tab 1</button>
    <button hx-get="/tab2" hx-target="#content">Tab 2</button>
</nav>
<div id="content"></div>

FILE CREATION ORDER

Week 1-2:

  1. ui/suite/paper/paper.html
  2. ui/suite/research/research.html

Week 3-4: 3. ui/suite/sources/sources.html 4. ui/suite/meet/meet.html

Week 5-6: 5. Enhance ui/suite/chat/chat.html (conversations) 6. Enhance ui/suite/drive/index.html 7. Enhance ui/suite/calendar/calendar.html 8. Enhance ui/suite/mail/mail.html

Week 7-8: 9. ui/suite/admin/index.html 10. ui/suite/admin/users.html 11. ui/suite/admin/groups.html 12. ui/suite/admin/dns.html

Week 9-10: 13. ui/suite/settings/index.html 14. ui/suite/settings/profile.html 15. ui/suite/settings/security.html 16. ui/suite/settings/appearance.html 17. ui/suite/settings/notifications.html 18. ui/suite/settings/storage.html 19. ui/suite/settings/integrations.html 20. ui/suite/settings/privacy.html

Week 11-12: 21. ui/suite/monitoring/index.html 22. ui/suite/monitoring/services.html 23. ui/suite/monitoring/logs.html 24. ui/suite/monitoring/metrics.html 25. ui/suite/monitoring/alerts.html

Week 13-14: 26. ui/suite/auth/register.html 27. ui/suite/auth/forgot-password.html 28. Enhance ui/suite/auth/login.html

Week 15: 29. Update ui/suite/base.html navigation 30. Polish and testing

SUCCESS CHECKLIST

  • 100+ API endpoints wired to UI
  • All CRUD operations working
  • Real-time features via WebSocket
  • Mobile responsive
  • Admin panel complete
  • Settings self-service complete
  • Monitoring operational
  • OAuth working (Google, Microsoft)
  • 2FA implemented
  • Zero custom JS where HTMX works
  • All 6 themes working
  • No compilation warnings