Building an AI Agent from Scratch in 2026: The 10 Skills You'll Need

Hello everyone, I'm Shuangyue. Author of wangEditor, former senior front-end engineer at Baidu and Didi, gold medal instructor at Muke.com, PMP, author of Front-end Interview Pie.

Last year I built an AI Agent project called 【Zhiyu】 and many students participated in learning and development. With a year of development, AI Agent related technologies have changed dramatically, so I'm going to refactor this project to create one that meets current AI Agent technical requirements.

If you want to join me, feel free to message me～ Experience the detailed process of developing an AI Agent from scratch.

Project Introduction

First, what to build, then how to build it.

What is an Agent?

Many students may still not know what an Agent actually is, and how it relates to AI LLMs.

• AI (Artificial Intelligence) is a very broad concept, generally referring to everything in the artificial intelligence industry we are currently developing.
• LLM (Large Language Model) is easy to understand — it refers to commonly used large models like GPT, Claude, Deepseek, Qwen, Kimi, etc.
• Agent (Intelligent Agent) refers to applications built on top of large models, such as Claude Code, Cursor, Manus, OpenClaw Hermes, etc.

Think of it this way: the LLM is the brain — smart but limited in capability. The Agent equips the brain with hands, feet, mouth, nose, eyes, etc., enabling it not only to think but also to actually do things.

What project to build?

The first version built last year was an AI interviewer, with a relatively narrow application scope — mainly resume optimization, mock interviews, answering interview questions... This refactoring aims to create a general-purpose one, referencing currently popular AI Agents, to build a project like OpenClaw (Little Lobster). For now, it runs in the console, like Claude Code. It cannot yet connect to IM chat tools like Feishu or DingTalk. But its functionality and configuration are exactly the same as OpenClaw. You can chat with AI, have it read/write documents, configure Skills, set scheduled tasks, use MCP server to send messages, etc... It is also an excellent personal AI assistant, but lighter and lower cost.

Language and Framework

This time I still choose to use TypeScript and Node.js runtime — rich ecosystem, friendly to front-end developers. Continue using langChain and langGraph frameworks, which allow quick building and configuration of an Agent.

Why should front-end developers learn Agent?

First, learning Agent development helps you better use Agent tools like Claude Code, Cursor, Openclaw — many design aspects of this project are the same. Second, learning Agent development gives you the opportunity to transition into an AI engineer. This project covers almost all essential skills for Agent development, allowing you to build an excellent Agent product from scratch.

AI Agent Architecture Design

The first version developed last year was a secondary development based on an open-source project, in the form of an AI chat project. The refactored project is entirely built step by step by me from scratch, incorporating all core technologies of current AI Agents. Including tools, skills, memory, context, permission, subagent, session, command, hook, MCP-server... Other excellent Agents (like claude-code, cursor, openclaw) also have these features — Agent development has become relatively stable.

LLM

LLM is the foundation — all decisions and every step go through LLM reasoning and judgment. A general-purpose Agent should support all common LLM APIs, at least domestic and local LLM interfaces.

Query Engine

With the LLM interface, each step's invocation also needs to be encapsulated separately, considering many scenarios including:

• stream: streaming output, simulating typing effect
• abort: cancel API call, timely cancellation if errors occur
• error: error handling, e.g., network errors, interface errors
• retry: automatic retry 2-3 times on error
• limit: rate limits, token limits for context content, etc.

As shown below, a user sends an AI request, AI streams the reply, and you can press ESC to cancel the request midway.

ReAct Agent

ReAct = Reasoning + Action — reasoning and acting simultaneously, the basic workflow of current Agents.

• User submits information, sends request to LLM
• Check if LLM's reply requires calling a tool?
• If no tool call is needed, it's the final answer, reply directly to user
• If needed, call tool to get result, then send back to LLM
• Continue to step 2

Thus, with just LLM and tools, plus this workflow design, you already have a basic Agent.

Tools

As mentioned, the basic ReAct Agent is: LLM + tools — LLM is the brain, tools are the hands and feet. A general-purpose Agent should at least include the following built-in tools:

• read_file: read file contents
• write_file: create new file or overwrite file
• exec: execute a shell script
• web_search: search engine
• web_fetch: fetch or download a web resource
• run_python: run a Python script

These are just the basics — without them, the Agent cannot run. But tools permeate the entire Agent. For example, other features below also use tools. For example, extending third-party capabilities via MCP server also uses tools.

Skills

A skill is a manual; skills are the Agent's skill pack and library. AI selects skills related to the topic, and following their guidance, the reply quality is higher and more aligned with user requirements. Even a skill's text can define a workflow, which LLMs understand well. Before 2025, workflows were defined by drawing flowcharts, which was cumbersome. The refactored 【Zhiyu】 project natively supports skills — you can install and configure third-party skills, and you can create your own skills.

Session

The previous project was an AI Chat form, with a conversation list on the left and chat area on the right. After refactoring, it's no longer that form, but conversation management is still needed. Using slash command form, like Claude Code. Use /new to start a new session, /sessions to get the last 20 conversations, /rewind xxx to revert to a previous session.

Context

By default, each AI API request sends all current chat history, easily causing bloated Context, leading to AI hallucinations, high token usage, and high costs. Therefore, an excellent Agent must have a Context compression mechanism, not simply truncating or letting AI summarize, but analyzing the situation. The refactored 【Zhiyu】 project has 4 layers of compression:

• Compress tool input content: if too much, store on disk, only provide file address, let Agent read on demand.
• Compress tool messages in chat history: redundant information, simplify them.
• Compress the entire session: let AI summarize core content — with requirements and templates, not AI's free play.
• Truncate chat history: last resort.

As shown below, when Context exceeds 80%, compression automatically starts, and it suggests using /new command to start a new session.

PS. The image above deliberately set token limit to 4000 for testing; it will be restored to default 256,000 after testing.

Memory

A personal Agent assistant must have memory. For example, if I tell it "My name is Shuangyue, I'm a programmer," it should remember my name and occupation. It should also remember what I've done recently and some of my personal habits.

The refactored 【Zhiyu】 project has 3 layers of memory, a common design in other open-source Agents:

• Short-term memory: current session memory, i.e., context content.
• Long-term memory: cross-session memory, recorded for a period but decays over time.
• Profile: user profile.

Permission

Remember when Openclaw first went viral, many worried about its security, not recommending installation on personal computers. Agents do have security issues, and indeed cannot be 100% absolutely secure. Any software may have vulnerabilities. But what we can do is ensure security considerations for most application scenarios, blocking dangerous operations and directories.

First, set permission levels for all tools: read, write, exec, network, db. Low-security levels (read, network) can execute tools directly; high-security levels require other protective measures.

Then determine if the file or directory being operated on is a system-sensitive file or directory. If so, reject directly. If not sensitive, check if it's within the current directory; if not, seek user consent.

Also determine if the executed shell script is a dangerous command, like rm -rf /; if so, reject directly. The Agent security protection flow consists of the following 4 stages:

Stage 1 (Bash Pre-check) → Stage 2 (Deny Rules) → Stage 3 (Allow Rules) → Stage 4 (Ask)

As shown below, I asked the agent to read a sensitive system file, and it prompted that it cannot read it.

Hook

Permission rules are fixed and built into the Agent project. You cannot modify them, and they are not easy to extend. Hook is a way for users to define custom permission rules, allowing you to define your own rules at various points. For example, before calling a tool, you can define which files cannot be operated on, like .env. For example, before a session starts, you can define what content to add to the chat.

The most popular skill in the Openclaw community right now is called self-improving-agent, which uses hooks to integrate content. This shows that Hook is already an essential module for Agents.

SubAgent

When chat content becomes increasingly large and messy, it easily leads to Context exceeding token limits and AI hallucinations. One way to solve this is to use SubAgent for independent tasks. The SubAgent context is completely separate from the main Agent context, so it does not affect the main Agent's context size. Therefore, SubAgent is also an essential capability for an Agent project.

As shown below, I can start a SubAgent to do something for me. No matter how you do it, just tell me the result.

Others

The above are the core modules of an AI Agent. There are other aspects.

An AI Agent should support configuring MCP server to extend third-party capabilities. However, MCP server also has many limitations — it causes the Agent to carry a large number of tools when requesting the AI interface, affecting efficiency and cost. Many people are now comparing MCP server with skills + cli, with the latter also being promoted in the community.

Slash commands are also common Agent features, such as /new, /rewind, /sessions, /compact mentioned above.

RAG (Retrieval-Augmented Generation) and vector databases have had their importance significantly reduced in current Agent design. Mainly because of their high cost, in personal use scenarios, other methods can replace them.

Also, since it's a locally running Agent, it naturally excels at reading local files (documents, tables, images, etc.), as long as the LLM supports it.

Additionally, I will consider supporting advanced features like voice input later to improve user experience.

Summary

Shallow learning depends on input; deep learning depends on output. No matter how many moments you scroll through, how many articles and videos you watch, you only scratch the surface — you forget after watching. Only when you build these things step by step from scratch do you truly understand AI Agent and have the opportunity to enter this field. I myself am like this — initially heavy intake, then summarizing and organizing into a knowledge system, and finally practicing with a real project. Looking forward to you joining me in building Agents～