Buddai Web App

Modern web dashboard for managing Buddai agents, tools, and conversations. Built with React 18, Vite, TailwindCSS, and Lucide icons, the app provides both functional workflows for daily operations and a clean technical foundation for extensibility.

Functional Overview

• Authentication

  • Login screen with dark/light toggle.
  • Demo credentials banner (when mocks enabled).

• Agents Management

  • Responsive sidebar listing all agents with create action.
  • Markdown-based agent editor (model selection, temperature slider, tool assignment, prompt editing).
  • AI-assisted prompt tweaks via inline chat input.

• Chat Experience

  • Multi-agent chat interface with back navigation.
  • Loading indicators, error banners, progress handling, and plain text rendering.

• Settings

  • Backend URL and configuration editing aligned with Buddai’s MCP tool chain.
  • Tool registry visualization and client connection panels.

• Dark Mode

  • Global toggle with persisted preference.

Screens

Screen	Description
Login	Access control with branding and demo hints (mocks).
Agents	High-level roster view with creation workflow.
Agent Editor	Full agent configuration, prompt editing, tool management.
Chat	Conversational UI for selected agent.
Settings	System-level configuration (models, tools, connections).

Getting Started

Prerequisites

• Node.js ≥ 20.x
• npm ≥ 10.x

Installation

npm install

Development with Mock Services (default)

npm run dev

• Reads .env.development (VITE_USE_MOCKS=true).
• Demo credentials appear on login (admin/password, user/password, demo/password).
• LocalStorage persists agents, settings, auth tokens.

Development Against Real API

1. Create .env.development.local (or unset the env var):

   VITE_USE_MOCKS=false

2. Ensure apiReal.tsx points to live endpoints.
3. Run the dev server:

   npm run dev

Production Build

npm run build

• Outputs static assets under dist/ (Vite).
• Deploy via any static host or edge platform.

Configuration

• Environment Variables

  • VITE_USE_MOCKS – toggles mock vs real API services (true, 1, mocks, etc.).
  • Additional MCP/tool secrets flow through the backend; not stored in the SPA.

• Local Storage Keys

  • buddai_agents, buddai_settings – persisted mock data sets.
  • buddai_auth_token, buddai_user – auth session in mock mode.
  • buddai_backend_url – last-used backend URL.

Architecture & Key Modules

• src/App.tsx – root layout, routing between screens, theme handling.
• src/DataProviders.tsx – hooks for agents, settings, auth, dark mode, plus supervisor agent factory.
• src/components/ – UI composables (AgentList, MarkdownEditor, ChatInterface, Settings, Login).
• src/services/api.tsx – switchable API layer deciding between apiMock and apiReal.
• src/services/apiMock.tsx – feature-rich mock implementation (CRUD, auth, chat history).
• src/services/apiReal.tsx – live API wiring (placeholder for real backend integration).
• src/components/ui/ – Shadcn-based primitives (Button, Card, Dialog, etc.).

Styling

• TailwindCSS utility classes with global overrides in src/index.css.
• Dark mode powered by CSS variables + toggled via contextual state.

Testing & Quality

• Manual validation recommended via npm run dev with both mock and real modes.
• Future enhancements may include automated tests (Jest/Playwright) and story-driven component previews.

Roadmap Ideas

• Persist dark-mode preference across sessions.
• Add agent search/filter chips in sidebar.
• Extend chat with streaming responses and attachments.
• Integrate toast notifications for save/errors.

License

Internal Buddai project. Contact the maintainers for usage or distribution details.