AI Agent Full-Stack Development Course: LangChain + LangGraph + MCP in Practice

Title

AI Agent Full-Stack Development Course: LangChain + LangGraph + MCP in Practice

Meta Description

A practical breakdown of the AI Agent full-stack development course on Bilibili: through Vue project creation demos, it explains the agent's perceive-decide-act loop, dissects the LangChain, LangGraph, MCP, and Playwright tech stack and LLM selection, and targets programmers looking to transition.

Article Content

AI Agent is not a science-fiction concept, but a program that can perceive its environment, reason and make decisions, and take actions. In the "AI Agent Full-Stack Development Course" on Bilibili, the creator uses two hands-on demos of creating Vue projects to fully demonstrate how an agent cycles through "think-act-observe" like a human, and systematically breaks down the full-stack tech stack from LLM selection to tool integration.

The Essence of an Agent: A Three-Stage Loop of Perception, Decision, and Action

The creator uses an analogy to clearly explain how an Agent operates: humans observe the world through their eyes, hand the information to the brain for reasoning, and then act with their hands; an Agent works the same way—it uses tools (such as a terminal reader or browser controller) to perceive the environment, hands the observations to a large language model for decision-making, then calls tools to execute actions, and continues to observe the results before entering the next round of the loop.

This closed loop of "think-act-observe" is the core that distinguishes an Agent from an ordinary program. Ordinary programs execute according to preset scripts, whereas an Agent dynamically decides the next step based on the return value observed each time. In the course demo, when the agent creates a Vue 3 project, at every step it first reads the terminal output and then decides whether to press Enter to confirm, choose a preset, or execute a new command—it does not assume success just because a command has finished executing, but must see actual feedback before proceeding.

The Agent's "think-act-observe" loop is usually called the ReAct (Reasoning + Acting) paradigm in both academia and engineering. It interweaves the reasoning capability of large language models with the invocation capability of external tools: the model first outputs a piece of reasoning (Thought), then selects an action (Action) to call a tool, and the tool's return result is fed back to the model as an observation (Observation), repeating until the task is complete. Unlike one-shot Q&A, ReAct allows the model to revise its plan based on environmental feedback, thereby handling tasks that require multi-step interaction. This paradigm is also the default abstract foundation for AgentExecutor in LangChain and for the subsequent state-graph orchestration in LangGraph.

Hands-On Demo: The Complex Decision-Making Behind Creating a Vue Project with One Command

The first project shown in the course is having the Agent create a Vue 3 project locally. The user inputs only one instruction, and the agent autonomously completes the following process: query the Alibaba Cloud Bailian knowledge base to obtain terminal operation specifications and Vue knowledge; close the existing terminal and open a new one; enter the specified directory and execute vue create; read the terminal return content; select the Vue 3 preset according to the prompt and press Enter; and finally start npm run serve. There is no human intervention throughout the entire process, but the agent first "looks" and then "acts" at every step.

The second demo increases the difficulty: creating a Vue 2 project. Unlike Vue 3, where pressing Enter by default is enough, Vue 2 requires moving the cursor down before confirming. The creator deliberately shows how the agent reads the terminal content, determines that it needs to input a downward movement, executes the downward movement, and presses Enter—this seemingly tiny difference precisely proves that the Agent's decision-making is based on real-time observation rather than a fixed script.

This capability extends broadly. The creator mentions that an Agent can not only create projects, fix bugs, perform code reviews, and release to production, but also operate Excel, PPT, and Word, and even control browsers and applications such as DingTalk, Feishu, and WeChat—because it directly operates the operating system, in theory it can complete all repetitive work that can be automated.

Full-Stack Tech Stack Breakdown: From LLMs to the MCP Toolchain

The core tech stack of the course is divided into four layers. The bottom layer is the large model, which provides three deployment methods: calling Alibaba Cloud Bailian cloud models, using overseas Cloud GPT series, or deploying locally for free via Ollama. The upper layer is the AI frameworks LangChain and LangGraph, responsible for orchestrating the Agent's reasoning and tool-calling workflow. The tool layer connects to the MCP protocol and includes self-developed terminal controllers and browser controllers, while also combining LangChain's built-in database tools and file operation tools. The observability layer uses LangSmith and LangFuse to trace each step of the Agent's decision-making and execution. The knowledge base connects to the Alibaba Cloud Bailian knowledge base, allowing the Agent to query operation specifications before acting. On the AI IDE side, it involves Cursor, Tongyi Lingma, and ByteDance's open-source Trae.

The orchestration logic of this tech stack is worth noting: the knowledge base solves the specification problem of "how to do it," MCP and self-developed tools solve the execution problem of "being able to do it," LangGraph solves the workflow problem of "what to do first and what to do next," and observability tools solve the debugging problem of "whether it is done correctly." None of the four can be missing, and this is also a typical architecture for enterprise-level Agent implementation.

MCP (Model Context Protocol) is a standardized protocol proposed and open-sourced by Anthropic at the end of 2024, aiming to unify the connection between large model applications and external data sources and tools. It adopts a client-server architecture: MCP servers expose resources (Resources), tools (Tools), and prompt templates (Prompts), and clients (such as IDEs or Agent runtimes) discover and invoke them according to the protocol. Compared with writing custom integration code for each tool, MCP allows the same set of tools to be reused by different models and frameworks. The terminal controller and browser controller mentioned in the article can either be encapsulated as MCP servers or integrated as LangChain custom tools; the two are complementary at the tool layer.

LangGraph is a low-level orchestration framework launched by the LangChain team, using directed graphs (state machines) to model an Agent's execution flow. Nodes in the graph represent one step of computation or a tool call, edges represent state transitions, and it supports conditional edges, loops, and persistent checkpoints. Compared with the implicit loop based on AgentExecutor in early LangChain, LangGraph explicitly draws "what to do first and what to do next" as a graph, making it easier to debug, interruptible and resumable, and convenient for adding human review nodes. The "workflow problem" mentioned in the article corresponds exactly to its core value: constraining the free ReAct-style loop within a controllable workflow.

Observability tools solve the "black box" problem of Agents. Both LangSmith and LangFuse can perform full-link tracing of an Agent run: recording each prompt, model return, tool-call parameters and duration, token consumption, and error stack, and restoring the reasoning trajectory in a tree view. The main difference between the two lies in deployment form—LangSmith is LangChain's official hosted platform and integrates most tightly with LangChain/LangGraph; LangFuse is open source and self-hostable, suitable for enterprises with data compliance requirements. They allow developers to locate "which observation was misread and which tool call failed" within a multi-step loop, and are essential means for iterating on Agent behavior.

Course Positioning: Project-Oriented, Designed for Programmer Transition

The creator explicitly states that the course does not pursue a "big and comprehensive" tech stack, but centers on enterprise-level practical projects and writing code from scratch. The learning curve is relatively smooth, and it targets programmers who wish to transition toward AI Agents, as well as beginners who have experience using large models and understand Python and Node.js. The course goals include mastering the latest development technologies of LangChain and LangGraph, integrating MCP and automation technologies to implement complex agents, and developing deployable Agent applications from scratch.

The instructor himself has lived through three cycles: the PC internet, the mobile internet, and artificial intelligence. He has served as CTO of a startup and technical lead of a front-end team at a major tech company, and currently also serves as head of AI Agent development. This background gives the course, beyond technical depth, an additional perspective on technology cycles and career transitions.

For developers who want to understand the underlying operating mechanism of Agents and also hope to build runnable projects hands-on, this course provides a complete path from principles to enterprise-level practice. Its value lies not in piling up knowledge points, but in using two reproducible demos to turn the abstract concept of "perceive-decide-act" into visible terminal operations.

One-line Summary

A Bilibili course uses two Vue projects to demonstrate the AI Agent's perceive-decide-act loop and breaks down its full-stack tech stack.

Paragraph Summary

The article introduces how the Bilibili creator's "AI Agent Full-Stack Development Course" reveals the operating mechanism of agents through hands-on demos. The essence of an Agent is the "think-act-observe" loop: using tools to perceive the environment, handing decisions to a large model, then calling tools to execute, and advancing based on real-time feedback rather than fixed scripts. The course demonstrates this with two Vue projects—creating a Vue 3 project only requires pressing Enter, while a Vue 2 project requires determining that the cursor should move down, proving that decisions are based on observation. The tech stack has four layers: large models (Bailian/Cloud GPT/Ollama), LangChain and LangGraph orchestration, the MCP protocol and self-developed terminal/browser controllers, and LangSmith and LangFuse observability, plus the Bailian knowledge base providing operation specifications. The course targets programmers hoping to transition into Agent development, emphasizing enterprise-level projects and writing code from scratch.