AgentJSX：用 JSX 搭 AI Agent，会写 React 就会搭智能体

为什么 AI Agent 开发突然变得像写 React 一样简单？

最近半年，AI Agent 赛道火得离谱。但真正动手做过的人都知道：把工具调用、子代理、上下文管理、MCP 集成拼在一起，代码很快就会变成一坨难以维护的意大利面。

今天介绍一个来自 Smithery 团队 的开源项目 AgentJSX，它试图用前端开发者最熟悉的 JSX 语法，把 AI Agent 的复杂度封装成可复用的组件。

它到底是什么？

AgentJSX 是一个运行时无关的 Agent 框架。你不需要绑定某个特定平台，而是在 JSX 里声明式地拼出一个智能体：给它角色、工作区、技能、MCP 服务器、待办列表、子代理、记忆，甚至上下文压缩策略。

比如下面这段代码，就定义了一个具备工作区、Skills、两个 MCP 服务器、待办列表、子代理和上下文压缩的完整 Agent：

<Agent>
  <Block name="role">You are a coding assistant.</Block>
  <Workspace root="./" />
  <Skills root="./skills" />
  <McpServer name="deepwiki" url="https://mcp.deepwiki.com/mcp" />
  <Todo />
  <Subagent>
    <Workspace root="./" />
  </Subagent>
  <Compact strategy="summary" threshold={4000}>
    <Messages />
  </Compact>
</Agent>

为什么值得关注？

• 前端人零门槛：会写 React 就能上手，不需要重新学一套 DSL。
• 组件化思维：Workspace、Skills、McpServer、Todo、Subagent 都是独立组件，可插可拔。
• 跨运行时：支持 Node.js、Bun、浏览器，甚至能在浏览器里用 just-bash 跑 Workspace。
• 原生 MCP 支持：一行 <McpServer /> 就能接入任何 Model Context Protocol 服务。
• 可扩展：用 defineTool 自定义工具，emitFragment 注入提示片段，能力组件和 Shaper 组件各司其职。

适用场景

如果你正在做以下任何一件事，AgentJSX 都值得列入候选方案：

• 想快速原型一个带工具调用和子代理的 Coding Agent
• 团队主力是前端工程师，希望降低 Agent 开发的认知门槛
• 需要在浏览器环境里跑一个具备文件读写能力的 Agent
• 想用组件化方式管理复杂 Agent 的上下文和工具集

总结

AI Agent 框架已经进入「拼积木」时代，AgentJSX 把积木做成了前端人一眼就能看懂的 JSX 组件。它的 Star 数还在快速增长，生态也在快速扩张。如果你对「用前端思维做 Agent」这件事感兴趣，强烈建议去 GitHub 上看一眼。

GitHub 地址：https://github.com/smithery-ai/agentjsx

GitHub: https://github.com/smithery-ai/agentjsx