This is a Marimo Smart Notebook - an AI-powered Python development environment featuring a modern web-based interface. The application combines the functionality of a Jupyter-style notebook with intelligent AI assistance for code generation and analysis. It provides a three-panel layout with file management, notebook editing, and AI copilot capabilities, all built on a full-stack TypeScript architecture.
Preferred communication style: Simple, everyday language.
The frontend is built using React with TypeScript and modern development tools:
- Framework: React 18 with Vite for fast development and building
- Routing: Wouter for lightweight client-side routing
- State Management: TanStack Query for server state management and caching
- UI Framework: shadcn/ui components built on Radix UI primitives
- Styling: Tailwind CSS with custom CSS variables for theming
- Real-time Communication: WebSocket integration for live updates
The application follows a component-based architecture with clear separation between layout, business logic, and presentation components. The three-panel layout provides dedicated spaces for file navigation, notebook editing, and AI assistance.
The backend uses Express.js with TypeScript in an ESM configuration:
- Server Framework: Express.js for HTTP API and static file serving
- Real-time Features: WebSocket server for live updates and streaming responses
- File Handling: Multer for file uploads with memory storage
- Database Layer: Drizzle ORM with PostgreSQL for type-safe database operations
- Code Execution: Python subprocess execution for notebook cell evaluation
The server implements a service-oriented architecture with separate services for file management, notebook operations, AI integration, and knowledge graph functionality.
Primary Database: PostgreSQL with Drizzle ORM providing:
- File System Storage: Hierarchical file and folder structure with metadata
- Notebook Management: Cell-based storage with execution state and output tracking
- AI Session Management: Conversation history and context preservation
- Knowledge Graph: Node and relationship storage for code analysis and context building
File Storage: Hybrid approach combining database metadata with filesystem storage for binary files.
Currently implements a stateless architecture without explicit authentication. The system is designed for single-user or trusted environment usage, focusing on development productivity rather than multi-user security.
The system supports multiple AI providers through a unified interface:
- OpenRouter Integration: Access to multiple open-source LLMs with free tier support
- Google Gemini Integration: Direct integration with Gemini models
- Dual Modes: "Ask" mode for conversational assistance and "Agent" mode for autonomous code generation
- Context Management: Knowledge graph integration for providing relevant code context to AI models
- Streaming Responses: Real-time message streaming via WebSocket connections
The AI service abstracts provider differences and handles model selection, context injection, and response formatting.
- @neondatabase/serverless: PostgreSQL database connectivity
- drizzle-orm: Type-safe ORM for database operations
- drizzle-kit: Database migration and schema management
- @google/genai: Google Gemini API client
- OpenRouter API: Access to multiple LLM providers via HTTP requests
- @tanstack/react-query: Server state management and caching
- @radix-ui/*: Headless UI component primitives
- wouter: Lightweight routing library
- tailwindcss: Utility-first CSS framework
- Vite: Frontend build tool and development server
- TypeScript: Type safety and developer experience
- ESBuild: Backend bundling for production builds
- ws: WebSocket implementation for live updates
- React hooks: Custom WebSocket integration on the frontend
- Node.js child_process: Python subprocess execution for notebook cells
- multer: File upload handling middleware