Agent分层记忆接入MCP，WebUI如何优化？

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

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

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

目录结构

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

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

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

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