# Claude.ai Clone - Complete App Specification

## Project Overview
This specification describes building a fully functional clone of claude.ai, Anthropic's conversational AI interface, with features including chat, artifact rendering, project organization, and multiple model selection.

## Technology Stack

**Frontend:**
- React with Vite
- Tailwind CSS styling
- React Router for navigation
- React Markdown for rendering
- Syntax highlighting for code blocks
- Port: 3000 (default)

**Backend:**
- Node.js with Express
- SQLite using better-sqlite3
- Claude API integration
- Server-Sent Events for streaming

## Core Features

**Chat Interface:**
- Streaming responses with typing indicators
- Markdown rendering with proper formatting
- Code blocks with syntax highlighting and copy buttons
- LaTeX/math equation rendering
- Image upload and display
- Multi-turn conversations
- Message editing and regeneration
- Character count and token estimation

**Artifacts System:**
- Artifact detection and rendering in side panel
- Code viewer with syntax highlighting
- HTML/SVG live preview
- React component preview
- Mermaid diagram support
- Full-screen viewing and download options
- Versioning and history tracking

**Conversation Management:**
- Create, rename, and delete conversations
- Search by title/content
- Pin and archive features
- Folder-based organization
- Export options (JSON, Markdown, PDF)
- Timestamps and unread indicators

**Model Selection:**
Available models:
- Claude Sonnet 4.5 (default)
- Claude Haiku 4.5
- Claude Opus 4.1

Includes capabilities display, context window info, and pricing details.

**Advanced Settings:**
- Temperature control slider
- Max tokens adjustment
- Top-p (nucleus sampling) control
- System prompt override
- Thinking/reasoning mode toggle
- Multi-modal input support

**Projects:**
- Group related conversations
- Project knowledge base (upload documents)
- Project-specific custom instructions
- Team sharing (mock feature)
- Templates and analytics

**Additional Features:**
- Theme selection (Light, Dark, Auto)
- Custom instructions (global/project/conversation)
- Usage tracking and token counting
- Onboarding flow with tips
- Full keyboard navigation and accessibility
- Mobile-responsive design
- PWA support

## Database Schema

Primary tables include:
- users, projects, conversations, messages
- artifacts, shared_conversations
- prompt_library, conversation_folders
- usage_tracking, api_keys

## Key UI Components

- Three-column layout (sidebar, chat, artifacts panel)
- Collapsible sidebar with conversation groups
- Message bubbles with markdown support
- Input area with formatting toolbar
- Settings modal with tabs
- Command palette support

## Design System

- Primary color: Orange/amber (#CC785C)
- Sans-serif typography (Inter, SF Pro, Roboto)
- Smooth 150-300ms transitions
- Rounded borders with focus ring for inputs
- Dark mode fully supported

## Success Criteria

Functionality, UX, technical quality, and design polish must all meet professional standards matching claude.ai's appearance and performance.
