✨ Cursor Clone - AI-Powered Code Editor

A production-ready AI-powered code editor and IDE with an intelligent coding agent, in-browser code execution, GitHub integration, and complete subscription management. Built with Next.js 16, CodeMirror 6, WebContainers, multiple AI providers (Claude, Gemini), and Clerk authentication.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

✏️ CodeMirror 6 Editor

• 🎨 Syntax Highlighting - Support for JavaScript, TypeScript, HTML, CSS, JSON, Python, Markdown
• 🗺️ Minimap - Replit-powered code minimap for navigation
• 🌙 One Dark Theme - Beautiful dark theme out of the box
• 📏 Indentation Markers - Visual indentation guides
• 📂 File Explorer - Full project file tree with create, rename, delete operations

🤖 AI-Powered Features

• 🧠 AI Coding Agent - Claude-powered agent with file manipulation tools (read, write, create, delete, rename)
• ⚡ Quick Edit (Cmd+K) - Edit selected code with AI instructions inline
• 💡 Code Suggestions - Real-time AI-powered code suggestions as you type
• 📝 Auto Title Generation - AI-generated conversation titles
• 📚 URL Scraping - Fetch and include web documentation in AI context via Firecrawl
• 🔧 Multi-Tool Agent - AI agent with 7+ tools for file system operations

💬 Conversation System

• 🗨️ Chat Interface - Full conversation UI with streaming AI responses
• 📎 File Attachments - Attach project files to conversations
• 🔄 Message Streaming - Real-time streaming responses with status tracking
• 🧩 Rich AI Elements - 50+ specialized components for displaying AI responses (code blocks, reasoning, plans, artifacts)
• ❌ Cancellable - Cancel in-progress AI responses

▶️ In-Browser Code Execution

• 🌐 WebContainer Runtime - Run Node.js projects directly in the browser
• 🖥️ Integrated Terminal - xterm.js terminal with full output streaming
• 👁️ Live Preview - Real-time preview of running applications
• 🔥 Hot Reload - Automatic reload on file changes
• ⚙️ Custom Commands - Configurable install and dev commands per project

🐙 GitHub Integration

• 📥 Import Repositories - Import GitHub repos into the editor (Pro)
• 📤 Export to GitHub - Push projects to new GitHub repositories (Pro)
• 🔐 GitHub OAuth - Secure token-based access via Clerk
• 📊 Status Tracking - Real-time import/export progress

🚀 Core Platform Features

• 🔐 Clerk Authentication - Google, GitHub, and Email/Password sign-in
• 💳 Subscription Billing - Pro plan with Clerk organizations
• ⚡ Background Jobs - Inngest-powered reliable AI agent execution
• 🗄️ Real-time Database - Convex for live data sync
• 🐛 Error Tracking - Sentry integration with LLM monitoring
• 🌓 Dark/Light Mode - Theme switching with next-themes
• 📐 Resizable Panels - Allotment-powered split pane layout

💎 Pro Subscription Benefits

• 🐙 GitHub repository import
• 📤 GitHub repository export
• ✨ Full AI agent capabilities
• 📊 Priority support

🛠️ Tech Stack

Frontend

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• TailwindCSS 4 - Utility-first styling
• Shadcn UI - Beautiful component library
• CodeMirror 6 - Advanced code editor
• Allotment - Resizable split panels
• Zustand - Lightweight state management
• React Hook Form - Form handling
• Motion - Animations
• Lucide React & React Icons - Icon systems
• Next Themes - Dark mode support

Backend & Database

• Convex - Real-time serverless database & backend
• Inngest - Background job execution & orchestration
• Inngest Agent Kit - AI agent framework

AI & Integrations

• Vercel AI SDK - Unified AI provider interface
• Anthropic Claude - Claude 3.5 Haiku, Claude 4.5 Haiku, Claude 3.7 Sonnet
• Google Gemini - Gemini AI integration
• Firecrawl - Web scraping for documentation
• Shiki - Syntax highlighting for AI responses

Code Execution & GitHub

• WebContainers - In-browser Node.js runtime
• xterm.js - Terminal emulator
• Octokit - GitHub API client

Authentication & Payments

• Clerk - Authentication & user management
• Clerk Organizations - Plan-based billing

Development & Monitoring

• Sentry - Error tracking with LLM monitoring
• Zod - Schema validation
• Sonner - Toast notifications

📋 Prerequisites

Before you begin, ensure you have:

• Node.js (v18 or higher)
• npm, yarn, pnpm, or bun
• Git
• Accounts for:
  • Clerk (Authentication with Google & GitHub OAuth)
  • Convex (Real-time Database)
  • Inngest (Background Jobs)
  • Sentry (Error Tracking)
  • Firecrawl (Web Scraping)
  • AI Providers:
    • Anthropic (Claude)
    • Google AI (Gemini, optional)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/polaris-clone.git
cd polaris-clone

2. Install dependencies

npm install
# or
bun install

3. Setup Environment Variables

Create a .env.local file in the root directory:

# Clerk (Authentication)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_JWT_ISSUER_DOMAIN=your_clerk_jwt_issuer_domain

# Convex (Database)
CONVEX_DEPLOYMENT=your_convex_deployment
NEXT_PUBLIC_CONVEX_URL=your_convex_url
NEXT_PUBLIC_CONVEX_SITE_URL=your_convex_site_url
POLARIS_CONVEX_INTERNAL_KEY=your_convex_internal_key

# AI Providers
ANTHROPIC_API_KEY=your_anthropic_api_key
GOOGLE_GENERATIVE_AI_API_KEY=your_google_ai_api_key

# Model Selection (optional)
TITLE_GENERATOR_MODEL=claude-3-5-haiku-20241022
CODING_AGENT_MODEL=claude-haiku-4-5-20251001

# Firecrawl (Web Scraping)
FIRECRAWL_API_KEY=your_firecrawl_api_key

# Sentry (Error Tracking)
SENTRY_AUTH_TOKEN=your_sentry_auth_token

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Setup Convex Database

# Start the Convex dev server
npx convex dev

5. Setup Inngest (for local development)

# Run Inngest dev server in a separate terminal
npx --ignore-scripts=false inngest-cli@latest dev

6. Start the development server

npm run dev
# or
bun run dev

Open http://localhost:3000 in your browser.

📦 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint

🔧 Troubleshooting

Database Issues

• Ensure Convex dev server is running (npx convex dev)
• Check Convex dashboard for deployment status
• Verify NEXT_PUBLIC_CONVEX_URL is set correctly

Inngest Issues

• Make sure Inngest dev server is running
• Check Inngest dashboard for function logs
• Verify NEXT_PUBLIC_APP_URL is set correctly

Authentication Issues

• Verify Clerk API keys are correct
• Check OAuth callback URLs in Clerk dashboard
• Ensure CLERK_JWT_ISSUER_DOMAIN matches your Clerk instance

WebContainer Issues

• WebContainers require specific browser headers (COOP/COEP)
• Ensure you're using a Chromium-based browser for best compatibility
• Check browser console for WebContainer boot errors

GitHub Integration Issues

• Ensure GitHub OAuth is configured in Clerk
• Pro plan is required for import/export features
• Check GitHub token permissions

📚 Resources

• Next.js Documentation
• Convex Documentation
• Clerk Documentation
• Inngest Documentation
• CodeMirror Documentation
• WebContainers Documentation
• Vercel AI SDK Documentation
• Firecrawl Documentation
• Sentry Documentation

🙏 Acknowledgments

• YouTube Tutorial Part 1 - Build the AI-powered code editor
• Code With Antonio - Course creator
• Vercel - Deployment platform
• Shadcn - UI components

---

⭐ If you found this project helpful, please give it a star!

📚 Resources:

• Try Clerk - Authentication & user management
• Try Firecrawl - Web scraping
• Try Convex - Real-time database
• Try Inngest - Background job execution
• Try Sentry - Error tracking
• Try CodeRabbit - AI code reviews