# How to Vibecode Claude — Can You Do It Yourself?

> Talk with Claude, your AI assistant.

- Site: https://claude.ai
- Category: AI Assistant & Platform
- Verdict: **Solid side project** (72/100 vibecodeable)
- Estimated effort: 2-3 weekends of development and debugging

## Verdict

Build a functional personal chat and project UI wrapper over the Anthropic API, but do not expect to replicate the underlying foundation models or enterprise infrastructure.

Replicating claude.ai for personal use as a feature-rich client interface is entirely feasible, but you are renting the actual intelligence via API keys. The hardest parts involve building a smooth streaming chat interface, handling file parsing cleanly without crashing browser memory, and managing artifact preview panels. AI coding agents will handle standard CRUD and UI components quickly, but expect friction when wiring up robust streaming error recovery and edge cases in markdown artifact rendering.

### What you can't replicate

- Proprietary multi-billion parameter frontier foundation models and custom training clusters
- Anthropic's proprietary Constitutional AI alignment framework
- Enterprise compliance guarantees and multi-billion-dollar infrastructure

## What it does

Claude is an advanced AI assistant and platform built by Anthropic, providing conversational interfaces, developer APIs, and specialized agentic coding tools.

### Core features

- Conversational chat interface with markdown rendering and code syntax highlighting
- Multi-turn dialogue with streaming responses via Server-Sent Events
- Document upload and parsing (PDF, text, code files)
- Project workspaces with custom instructions and file context
- API key management and developer console playground
- Token usage tracking and cost computation per request
- Markdown artifact generation with live side-by-side preview panels
- System prompt configuration and model selection (Haiku, Sonnet, Opus)

## The business

### Pricing

- Free Plan: $0/mo
- Pro Plan: $20/mo
- Max Plans: $100/mo to $200/mo

### Funding

$132B raised.
- Series A through E (2021-2025)
- Series F ($13B, Sep 2025)
- Series G ($30B, Feb 2026)
- Series H ($65B, May 2026)
Investors: Amazon, Google, Altimeter Capital, Dragoneer, Greenoaks, Sequoia Capital, ICONIQ, Lightspeed Venture Partners, GIC, Coatue, Fidelity, Microsoft, NVIDIA

Founded 2021.
Team size: 2,300 - 5,000.

## The hard parts

- Reliable low-latency token streaming across large context windows with prompt caching mechanics
- Robust document text extraction and chunking pipelines for diverse file formats
- Secure sandboxed code execution environments for artifacts and tool use
- Complex state synchronization between streaming LLM output chunks and frontend UI state

## How to vibecode Claude

### Prerequisites

- Node.js (free): Runtime environment for Next.js full-stack framework
- GitHub (free): Source control and deployment pipeline
- Anthropic API Key (pay-as-you-go): Required to power model responses in your personal client

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding and executing multi-file full-stack builds
- Cursor: Ideal for fine-tuning React components and fixing UI layout bugs

### Stack

- Frontend: Next.js (App Router) with Tailwind CSS and Shadcn UI
- Backend: Next.js Server Actions and Route Handlers with AI SDK streaming
- Database: Supabase (PostgreSQL for chats, messages, and projects)
- Auth: Supabase Auth (Email / Password)
- Payments: None (Personal use clone)
- Other: Vercel AI SDK, Lucide React for icons, Markdown-it and syntax highlighters for chat bubbles

### Hosting

- Vercel (Hosting Next.js frontend and serverless API routes): $0/mo (Hobby Tier)
- Supabase (PostgreSQL database and user authentication): $0/mo (Free Tier)

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Supabase client connections, and establish database schemas for users, chats, messages, and projects.

```
Scaffold a new Next.js project using the App Router, TypeScript, and Tailwind CSS. Install Supabase client libraries and Shadcn UI primitives. Create a complete database schema in Supabase SQL with tables for 'users', 'projects', 'chats', and 'messages'. The 'chats' table should reference 'users' and 'projects' with foreign keys, storing title, model selection, and timestamps. The 'messages' table should store role (user, assistant), content, token counts, and chat_id with proper indexing. Implement Supabase Auth middleware to protect chat routes and handle user sessions securely. Verify database connectivity and type safety across all models before proceeding.
```

2. **Chat UI Shell and Layout** — Build the main application shell featuring a collapsible sidebar for chat history, project views, settings modals, and a responsive main chat container.

```
Build a responsive chat layout mirroring claude.ai. Create a collapsible left sidebar displaying grouped chat history (Today, Previous 7 Days, Older), a new chat button, and a link to Projects and Settings. Construct the main chat view with a dynamic header showing model selection dropdown (Haiku, Sonnet, Opus), a scrollable message history container, and a fixed bottom input area featuring an auto-resizing textarea, file attachment button, and submit control. Ensure smooth CSS transitions for sidebar toggling and mobile responsiveness using Tailwind CSS.
```

3. **API Integration and Streaming Chat Backend** — Implement the server-side API route utilizing the Vercel AI SDK to stream responses from the Anthropic API with system prompts and chat history context.

```
Implement a Next.js API route using the Vercel AI SDK and Anthropic provider adapter to handle chat completions. The endpoint must accept chat history, selected model, and optional project instructions, constructing the proper payload for the Anthropic Messages API. Enable real-time streaming responses via Server-Sent Events (SSE). Handle rate limits, network timeouts, and API key validation errors gracefully with structured JSON error responses. Save incoming user messages and streamed assistant responses to the Supabase database asynchronously upon completion.
```

4. **Frontend Streaming State and Markdown Rendering** — Connect the frontend chat interface to the streaming backend endpoint, rendering incoming markdown text chunks, code blocks, and syntax highlighting dynamically.

```
Connect the chat input form to the streaming backend endpoint using the Vercel AI SDK React hooks. Update the message list UI to render incoming text chunks in real time with auto-scrolling behavior. Integrate a markdown parser (such as react-markdown or remark/rehype) supporting code block syntax highlighting, copy-to-clipboard buttons for code snippets, and clean formatting for lists and tables. Ensure smooth rendering performance during high-speed token generation streams.
```

5. **Document Upload and Context Handling** — Add file upload capabilities supporting PDFs and text documents, extracting text content to inject into the message context payload.

```
Build a file attachment component supporting PDF, TXT, and code file uploads. Store uploaded files temporarily in Supabase Storage or process them directly in memory via server actions to extract plain text content. Append extracted document text and metadata into the active prompt context or message payload sent to the Anthropic API. Display attached file chips in the chat input area with clear buttons to remove attachments before submission.
```

6. **Projects Management and Artifacts Preview** — Implement project workspaces with custom prompt instructions and a split-screen artifact preview panel for rendered HTML, SVG, or code outputs.

```
Implement a Projects management view where users can create custom projects with custom instructions and reference files. Update the chat prompt construction to prepend project instructions to system prompts when a chat is linked to a project. Build a split-screen artifact viewer panel that detects markdown code blocks marked as HTML, SVG, or React components and renders them in an interactive iframe or sandbox preview pane alongside the chat stream.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom Domain (optional): $12/yr
- AI Coding Assistant Subscription: $20
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Anthropic API Token Usage: Variable ($5-20/mo depending on usage)
- Vercel & Supabase Hosting: $0/mo (Free tiers)
- Total: ~$5-20/mo (usage-dependent)

- Paying for the SaaS instead: $20/mo (Pro) or API pay-as-you-go
- Build time: 16-24 hours
- AI tool credits: $20 (Claude Code / Cursor Pro)
- Break-even: Build for learning and customization; API pay-as-you-go means variable costs.

## Sources

- [Anthropic Platform Pricing Docs](https://docs.anthropic.com/en/docs/about-claude/pricing)
- [Claude.ai Official Site](https://claude.ai)