Build Your Own Claude Code | Full AI Coding Agent Tutorial

Key Concepts

• Terminal Coding Agents: CLI-based AI tools that interact with the file system to read, write, edit, and execute code.
• Monorepo Architecture: A project structure using bun workspaces to manage multiple packages (CLI, Server, Shared, Database).
• TUI (Terminal User Interface): Building interactive terminal interfaces using Open TUI with React bindings.
• Agentic Loops: The process where an LLM uses tools (Bash, File I/O, Grep) to perform tasks autonomously.
• Authentication & Billing: Implementing OAuth via Clerk and credit-based metering via Polar.
• Streaming & Tool Calling: Using Versel AI SDK to stream responses and execute local tools on the client side.

---

1. Project Architecture & Scaffolding

The project is structured as a monorepo using bun workspaces, consisting of four main packages:

• CLI: The terminal interface built with Open TUI (React-based).
• Server: A Hono server handling API requests and AI orchestration.
• Shared: Contains Zod schemas, model definitions, and shared types.
• Database: Uses Prisma ORM with Neon (PostgreSQL) for persistent storage.

Methodology: The project uses a "Plan" vs. "Build" mode framework. In Plan mode, the agent is restricted to read-only tools (list, read, glob, grep). In Build mode, it gains write access (edit, bash, write file).

2. UI Infrastructure

• Component Architecture: The CLI uses a component-based model (Header, Input Bar, Status Bar, Command Menu).
• Keyboard Layers: A custom "responder chain" manages keyboard focus. This ensures that if a dialog or command menu is open, the Ctrl+C shortcut triggers the appropriate action (e.g., closing the menu) rather than exiting the app.
• Theming: A theme provider saves user preferences to ~/.nightcode/preferences.json, allowing for dynamic color switching across the UI.

3. Routing & Navigation

• React Router: Implemented using createMemoryRouter to manage navigation between the Home, New Session, and Session ID screens.
• Optimistic UI: When a user submits a prompt, the app redirects to a "New Session" screen immediately, providing a seamless experience while the server initializes the database record.

4. AI Chat & Tool Calling

• Versel AI SDK: The project transitioned from custom streaming logic to the AI SDK for robust streaming and tool calling.
• Client-Side Execution: A critical architectural fix moved tool execution from the server to the client. This ensures that when the agent runs bash or edit file, it operates on the user's local machine rather than the remote server.
• Tooling: Tools are defined via Zod schemas in the Shared package and executed locally via a factory function (executeLocalTool).

5. Authentication & Billing

• Clerk OAuth: Implemented using Proof Key for Code Exchange (PKCE). The CLI opens a browser for authentication, and a temporary local bun server handles the callback to securely exchange the authorization code for an access token.
• Polar Billing: Integrated with Polar to track token usage.
  • Middleware: requireCreditsBalance guards API endpoints, ensuring users have sufficient credits before processing requests.
  • Metering: The server calculates input/output token costs and ingests usage data into Polar’s meter (nightcode_usage).

6. Monitoring & CI/CD

• Sentry: Integrated into the Hono server to capture unhandled exceptions, provide stack traces, and log successful/failed requests.
• Railway: Used for deployment. The project utilizes Railway’s "Preview Environments" to automatically deploy and test pull requests, ensuring production-grade reliability.

---

Synthesis/Conclusion

The project evolved from a simple terminal UI into a production-ready, monetized AI coding agent. The most significant takeaway is the architectural shift from server-side to client-side tool execution, which is essential for security and functionality. By leveraging the Versel AI SDK and Polar for billing, the project demonstrates how to build a scalable, secure, and monetizable developer tool entirely from scratch.