# Rules for Working with chat.continue.dev Codebase

## Project Overview

`chat.continue.dev` is a chat application with AI capabilities based on the Vercel AI Chatbot template. It provides a chat interface that allows users to interact with AI models and create various types of artifacts (text documents, code snippets, images, and spreadsheets).

## Technology Stack

- **Frontend**: Next.js with TypeScript
- **UI Framework**: React with Tailwind CSS
- **Database**: PostgreSQL with Drizzle ORM
- **Authentication**: WorkOS authkit-nextjs
- **AI Providers**: xAI (Grok models) and Groq

## Core Concepts

### 1. Chat System

The application revolves around chat conversations between users and AI models. Each chat:
- Belongs to a user
- Contains messages with different roles (user/assistant)
- Supports voting on messages
- Can be public or private

### 2. Artifacts System

Artifacts are special content types that can be created and updated through AI interactions:

- **Text**: General purpose text documents
- **Code**: Programming code snippets (mainly Python)
- **Image**: AI-generated images
- **Sheet**: Spreadsheet-like data

Artifacts appear alongside the chat interface and update in real-time as the AI generates content.

### 3. Database Schema

Key entities in the database:
- `User`: Application users with authentication
- `Chat`: Conversations between users and AI
- `Message`: Individual messages within a chat
- `Document`: Artifacts created during chats
- `Suggestion`: Proposed changes to artifacts
- `Vote`: User votes on messages

### 4. AI Models

The application uses two primary AI models:
- `chat-model`: xAI's Grok model for general chat and content generation
- `chat-model-reasoning`: Groq's deepseek model with enhanced reasoning capabilities

There are also specialized models for specific tasks:
- `title-model`: For generating titles
- `artifact-model`: For artifact creation/modification
- `small-model`: For image generation

## Code Structure Guidelines

### File Organization

The codebase follows a typical Next.js project structure:
- `/app`: Next.js application routes and API endpoints
- `/components`: React components
- `/lib`: Shared utilities and libraries
- `/artifacts`: Artifact-specific implementations
- `/hooks`: Custom React hooks
- `/docs`: Documentation

### AI Integration

When working with AI functionality:
1. Use the appropriate model for the task (`chat-model` for general chat, `chat-model-reasoning` for complex reasoning)
2. Follow the system prompts defined in `lib/ai/prompts.ts`
3. Use artifact creation tools (`createDocument`) only when appropriate per the artifacts prompt
4. Don't update documents immediately after creating them

### Artifact Handling

When creating or updating artifacts:
1. Use the document handlers defined in `artifacts/[type]/server.ts`
2. Stream updates to the client using the `dataStream` API
3. Follow the specific format requirements for each artifact type
4. For code artifacts, prefer Python and include helpful comments

### Database Operations

When working with database:
1. Use the query functions in `lib/db/queries.ts`
2. Follow the schema definitions in `lib/db/schema.ts`
3. Be aware that there are deprecated schemas that are being migrated (messages v1 to v2)

## Common Tasks

### Adding a New Feature

1. Determine if your feature requires database changes
2. Update schema in `lib/db/schema.ts` if needed
3. Add necessary query functions in `lib/db/queries.ts`
4. Implement UI components in `/components`
5. Add routes or API endpoints in `/app` if needed

### Modifying AI Behavior

1. Update system prompts in `lib/ai/prompts.ts`
2. Modify model configurations in `lib/ai/providers.ts` if needed
3. Update artifact handlers if changing artifact-related behavior

### Working with Artifacts

1. Follow the pattern in existing artifact implementations
2. Use the `createDocumentHandler` to implement new artifact types
3. Ensure real-time updates via the data streaming API

## Development Environment

To run the project locally:
1. Install dependencies with `pnpm install`
2. Set up environment variables as defined in `.env.example`
3. Start the development server with `pnpm dev`

Required environment variables:
- `AUTH_SECRET`: Secret for authentication
- `XAI_API_KEY`: API key for xAI models
- `GROQ_API_KEY`: API key for Groq models
- `BLOB_READ_WRITE_TOKEN`: Token for Vercel Blob storage
- `POSTGRES_URL`: PostgreSQL database connection string

## Important Patterns and Conventions

1. Use TypeScript throughout the codebase
2. Follow React component conventions with proper props typing
3. Use Drizzle ORM for database operations
4. Use the AI SDK for model interactions
5. Follow the artifact creation and update patterns
6. Use the streaming API pattern for real-time updates

## Appendix: Key Files Reference

- `lib/db/schema.ts`: Database schema definitions
- `lib/db/queries.ts`: Database query functions
- `lib/ai/providers.ts`: AI model providers configuration
- `lib/ai/prompts.ts`: System prompts for AI models
- `lib/artifacts/server.ts`: Artifact handling utilities
- `components/artifact.tsx`: Main artifact component
- `components/chat.tsx`: Main chat interface component