AI editors like Cursor have changed how developers write code. But have you ever wondered what's actually happening behind the scenes? In this tutorial, we're building Polaris. A complete AI-powered IDE from scratch. Ghost text suggestions.
An AI agent that can create and modify your files. Live preview running entirely in the browser. And full GitHub integration. This is how modern AI coding tools actually work. Let's start with project creation.
Open the new project dialog. Describe what you want to build in plain English. And watch the AI generate your entire project structure in real-time. Files, folders, components. All stored in the Convex database and available instantly thanks to Convex's Sync Engine.
No refresh, no polling. True real-time reactivity. And here's the magic. Your app is already running. No local setup.
No terminal commands. Web containers give us a full Node.js environment right in the browser. You can see install logs, developer server output, and your live app all in one place. The editor is built on CodeMirror 6 with full syntax highlighting, code folding and a minimap. But here's where it gets interesting.
As you type, AI suggestions appear as ghost text. Just hit Tab to accept. It's context-aware, analyzing the code around your cursor to give you relevant completions. Now watch this. Select any code, open Quick Edit and paste a URL.
Firecrawl scrapes that page and feeds it directly to the AI. Documentation for a library that launched last week, a GitHub readme, API references, anything on the web instantly becomes context. The AI isn't limited to what it was trained on anymore. That's the power of FIACROW. For bigger changes, open the chat sidebar, ask it to add a feature, and watch it work.
You'll see the thinking indicator. Then the AI starts calling tools, creating files, modifying code, building out your request step by step. Ingest handles the background processing, managing the AI agent execution, retries if something fails, and keeps everything reliable. GitHub integration is built-in. You can import any repository.
We use Qlerq's OAuth to securely access your GitHub token. And when you're ready to ship, You can export directly to a new repository. Ingest runs these as background jobs, so large repositories import smoothly without blocking your UI. For authentication and payments, Qlerk handles it all. Sign-up flows, OAuth providers, and now billing.
Free tier, pro plans, all managed in one place. In production, you need visibility. Sentry gives us error tracking and session replace to catch and debug issues. They also have a new AI monitoring feature. Every LLM call is logged with model, token counts, and cost per request.
Useful for keeping an eye on your AI spend. Throughout this tutorial, we're using CodeRabbit for AI-powered pull request reviews. Each chapter of our tutorial is a branch, and each feature is a pull request. You'll learn the complete Git workflow alongside building this product. Let's go over the full tech stack.
Next.js and TypeScript for the foundation. Convex for our database and real-time sync. Clerc for authentication and billing. Ingest powering our AI agent and background jobs, CodeMirror 6 for the editor, WebContainers for in-browser code execution, Firecrawl for URL scraping, Sentry for error tracking and AI monitoring, and CodeRabbit for our GitHub pull request review workflow. This isn't just a coding tutorial, this is a complete playbook for building AI-powered developer tools.
And now, without further ado, let's get started. Before we dive in, using the link on the screen you can get three months of Sentry Team completely for free. We'll be using their AI monitoring to track all our LLM calls throughout this build. If that sounds useful for your project, feel free to grab the deal. And now, let's build!