Build and Deploy an AI Coding Agent | Cursor Clone with Next.js 16 | Full Course 2026
By Code With Antonio
Key Concepts
- AI-Powered IDE (Polaris): Building a fully functional IDE with AI capabilities for code generation, project creation, and file management.
- Tool-Based Agent Architecture: Utilizing an AI agent framework (Ingest Agent Kit) with a modular system of tools for interacting with the environment.
- Serverless Backend: Leveraging Convex for database, functions, and storage, providing scalability and ease of development.
- GitHub Integration: Enabling import and export of projects to and from GitHub, expanding the IDE’s functionality.
- Billing Integration: Implementing a subscription model with Clerk to monetize the application and control access to features.
- Deployment & Integration: Successfully deploying the application to Vercel and integrating with Inest for observability and debugging.
Building Polaris: An AI-Powered IDE
This project details the development of Polaris, an AI-powered IDE built from scratch, focusing on integrating AI capabilities for code generation, project management, and file system interaction. The development process emphasizes a modular architecture, robust error handling, and a user-centric approach.
Part 1: Conversation System & Tool Execution
The initial phase focused on enhancing the AI conversation system by integrating an AI agent and tool execution capabilities. This involved utilizing Inest Agent Kit to build a tool loop, enabling the AI to autonomously create, update, and delete files. Key infrastructure components include Convex for the database, Inest for background job management (with web containers for live previews), Clerk for billing, and GitHub integration for version control. A cancellation feature was implemented to prevent runaway token consumption, and conversation history was added for context. A promotional offer of 1,000 Fiocrol credits (using coupon code "Antonio") was made available for documentation scraping.
Part 2: Tool Integration & Prompt Engineering
Development continued with adding tools to the agent, including read files, list files, update file, create files, create folder, rename file, and delete files. These tools are implemented as Convex functions with Zod schema validation. Prompt engineering was refined by dynamically constructing system prompts with recent conversation history (limited to 10 messages for optimal performance and cost). Robust error handling was prioritized, including validation of file existence and type. The concept of an "agent network" was introduced for iterative task completion, with a maximum iteration limit of 20 to control costs. Anthropic models (Claude Opus and Haiku) were preferred for tool execution, with Gemini considered as an alternative.
Part 3: File Management & URL Scraping
The focus shifted to expanding the agent’s capabilities with new tools: rename file, delete files, and scrape URLs. The delete files tool supports recursive folder deletion. The scrape URLs tool utilizes the filecrawl library to extract content from URLs and return it as markdown. Tools are integrated into the agent’s processing pipeline, and error handling is emphasized, providing informative messages to the agent. The project is framed as a simplified clone of Cursor, and the agent demonstrates the ability to create a React + Vite app with a to-do list.
Part 4: Preview Feature & UI Development
A preview feature was implemented, integrating a terminal emulator (XtermJS) and a settings panel for configuring the preview environment. UI components PreviewTerminal and PreviewSettingsPopover were created using React and TanStack Form. Convex mutations were prepared for import/export operations. Web containers are used for live development server previews, offering superior hot reload capabilities compared to sandboxes. The developer expressed a preference for TanStack Form over React Hook Form.
Part 5: GitHub Import/Export & Backend Implementation
The backend was developed for importing and exporting GitHub projects. API routes were created for these operations, utilizing Clerk for authentication and Convex and Ingest for background job management. Convex mutations were implemented for cleanup, file creation, and status updates. Ingest functions leverage Octokit to interact with the GitHub API. Binary files are handled by uploading them to Convex storage via signed URLs. Initial UI development for the import functionality was also completed.
Part 6: Prompt-Based Project Creation & Billing Integration
A "Create Project with Prompt" feature was added, allowing users to generate new projects using natural language input. The export functionality was refined, and optimistic updates were implemented to improve user experience. Billing integration with Clerk was completed, creating a "Pro" plan for $29.99/month and gating import/export features behind the subscription.
Part 7: Deployment to Vercel & Inest Integration
The application was deployed to Vercel, with environment variables configured and the build command overridden to ensure Convex functions are deployed correctly. Inest was integrated with Vercel for image processing, requiring a “protection bypass for automation” configuration to resolve deployment protection issues.
Part 8: Troubleshooting & Final Integration
Initial deployment issues stemming from Vercel’s deployment protection blocking Inest were resolved by enabling the “protection bypass for automation” feature and redeploying the application. The “API Ingest” check was used to verify connectivity. A React + Vite to-do app was created to test the full integration.
Conclusion:
The development of Polaris demonstrates a practical approach to building an AI-powered IDE, leveraging modern technologies like Convex, Inest, Clerk, and Vercel. The project highlights the importance of modular design, robust error handling, and a user-centric approach. The successful integration of AI capabilities, GitHub integration, and billing functionality positions Polaris as a promising tool for developers.
Chat with this Video
AI-PoweredHi! I can answer questions about this video "Build and Deploy an AI Coding Agent | Cursor Clone with Next.js 16 | Full Course 2026". What would you like to know?