build-your-own-coding-agent

# Build Your Own AI Coding Agent (TypeScript)

A step-by-step workshop for building an AI-powered coding assistant using TypeScript and the Anthropic Claude API.

## What You'll Learn

By the end of this workshop, you'll understand how to:

- Connect to the Anthropic Claude API
- Build a simple AI chatbot with conversation history
- Add tools like reading files and listing directories
- Handle tool requests and errors gracefully
- Build a modular agent framework that's easy to extend

## What We're Building

You'll build 7 versions of a coding assistant, each adding more capabilities:

1. **Basic Chat** — talk to Cursor
2. **File Reader** — read code files
3. **File Explorer** — list files in folders
4. **Modular Framework** — clean, extensible architecture
5. **Refined Toolkit** — powerful tools like bash, edit, and grep
6. **Streaming Responses** — real-time text and tool visibility
7. **Extended Thinking** — see Cursor's reasoning process in real-time

```mermaid
graph LR
    subgraph "Application Progression"
        A["Chapter 1<br/>Basic Chat"] --> B["Chapter 2<br/>+ File Reading"]
        B --> C["Chapter 3<br/>+ Directory Listing"]
        C --> D["Chapter 4<br/>Modular Framework"]
        D --> E["Chapter 5<br/>Refined Toolkit"]
        E --> F["Chapter 6<br/>Streaming"]
        F --> G["Chapter 7<br/>Extended Thinking"]
    end

    subgraph "Tool Capabilities"
        H["No Tools"] --> I["read_file"]
        I --> J["read_file<br/>list_files"]
        J --> K["read_file<br/>list_files<br/>(modular)"]
        K --> L["bash, edit_file,<br/>grep (ripgrep)"]
        L --> M["+ streaming<br/>+ tool visibility"]
        M --> N["+ thinking blocks<br/>+ reasoning visibility"]
    end

    A -.-> H
    B -.-> I
    C -.-> J
    D -.-> K
    E -.-> L
    F -.-> M
    G -.-> N
```

## How It Works (Architecture)

Each agent works like this:

1. Waits for your input
2. Sends it to Cursor
3. Cursor may respond directly or ask to use a tool
4. The agent runs the tool