# 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
Basic Chat"] --> B["Chapter 2
+ File Reading"] B --> C["Chapter 3
+ Directory Listing"] C --> D["Chapter 4
Modular Framework"] D --> E["Chapter 5
Refined Toolkit"] E --> F["Chapter 6
Streaming"] F --> G["Chapter 7
Extended Thinking"] end subgraph "Tool Capabilities" H["No Tools"] --> I["read_file"] I --> J["read_file
list_files"] J --> K["read_file
list_files
(modular)"] K --> L["bash, edit_file,
grep (ripgrep)"] L --> M["+ streaming
+ tool visibility"] M --> N["+ thinking blocks
+ 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

Agents

build-your-own-coding-agent