Loading repository data…
Vincent-zhengwen / repository
Interactive AI Agent tutor that visualizes Claude Code-style agent loops, tool calls, subagents, task systems, and worktree isolation.
一个面向 AI Coding / Agentic Workflow 学习的交互式教学应用。
本项目基于 learn-claude-code 的 agent 演进路径，将原本偏代码和文档的学习内容，转化为一个类似 ChatGPT / Manus 的可交互教学界面。用户可以在 S01 到 S12 不同阶段之间切换，通过真实对话、工具调用、执行面板和教学说明，理解一个 coding agent 是如何从最小 agent loop 逐步演化到 subagent、任务系统、后台任务、agent team 和 worktree 隔离的。
Claude Code 这类 AI Coding Agent 的能力很强，但它的核心机制对普通学习者并不直观。
例如：
我希望做的不是简单复刻 Claude Code，而是把这些机制做成一个可以观察、可以交互、可以教学的产品界面。
这是一个 AI Agent 教学产品原型，重点展示三类能力：
应用提供 S01 到 S12 的阶段切换，每个阶段对应一种 agent 能力演进：
用户可以像使用 AI 助手一样输入任务，系统会根据当前阶段调用不同能力的 agent 脚本完成任务。
右侧执行面板实时展示：
这让原本隐藏在命令行或模型内部的执行过程变得可观察。
每个阶段都配有教学文档，解释当前阶段解决了什么问题、核心代码模式是什么、相比上一阶段新增了什么能力。
User
↓
Next.js Frontend
↓
Next.js API Route
↓
Python Flask Bridge
↓
Session Agent Scripts
↓
Model API
前端负责聊天界面、版本选择、执行面板和教学文档展示。
后端 bridge 负责包装不同阶段的 agent 脚本，并将执行事件以流式方式返回给前端。
npm install
python3 -m pip install -r python/requirements.txt
复制 .env.example 为 .env.local：
cp .env.example .env.local
然后在 .env.local 中填入自己的 API key：
DASHSCOPE_API_KEY=your_bailian_coding_plan_api_key
MODEL_ID=qwen3-coder-plus
BRIDGE_URL=http://localhost:5001
python3 python/bridge.py
npm run dev
访问：
http://localhost:3000
这个项目由我独立完成产品设计、交互设计、前后端实现和教学内容整理。
我主要关注的问题是：
这个项目体现了我对 AI Agent 产品的理解：Agent 不只是一个聊天框，更重要的是任务执行、工具调用、状态管理、上下文管理和可观察性。
通过这个项目，我尝试把这些抽象能力变成一个具体产品，让学习者可以边用边理解 AI Coding Agent 的工作方式。
本项目是一个学习和教学用途的产品原型，不是 Claude Code 官方实现，也不是对 Claude Code 的完整复刻。
它的重点是通过交互式体验解释 agentic coding 的核心设计模式。
An interactive teaching app for learning AI Coding and Agentic Workflow.
This project turns the learn-claude-code agent progression into a ChatGPT / Manus-style learning experience. Users can switch between S01 and S12, send real tasks, inspect tool calls, observe execution panels, and understand how a coding agent evolves from a minimal agent loop into subagents, task systems, background tasks, agent teams, and worktree isolation.
AI coding agents such as Claude Code are powerful, but their internal mechanisms are not easy to observe.
This project is not a clone of Claude Code. It is a learning product that makes core agent patterns visible and interactive.
User
↓
Next.js Frontend
↓
Next.js API Route
↓
Python Flask Bridge
↓
Session Agent Scripts
↓
Model API
The frontend handles chat, session selection, execution visualization, and teaching documents.
The Python bridge wraps the session agent scripts and streams execution events back to the frontend.
Install frontend dependencies:
npm install
Install Python dependencies:
python3 -m pip install -r python/requirements.txt
Create local environment config:
cp .env.example .env.local
Fill in .env.local:
DASHSCOPE_API_KEY=your_bailian_coding_plan_api_key
MODEL_ID=qwen3-coder-plus
BRIDGE_URL=http://localhost:5001
Start the bridge:
python3 python/bridge.py
Start the frontend:
npm run dev
Open:
http://localhost:3000
I independently designed and built this project, including product structure, interaction design, frontend implementation, Python bridge integration, and teaching content organization.
The main product questions I explored were:
This project reflects my understanding that an AI agent is not just a chat interface. The important parts are task execution, tool use, state management, context management, and observability.
The goal is to make those abstract capabilities concrete through an interactive learning experience.
This project is a learning and teaching prototype. It is not an official Claude Code implementation and does not attempt to fully recreate Claude Code.
Its purpose is to explain core agentic coding design patterns through an interactive product experience.
Selected from shared topics, language and repository description—not editorial ratings.
vstorm-co /
Visualize Pydantic AI agent workflows from Logfire traces as an interactive HTML diagram — tools, nested sub-agents, tokens and exact cost.
waheed444 /
This repo demonstrates how to build interactive AI agent interfaces using Chainlit. It combines LangChain, OpenAI/Gemini, and custom tools to enable seamless conversations and fast deployment of agent workflows with Python.
qinxujunai /
Interactive visual cognitive system for learning Python execution models and AI Agent workflows
certainly-param /
Tracelens - Visual Debugger and Replay Engine for LangGraph Agentic Workflows - Real-time monitoring, time-travel debugging, and interactive graph visualization for AI agents
fatihsoysalcom /
This Python script simulates a simple 'Agentic Workflow' where an AI agent (conceptually like Gemini) interacts with a web page. It fetches content from a specified URL, extracts relevant text, analyzes it for predefined keywords, and then makes a decision on the next action based on the analysis. This demonstrates the core idea of an AI autonomous
jdnichollsc /
ADK Studio — An open-source development UI for Google's Agent Development Kit (ADK). Write AI agents in Python, test them interactively with Gemini, and test durable multi-agent workflows visually