chat2code-tutorial

English | 中文

This is a tutorial project based on T3 Stack, aiming to recreate the core functionality of bolt.new and help readers understand how to implement a chat-to-code application in the browser.

Current Progress

We are currently in Phase 2 (AI Integration), having completed:

• Implemented AI interaction to modify workspace code through chat

Follow HackerQED on Jike/Twitter (English/Chinese) for latest updates

How to Learn

git clone https://github.com/HackerQED/chat2code-tutorial.git
cd chat2code-tutorial/4-action-parser-runner
pnpm i
pnpm dev

# visit http://localhost:3000/playground

Next Steps

This is a progressive tutorial project, and we will implement the complete functionality through multiple phases:

• Phase 0: Environment Validation and Infrastructure
• Phase 1: Core Functionality Implementation
• Phase 2: AI Integration [Current Phase]
• Phase 3: State Management and Data Flow
• Phase 4: User Experience Optimization

Each phase will have detailed documentation and runnable code examples.

Tech Stack

• Frontend Framework: Next.js (T3 Stack)
• AI Integration: OpenAI API
• Development Environment: WebContainer API
• Editor: CodeMirror
• Terminal: xterm.js
• State Management: Zustand
• UI Components: shadcn/ui
• Styling: Tailwind CSS