# 自己写了一个 Claude.ai Agent 前端之后，对 Agent 的一些想法

GitHub: github.com/piglet12138...

在线体验: claude.yaoyuheng2001.me

去年开始用 Claude.ai，觉得它的 Agent 体验做得很好------你问一个问题，它会自己决定要不要搜索、要不要写代码、要不要生成文档。整个过程不需要你指挥，它自己来。

后来想在自己的服务器上跑一个类似的东西，看了一圈 Open WebUI、LibreChat，都有点重。于是自己写了一个。

写完之后，对"AI Agent"这个词有了一些不太一样的理解。先放几个实际运行的截图，然后聊聊我的想法。

实际效果

搜索 + 深度阅读

"最近 OpenAI 和 Google 在 AI Agent 方面有什么新动作？帮我梳理一下"

模型自己搜了两次（不同关键词），读了 4 篇全文，然后开始回答。这个过程没有预定义的流程------不是我在代码里写"先搜再读再答"，是模型自己判断需要搜索，搜完觉得不够又换了个角度搜了一次。

搜索 + 代码执行 + 可视化

"用 Python 生成一个 2020-2025 年全球 AI 投资额的可视化图表"

这个过程挺有意思。模型先搜了真实数据，然后试着用 Python 画图，发现环境里没有 matplotlib，就自己换了方案用 HTML + Chart.js 做了一个交互式图表。截图里那个"执行出错"就是它第一次尝试失败的记录。

先问再写

"帮我写一份「从零搭建个人 AI 助手」的技术博客，要有架构图和代码示例"

模型没有直接开写。它先反问了几个问题------目标读者是谁、技术栈偏好、篇幅和深度。这些问题以可点击的选项卡形式呈现，选完之后才开始生成。

这个行为是模型自己产生的，我没有在 prompt 里写"遇到模糊需求要先提问"。

交互式选项

模型可以生成结构化的选项卡，用户点选后自动提交。这让对话从"我说你听"变成了双向协作------模型主动引导用户明确需求，而不是猜。

61 页白皮书

"写一个完整的 AI 行业白皮书"

这个功能是多个子 Agent 并行写各章节，最后汇编成完整文档。15 章，61 页，右侧可以预览和下载 DOCX。老实说这个功能还不太稳定，偶尔会卡住，但跑通的时候效果不错。

写完之后的一些想法

关于 Agent 框架

写这个项目之前，我以为 Agent 的核心难点在"编排"------怎么设计状态机、怎么定义工具选择策略、怎么处理多 Agent 协作。这也是 LangChain、LangGraph 这些框架在解决的问题。

写完之后发现，至少在单 Agent 场景下，核心循环非常简单：

arduino 复制代码

while (模型没有返回 end_turn) {
  把对话历史发给模型
  模型决定调用哪个工具（或者直接回答）
  执行工具，把结果加入对话历史
}

我的整个 agentic loop 大概 100 行。没有状态机，没有决策树。模型自己决定什么时候搜索、什么时候写代码、什么时候停下来。

这让我意识到一件事：很多编排逻辑存在的原因，是为了补偿模型判断力的不足。 如果模型足够好（比如 Claude Opus），你给它工具描述和目标，它自己能规划出合理的步骤。你不需要在代码里告诉它"搜索完要读全文"------它自己会意识到摘要不够深入。

当然这不是说框架没用。如果你需要多 Agent 协作、复杂的审批流程、或者要兼容能力较弱的模型，框架的价值就体现出来了。但对于"一个 Agent + 几个工具"这种场景，原生 API + 一个循环就够了。

搜后深读

这是我觉得效果提升最明显的一个决策。

大部分 AI 搜索的做法是：搜索 → 拿到摘要 → 基于摘要回答。但摘要的信息密度很低，经常答非所问。

我的做法是：搜索后自动抓取前几条结果的完整网页内容（每页截取 6000 字），模型基于全文回答。质量差距很大。

代价是 token 消耗高，所以做了一个 80K token 的预算管理------超了就压缩早期轮次的上下文。

关于技术选型

整个项目的前端是一个 app.js + 一个 styles.css，没用 React。后端是一个 server.mjs，数据存 SQLite。跑在 128MB 的 VPS 上。

不是说这些选择有多高明，只是对于一个人的 side project，简单的技术栈让我能快速迭代。改完代码 scp 到服务器直接生效，不需要构建、不需要 Docker。当然代码组织不如框架清晰，这是取舍。

部署

bash 复制代码

git clone https://github.com/piglet12138/lite-claude-ui.git
cd lite-claude-ui
npm install
cp .env.example .env  # 填入你的 Anthropic API Key
npm start             # → http://localhost:3040

支持 Anthropic 官方 API 和任何兼容端点。128MB 内存就能跑。

这个项目是我一个人用 Claude Code 写的，bug 还有不少，在持续迭代中。

如果你对"用最简单的方式实现 Agent"这个思路感兴趣，欢迎试用和提 Issue。觉得有用的话给个 Star，谢谢。

GitHub: github.com/piglet12138...