Webapp Documentation #

The BonsAI web application is the frontend interface for the document intelligence platform. Built with Next.js and React, it provides a modern, responsive interface for document processing, invoice extraction, and data management.

Architecture #

Tech Stack:

• Framework: Next.js (App Router)
• Language: TypeScript
• State Management: TanStack Query, Legend State
• Styling: Tailwind CSS
• UI Components: Radix UI, shadcn/ui

Key Features:

• Document upload and processing
• Invoice extraction and validation
• Multi-organization support
• Real-time updates with IndexedDB sync
• Responsive design

Documentation Sections #

• Architecture - Application structure, routing, and organization
• Features - Core features and user workflows
• UI Components - Component library and design patterns
• API Code Generation - Generating TypeScript clients from OpenAPI specs
• API Request Logging - Logging API requests to Datadog with trace IDs
• Legend State & IndexedDB Sync - State management and offline capabilities
• Local Production Testing - Testing production builds locally

Quick Start for Developers #

1. Start the development server:

   cd ~/bonsai
   mise run dev
   

2. Access the webapp:

   • Open the App link in your Coder workspace dashboard
   • Or visit http://localhost:3000 directly

3. Make changes:

   • Edit files in /apps/webapp
   • Changes hot-reload automatically

Common Tasks #

• Run linters: mise run lint-check
• Run type checking: mise run webapp-type-check
• Run tests: mise run test
• Generate API client: See API Code Generation

Related Documentation #

• Example Workflow: Adding a New Field - Complete guide showing how to add a new field to the UI
• API Documentation - Backend API that powers the webapp
• Development Workflow - Branching, PRs, and code quality
• E2E Testing - Testing the webapp end-to-end
• Preview Environments - Deploy preview versions of the webapp