2500 行代码，从命令行到 Web UI，从单文件到分层架构。 没耳听。 其实核心逻辑就是 1000 行而已。

一、 从“乱七八糟”到“勉强还能跑”的转变

我们一开始的版本，所有工具都塞在一个 里400 多行，越写越像一锅粥。为了不让同事直接把电脑砸了 我硬是把它拆成模块，按职责随手划分——后来啊是：看起来像是专业的项目结构，却依旧充满了“我到底在干嘛”的疑惑。

目录结构

web/
├── src/
│   ├── components/          # 对话区域、 消息气泡、侧边栏
│   └── hooks/               # WebSocket 封装
└── index.html

别问我为什么 components 里还有一堆 .css 和 .svg那是主要原因是我懒得再建子目录，我们都曾是...。

二、MCP 协议到底是什么玩意儿？

MCP本来是 Anthropic 提出的标准协议，用来让 Agent 能够「和外部工具打交道」。可惜我这把玩儿的方式更像是「把所有插件都塞进厨房， 嗯，就这么回事儿。 然后让它们一起做饭」——有时真的能吃，有时只能闻味道。

MCP 的「接入」示例

mcpServers : {
    context7 : { type : http , url : https://mcp.context7.com/mcp },
    chrome-mcp : { type : http , url : }
}

上面这段代码里 chrome-mcp 的 URL 我居然忘了填，这种「半成品」正好体现了「烂」的精髓——总有一天会报错，然后你再去找原因，说到底。。

三、Web UI 的「优化」到底有什么意义？

先说根本没有意义。主要原因是每次打开页面都能看到一大堆未被压缩的历史消息，这直接把 token 用光。于是我们只能硬压缩——把所有消息拼成一个巨大的字符串，再塞回去。下面就是压缩函数：，我懂了。

buildContextMessages {
    const messages = ;
    // 1. 系统提示词 + 长期记忆
    let fullSystemPrompt = systemPrompt;
    if  {
        fullSystemPrompt = `
${agentMd}


${systemPrompt}`;
    }
    messages.push;
    // 2. 会话摘要
    if  {
        messages.push({
            role: "system",
            content: `
${summary}
`,
        });
    }
    // 3. 最近的消息
    messages.push;
    return messages;
}

这段代码已经被 无数次每次改动都像是在给自己的脑子加糖。

情绪化吐槽：我真的受够了！🤬

每当浏览器卡住我就会对着屏幕喊：「别再给我发那 500 条废话！」可是系统根本不听，主要原因是它只知道「继续发送全部历史」。于是出现了下面这个：，我跟你交个底...

四、Agent 分层记忆到底怎么玩？

我无法认同... L1：长期记忆——存 JSON 到磁盘；L2：中期记忆——会话摘要；L3：短期记忆——最近几轮对话。按道理讲这样可以省 token，但实际操作时经常忘记把 L1 写回磁盘，于是重启后全都丢失。

// 简化版分层读取
async function getMemory {
    const longTerm = await readFile;
    const midTerm = await readFile;
    const shortTerm = recentMessages.slice;
    return { longTerm, midTerm, shortTerm };
}

P.S.: 别问我为什么长短期变量名这么随意，那是主要原因是我在写代码的时候正好喝咖啡喝到睡着了。

五、错误处理：我们真的在写 BUG 吗？🤔🤯🤦‍♂️

Llama 或 Claude 那些大模型有时候会吐出语法错误或死循环， 不夸张地说... 我只能靠下面这段「智能重试」来拯救它们：

async function robustCallTool {
    for  {
        try {
            const result = await callTool;
            return result;
        } catch  {
            console.warn;
            if  throw new Error;
        }
    }
}

不过实际运行时我经常看到控制台冒出「权限不足」之类的报错，然后只能手动去 .env 改配置 —— 真是一场“人与机器”的拉锯战。

六、 Web UI 那点破碎不堪的体验设计

• #UI Bug #1： 聊天窗口滚动条总是不跟随最新消息，需要手动滑到底部才能看到新内容；这让我每次都要"滚滚滚"三遍才满意。
• #UI Bug #2： 侧边栏按钮点击后没有任何视觉反馈， 好像按键根本不存在一样，导致用户误以为页面卡死。
• #UI Bug ##： 主题颜色随机切换， 每天都有惊喜——今天紫红配绿蓝，你敢相信吗？.
•  …还有更多未列举的奇葩细节等你自己去发现！😈💥💣
\*注：以上仅为个人调侃，请勿当真。

七、 相关产品对比表