Think Cursor meets Replit – a fully browser-based IDE with Claude as your pair programmer
Axiom reimagines how developers write code. It's a web-based IDE that doesn't just help you code – it codes with you.
No terminal. No local setup. Just open your browser and build.
┌─────────────────────────────────────────────────────────────┐
│ AI Chat │ Files │ Code Editor │
│ │ │ │
│ "Add a REST API │ ├ src/ │ export async function │
│ for user auth" │ │ └ app/ │ getUsers() { │
│ │ └ lib/ │ // AI writes this │
│ On it! I'll... │ │ } │
│ ├────────────┤ │
│ │ Preview │ │
│ │ localhost │ │
└─────────────────────────────────────────────────────────────┘
- Conversational Coding – Chat with Claude about your project. It reads your files, understands context, and writes code for you.
- Inline Suggestions – Get real-time AI completions as you type, powered by Claude 3.5 Haiku.
- Quick Edits – Select code, describe what you want, and watch it transform. Include URLs and the AI will scrape documentation for context.
- Smart File Operations – The AI creates, edits, renames, and deletes files. No copy-paste needed.
- CodeMirror 6 – Industry-grade editing with syntax highlighting for JS/TS, Python, Go, HTML, CSS, JSON, and Markdown.
- Minimap Navigation – See your entire file at a glance.
- Multi-Tab Editing – Work on multiple files simultaneously.
- One Dark Theme – Beautiful dark mode by default.
- WebContainers – Run Node.js projects directly in your browser. No backend server needed.
- Integrated Terminal – Full terminal access with streaming output.
- Live Preview – See changes instantly as you code.
- Device Switcher – Test responsive designs across desktop, tablet, and mobile viewports.
- Import Repositories – Clone any GitHub repo into Axiom with one click.
- Export Projects – Push your work to GitHub when you're ready.
- Background Processing – Large repos import/export in the background while you work.
- Create from Prompt – Describe what you want, and AI generates the starter code.
- Real-Time Sync – All changes sync instantly via Convex.
- File Explorer – Navigate your project with a familiar tree view.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 (strict mode) |
| Database | Convex (real-time serverless) |
| Authentication | Clerk |
| AI | Claude Sonnet 4.5 + Haiku 3.5 |
| Code Editor | CodeMirror 6 |
| Runtime | WebContainer API |
| Background Jobs | Inngest |
| UI Components | Radix UI + Tailwind CSS 4 |
| Animations | Framer Motion 12 |
| Syntax Highlighting | Shiki |
| GitHub | Octokit |
- Node.js 20+ (recommend v22)
- Bun 1.3+ (or npm/pnpm)
- mprocs (optional, for multi-process running)
git clone https://github.com/your-username/axiom.git
cd axiom
bun installCreate a .env.local file:
# Clerk Authentication
# Get these from https://dashboard.clerk.com
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_JWT_ISSUER_DOMAIN=https://your-app.clerk.accounts.dev
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
# ️ Convex Database
# Get these from https://dashboard.convex.dev
CONVEX_DEPLOYMENT=dev:your-deployment
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
CONVEX_INTERNAL_KEY=your-internal-key
# Anthropic AI
# Get this from https://console.anthropic.com
ANTHROPIC_API_KEY=sk-ant-api03-...
# Firecrawl (for URL scraping in prompts)
# Get this from https://firecrawl.dev
FIRECRAWL_API_KEY=fc-...bunx convex devThis pushes the database schema and starts the Convex sync.
Option A: All services at once (recommended)
bun run mprocsOption B: Separate terminals
# Terminal 1 - Database
bunx convex dev
# Terminal 2 - Next.js
bun dev
# Terminal 3 - Background Jobs
bun run inngest:devNavigate to http://localhost:3000 and start building!
axiom/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ │ ├── github/ # Import/export endpoints
│ │ │ ├── messages/ # AI chat endpoint
│ │ │ ├── quick-edit/ # Inline AI editing
│ │ │ └── suggestion/ # Code completions
│ │ ├── projects/[id]/ # Project workspace
│ │ └── sign-in/, sign-up/ # Auth pages
│ │
│ ├── components/
│ │ ├── ai-elements/ # Chat UI components
│ │ ├── conversation-panel/ # AI sidebar
│ │ ├── editor/ # CodeMirror setup
│ │ │ └── extensions/ # Editor plugins
│ │ ├── explorer/ # File tree
│ │ ├── preview/ # WebContainer preview
│ │ ├── projects/ # Project management
│ │ └── ui/ # Shadcn components
│ │
│ ├── inngest/ # Background jobs
│ │ ├── tools/ # AI agent tools
│ │ ├── process-messages.ts # Chat processing
│ │ ├── import-github.ts # Repo import
│ │ └── export-github.ts # Repo export
│ │
│ ├── hooks/ # React hooks
│ ├── lib/ # Utilities
│ └── store/ # Zustand state
│
├── convex/ # Convex backend
│ ├── schema.ts # Database schema
│ ├── projects.ts # Project operations
│ ├── files.ts # File operations
│ ├── conversations.ts # Chat operations
│ └── messages.ts # Message operations
│
└── public/ # Static assets
User sends message
↓
┌───────────────────────────────────┐
│ Inngest Event: message/sent │
└───────────────────────────────────┘
↓
┌───────────────────────────────────┐
│ Claude Agent with Tools │
│ │
│ read-files │
│ ️ update-file │
│ create-files │
│ ️ delete-file │
│ create-folder │
│ scrape-url │
└───────────────────────────────────┘
↓
Response streams back to UI
The AI has full access to your project. When you ask it to "add user authentication," it:
- Reads your existing code structure
- Creates necessary files
- Updates imports and configurations
- Explains what it did
| Shortcut | Action |
|---|---|
⌘/Ctrl + J |
Create new project |
⌘/Ctrl + I |
Import from GitHub |
⌘/Ctrl + Y |
Create from prompt |
⌘/Ctrl + K |
View all projects |
// Projects contain files and conversations
projects: {
name: string
ownerId: string // Clerk user ID
importStatus?: "pending" | "completed" | "failed"
exportStatus?: "pending" | "completed" | "failed"
settings?: { installCommand, devCommand }
}
// Hierarchical file system
files: {
projectId: Id<"projects">
parentId?: Id<"files"> // For nested folders
name: string
type: "file" | "folder"
content?: string // Text content
storageId?: Id<"_storage"> // Binary files
}
// Chat history
conversations: { projectId, title, updatedAt }
messages: { conversationId, role, content, status }Contributions are welcome! Whether it's:
- Bug fixes
- New features
- Documentation improvements
- Ideas and suggestions
Please open an issue first to discuss what you'd like to change.
Built with love and AI
Stop fighting your tools. Start building with them.