A fully functional, feature-complete local clone of Claude.ai that runs entirely on your machine.
- ✅ Real-time streaming responses with Server-Sent Events (SSE)
- ✅ All Claude 4 models (Sonnet 4.5, Opus 4.1, Opus 4, Sonnet 4) + Claude 3.5 & 3
- ✅ Prompt caching for 90% cost reduction on repeated context
- ✅ Markdown rendering with GitHub Flavored Markdown support
- ✅ Syntax highlighting for 15+ programming languages
- ✅ Code copy buttons with one-click copying
- ✅ Auto-scrolling message list
- ✅ Projects with custom instructions and knowledge base
- ✅ Conversation management (create, rename, archive, delete)
- ✅ Search & filter conversations
- ✅ Date grouping (Today, Yesterday, Last 7 days, Older)
- ✅ Project filtering to organize chats
- ✅ PDF viewer with zoom and page navigation
- ✅ Image preview with zoom and lightbox mode
- ✅ Markdown preview with live rendering
- ✅ Code file syntax highlighting
- ✅ File attachments (coming soon)
- ✅ Dark/light theme toggle
- ✅ Responsive design (desktop and mobile)
- ✅ Collapsible sidebar with persistent state
- ✅ Toast notifications for user feedback
- ✅ Loading states and error handling
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript 5.7 |
| Styling | Tailwind CSS 3.4 |
| Database | SQLite with Prisma ORM |
| AI | Anthropic SDK + Claude API |
| UI Components | Shadcn UI (Radix UI primitives) |
| State Management | React Hooks |
| Markdown | react-markdown + remark-gfm |
| Code Highlighting | Prism.js |
| PDF Rendering | pdfjs-dist |
- Node.js 18.0 or higher
- npm (comes with Node.js)
- Anthropic API Key (Get one here)
# 1. Navigate to the project
cd /Users/mini/Documents/projects/ClaudeLocal
# 2. Install dependencies (already done if coming from setup)
npm install
# 3. Create your secrets file
cp secrets_template.json secrets.json
# 4. Edit secrets.json and add your API key
# {
# "anthropic_api_key": "sk-ant-api03-YOUR-KEY-HERE"
# }
# 5. Initialize database (already done if coming from setup)
npx prisma db push
# 6. Start the development server
npm run dev
# 7. Open http://localhost:3000📖 For detailed setup instructions, see SETUP.md
ClaudeLocal automatically implements Anthropic's Prompt Caching to save you up to 90% on API costs:
- 🚀 Conversation history cached automatically
- 📝 Project instructions cached across all project conversations
- ⏱️ 5-minute cache TTL - perfect for active conversations
- 💵 Huge savings - 20-message conversation costs ~80% less
- 🔧 Zero configuration - works automatically out of the box
Example: A 10-message conversation that would normally cost $0.15 now costs ~$0.03!
See PROMPT_CACHING.md for technical details.
ClaudeLocal/
├── app/ # Next.js App Router
│ ├── api/ # API Routes
│ │ ├── chat/ # Streaming chat endpoint
│ │ ├── conversations/ # Conversation CRUD
│ │ ├── models/ # Model listing
│ │ └── projects/ # Project management
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React Components
│ ├── chat/ # Chat UI (MessageList, MessageInput, MessageBubble)
│ ├── sidebar/ # Sidebar (ConversationList, ProjectSelector)
│ ├── preview/ # File previews (PDF, Image, Markdown, Code)
│ ├── model/ # Model picker
│ └── ui/ # Shadcn UI base components
├── lib/ # Utilities
│ ├── db.ts # Prisma client singleton
│ ├── secrets.ts # API key management
│ └── utils.ts # Helper functions (cn, etc.)
├── prisma/ # Database
│ ├── schema.prisma # Database schema
│ └── dev.db # SQLite database file
├── types/ # TypeScript Types
│ └── index.ts # Shared type definitions
├── public/uploads/ # File uploads storage
├── secrets.json # API keys (create from template)
└── secrets_template.json # Template for secrets
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run db:push # Sync database with schema
npm run db:studio # Open Prisma Studio (database GUI)
npm run db:migrate # Create database migration
npm run db:generate # Generate Prisma Client- Open http://localhost:3000
- Click "New Chat" button in the sidebar
- Select a Claude model from the dropdown
- Type your message and press Enter to send
- Rename: Hover over a conversation → Click ⋯ → Rename
- Archive: Hover over a conversation → Click ⋯ → Archive
- Delete: Hover over a conversation → Click ⋯ → Delete
- Search: Use the search box in the sidebar to filter conversations
- Create a new project (Projects feature in sidebar)
- Add custom instructions for the project
- Upload knowledge base files (PDF, markdown, code)
- Start conversations within the project context
- Enter - Send message
- Shift+Enter - New line in message
- Ctrl/Cmd+K - Focus search (coming soon)
- Ctrl/Cmd+N - New chat (coming soon)
Edit the CLAUDE_MODELS array in types/index.ts to add/remove models.
- Edit
prisma/schema.prisma - Run
npx prisma db pushto apply changes - Run
npx prisma generateto update the client
Edit the CSS variables in app/globals.css under :root and .dark selectors.
See SETUP.md for common issues and solutions.
- ✅ API keys stored in
secrets.json(gitignored) - ✅ All sensitive operations server-side only
- ✅ SQLite database local to your machine
- ✅ No data leaves your system except API calls to Anthropic
- ✅ File uploads stored locally in
public/uploads/
This is a personal project template. Feel free to fork and customize for your own use!
MIT
Built with Claude Code by Anthropic 🤖