@QingQ77: Want to systematically learn AI Agent but afraid of giving up halfway? This Chinese tutorial website turns 21 chapters into a visualized textbook with animated flowcharts. Each chapter comes with a quiz bank and an AI teaching assistant ready to answer questions anytime. The entire site is static and can be deployed to Nginx with a single command. Content is spread across 6 major sections covering 21 chapters, starting from LLM basics, Func...

X AI KOLs Timeline 07/14/26, 02:33 AM Tools

ai-agent tutorial open-source visualization quiz chinese learning-resource

Summary

Recommends an open-source Chinese AI Agent general knowledge tutorial website, including 21 chapters with visualized animated tutorials, a 130+ question bank, and an AI teaching assistant. It is purely static and can be deployed to Nginx with one click.

Want to systematically learn AI Agent but afraid of giving up halfway? This Chinese tutorial website turns the 21 chapters into a visualized textbook with animated flowcharts. Each chapter provides a quiz bank and an AI teaching assistant that you can ask questions anytime. The entire site is static and can be dropped into Nginx to run. Content is divided into 6 major sections covering 21 chapters, from LLM basics, Function Calling, MCP, Skills, Multi-Agent, LangGraph, all the way to RAG, evaluation & observability, security protection, deployment & operations, and 2026 trends. Each chapter has three tabs at the top: "Article / Q&A / Exam".

Original Article

View Cached Full Text

Cached at: 07/14/26, 02:26 PM

If you want to systematically learn AI Agent but are afraid of giving up halfway, this Chinese tutorial website turns 21 chapters into a visualized textbook with animated flowcharts. Each chapter comes with a quiz bank and an AI teaching assistant you can ask anytime. The entire site is static—just drop it into Nginx and it runs. The content is spread across 6 major sections covering 21 chapters, from LLM fundamentals, Function Calling, MCP, Skills, Multi-Agent, LangGraph, all the way to RAG, evaluation & observability, security, deployment & operations, and 2026 trends. Each chapter has three tabs at the top: “Article / Cheat Sheet / Exam”.

fuzhengwei/ai-agent-guide

Source: https://github.com/fuzhengwei/ai-agent-guide

AI Agent General Knowledge Tutorial

From Zero to Interview Ready — 21 Incremental Visual Chapters, Animating Core AI Agent Concepts

Read Online: ai-agent-guide.xiaofuge.cn (https://ai-agent-guide.xiaofuge.cn)

✨ Highlights

🎬 Animated Explanations: In-house SVG flowchart engine visualizes core processes like ReAct loops and MCP call chains.
📚 21-Chapter System: From LLM basics to 2026 tech outlook, 6 sections with a progressive learning path.
📋 Cheat Sheet: Concise summaries of high-frequency interview questions with interviewer perspectives.
📝 Online Exams: 130+ single/multiple-choice questions, auto-grading + error notebook, simulating real interviews.
💬 AI Assistant: Built-in AI learning assistant supporting OpenAI-compatible protocol; ask questions while reading.
🌙 Dark Theme: One-click toggle between light/dark themes for eye comfort.
📊 Progress Tracking: localStorage-based learning progress with resume capability.
🚀 Zero-Dependency Deployment: Pure static HTML + CSS + JS, directly hostable on Nginx.

📖 21-Chapter Outline

Section	Ch.	Title	Core Content
🎬 Prologue	0	Agent Capability Panorama	Token, Prompt, Embedding overview
📖 Part 1	1	LLM & Agent Basics	LLM principles, Token mechanics, Prompt Engineering
	2	What is an AI Agent?	Agent definition, architecture, difference from Chatbot
	3	Your First Agent: Weather Query	Build an Agent from scratch, Function Calling hands-on
	4	ReAct: Teach Agent to Think	Reasoning + Acting loop, decomposition of thought chain
	5	Agent Memory System	Short/long-term memory, vector retrieval, memory management
🛠️ Part 2	6	Function Calling & Tool Design	Tool protocol, parameter Schema, best practices
	7	MCP: Standardized Tool Interface	Model Context Protocol, Server/Client architecture
	8	Skills: Tool Composition & Reuse	Skill orchestration, Prompt templates, composite calls
	9	CLI Capability: Agent Local Tools	Shell execution, file operations, system interaction
🤝 Part 3	10	Multi-Agent System Architecture	Collaboration patterns, communication mechanisms, division
	11	LangGraph & State Machines	Graph orchestration, state transitions, conditional branching
🏗️ Part 4	12	Mainstream Agent Framework Comparison	LangChain / CrewAI / AutoGen comparison
	13	Dify, Coze & Visual Orchestration	Low-code platforms, workflow design, plugin ecosystem
🚀 Part 5	14	CLI Agent: Smart Command-Line Assistant	Terminal Agent practice, code generation, ops automation
	15	GUI Agent: Browser Automation	Web operations, form filling, screenshot understanding
	16	RAG: Retrieval-Augmented Generation	Document chunking, vectorization, retrieval strategies
⚙️ Part 6	17	Agent Evaluation & Observability	Evaluation metrics, Trace tracking, LangSmith
	18	Agent Security & Protection	Prompt injection, permission control, sandbox isolation
	19	Agent Deployment & Operations	Containerization, auto-scaling, monitoring alerts
	20	Inference Frameworks & Model Serving	Ollama, vLLM, Spring AI deployment practices
🔮 Epilogue	21	2026 Agent Technology Outlook	Multi-modal, embodied intelligence, Agent ecosystem trends

🏗️ Project Structure

ai-agent-guide/
├── index.html                  # Main page (three-column layout + toolbar)
├── cors-proxy.js               # CORS proxy (AI chat assistant, Node.js)
├── css/
│   ├── book.css                # Core style system (design tokens + components + dark theme)
│   └── animations.css          # Animation library (page flip, fade-in, highlight)
├── js/
│   ├── main.js                 # Main controller (navigation, theme, exam, tab bookmarks)
│   ├── flowchart.js            # In-house SVG flowchart rendering engine
│   ├── quiz.js                 # Exam system (question loading, answering, grading, error notebook)
│   ├── progress.js             # Learning progress tracking (localStorage persistence)
│   └── chat.js                 # AI chat assistant (OpenAI-compatible protocol + streaming responses)
├── chapters/                   # 21 chapter content files
│   ├── ch00-fundamentals.html  # Prologue: Agent capability panorama
│   ├── ch01-llm-basics.html    # Chapter 1: LLM & Agent basics
│   ├── ch02-what-is-agent.html # Chapter 2: What is an AI Agent?
│   ├── ...
│   └── ch20-inference-framework.html  # Chapter 20: Inference frameworks & model serving
├── data/
│   └── quiz-bank.json          # Quiz bank (21 chapters, ~130+ questions, 162KB)
├── nginx/                      # Nginx deployment configuration
│   ├── conf/conf.d/            # Site configuration (HTTPS + SPA routing)
│   └── ssl/                    # SSL certificates
└── assets/                     # Static resources

🎨 Design Philosophy

No “AI Vibe”

Dimension	Choice	Rejected
Color palette	Calm blue-gray `#0f172a` + indigo accent `#4f46e5`	Purple-blue gradients, fluorescent colors
Font	System font stack (PingFang SC / SF Mono)	Fancy Google Fonts
Layout	Three-column book reading experience	Card stacking, excessive animations
Style	Clean, consistent, practical — like a well-designed technical book	Flashy, over-the-top, low information density

Three-Column Layout

┌──────────┬────────────────────────────────────┬──────────┐
│ Left     │ Middle Content Area                │ Right    │
│ 260px    │                                    │ 340px    │
│          │                                    │          │
│ 📚 TOC   │ 📖 Article / 📋 Cheat Sheet / 📝 Exam│ 💬 AI    │
│ Progress │ Page-transition animations         │ Learning │
│ Chapter  │ In-house flowchart rendering       │ Assistant│
│ Status   │ Prism.js code highlighting         │ Streaming│
│          │                                    │ Multi-model│
└──────────┴────────────────────────────────────┴──────────┘

Left (260px): Table of contents with progress bars and chapter completion status
Center: Content reading area, three tab bookmarks per chapter (📖 Article / 📋 Cheat Sheet / 📝 Exam)
Right (340px): AI learning assistant, configurable with multiple OpenAI-compatible APIs

Chapter Bookmark Tabs

Each chapter has three bookmark tabs at the top:

📖 Article: Chapter body content, includes animated flowcharts and code examples
📋 Cheat Sheet: High-frequency interview question summaries (with question count badge)
📝 Exam: Post-chapter quiz (single + multiple choice, auto-graded, error collection)

💬 AI Learning Assistant

Built-in AI chat assistant — ask questions anytime while reading:

Out-of-the-box: Built-in free API configuration (Agnes AI), no extra setup needed
Custom Models: Supports multiple OpenAI-compatible APIs (GPT / Claude / Gemini / domestic models)
Streaming Responses: SSE streaming output with typewriter effect in real time
Context Aware: Dialogue automatically includes current chapter info for targeted answers
Persistent Configuration: API settings saved to localStorage, persist across refreshes
CORS Proxy: Built-in cors-proxy.js proxy service to bypass browser cross-origin restrictions

📝 Exam System

Quiz Bank Design

Quantity: 21 chapters, ~130+ questions (5 single-choice + 3 multiple-choice per chapter)
Question Types: Single-choice + multiple-choice, auto-graded
Source: data/quiz-bank.json (162KB), organized by chapter
Interviewer Perspective: Questions read like an interviewer asking, explanations read like an interviewer commenting

Exam Features

✅ Chapter Exam: Test immediately after finishing a chapter
✅ Random Exam: Random questions from the full bank, simulating a comprehensive interview
✅ Auto Grading: Instant score upon submission + per-question explanations
✅ Error Notebook: Automatically records wrong answers for review
✅ Timer: Exam timer to simulate real interview pressure

🛠️ Tech Stack

Category	Technology	Description
Frontend Framework	Vanilla JS	Zero dependencies, pure native implementation
Style System	CSS Custom Properties	Design-token-driven, one-click dark theme toggle
Flowcharts	In-house SVG Engine	`flowchart.js`, no dependency on Mermaid / D3
Code Highlighting	Prism.js	Python / JSON / YAML / Java / Bash
Progress Tracking	localStorage	No backend needed, resume capability
AI Chat	OpenAI-compatible Protocol	Streaming SSE, multi-model switching
CORS Proxy	Node.js	`cors-proxy.js`, lightweight proxy service
Deployment	Nginx + SSL	Pure static hosting, HTTPS + SPA routing

🚀 Local Preview

Method 1: Python HTTP Server

cd ai-agent-guide
python3 -m http.server 8080
# Open http://localhost:8080

Method 2: Start the AI Chat Assistant (Optional)

The AI assistant uses the built-in free API by default and works directly. To use a custom API, start the CORS proxy:

node cors-proxy.js 8092
# Proxy runs at http://localhost:8092/proxy/chat/completions

🌐 Online Deployment

The project uses Nginx for hosting; configuration files are in the nginx/ directory:

# 1. Deploy static files to server
scp -r ./* user@server:/usr/share/nginx/html/ai-agent-guide.xiaofuge.cn/

# 2. Configure Nginx (already includes HTTPS + SPA routing)
cp nginx/conf/conf.d/ai-agent-guide.xiaofuge.cn.conf /etc/nginx/conf.d/

# 3. Reload Nginx
nginx -s reload

Nginx Configuration Highlights:

HTTP → HTTPS automatic redirect
SPA route fallback (try_files $uri /index.html)
7-day cache for static assets (CSS / JS / images / fonts)
UTF-8 character encoding

📊 Project Data

Metric	Value
Number of Chapters	21
Quiz Bank Questions	130+
Quiz Bank Size	162 KB
Core Styles	2,800+ lines of CSS
Main Controller	1,500+ lines of JS
Flowchart Engine	350+ lines of JS
Total Code	~1.5 MB (including chapter HTML)
External Dependencies	Only Prism.js (CDN)

📜 License

Apache-2.0