夜雨聆风
今天记录一个更偏开发者、但上手门槛不算高的 AI 工具：Persona.js。它不是新的大模型，而是一个可以放进网页里的 AI Agent 聊天组件。你可以把它理解成：不想从零写聊天窗口、工具调用状态、语音、附件、审批按钮和 Agent 事件展示时，先用一个现成的前端外壳把体验搭起来。
为什么今天选它？一是 Hacker News 最近出现了 Persona.js 的 Show HN 讨论，关键词直接指向 AI Agent、WebMCP 和网页工具；二是它的 GitHub README 写得比较完整，提供了无框架 script 标签、Next.js、Hono、Express、LangGraph、OpenAI Agents 等示例；三是它适合做一个能看见结果的短教程：本地跑起来后，页面上会出现一个可交互的 AI 聊天助手。
这个工具适合谁
如果你正在做官网、产品后台、知识库页面、运营活动页，想加一个“问我任何问题”的 AI 助手，但又不想把 React 组件、流式输出、工具调用 UI、Markdown 安全渲染都重写一遍，Persona.js 就值得看一下。
它公开信息显示是一个 TypeScript 写的、零框架依赖的 AI chat widget，支持 SSE 流式响应、WebMCP/page tools、本地客户端工具、附件、语音、工具调用可视化和插件系统。也就是说，它更像一块可嵌入的 AI Agent UI 积木，而不是一个替你托管模型的完整平台。
准备工作
先准备三样东西：Node.js 20+、pnpm 或 corepack、一个能跑本地网页的终端。今天先跑官方 echo demo，不需要真实 API Key；如果后续接 OpenAI、Claude、DeepSeek 或自己的网关，再把密钥放进环境变量，千万不要写进前端代码。
如果你在国内网络环境访问 GitHub 或 npm 不稳定，可能需要切换网络或使用可信镜像。这个项目是开发工具，不建议上传敏感业务数据到陌生 Demo 页面。
5 分钟跑一遍
第一步，克隆项目并进入目录：
git clone https://github.com/runtypelabs/persona.git
cd persona
第二步，启用 corepack，让它帮你管理 pnpm 版本：
corepack enable
第三步，安装依赖：
pnpm install
第四步，启动官方本地 Demo：
pnpm dev
README 里写到，本地会启动代理服务和 Vite Demo。正常情况下你可以打开：
http://localhost:5173
第五步，在页面里找一个聊天组件示例。先不要急着接真实模型，先用 echo / hosted backend / script-tag 示例确认组件能打开、能输入、能收到响应。
第六步，看它的 examples 目录。普通网站可以先看 examples/echo-script-tag，Next.js 项目可以看 examples/ai-sdk-next，如果你已经在用 LangGraph，可以看 examples/langgraph-next。
第七步，准备接入自己的模型时，把密钥放在服务端：
export OPENAI_API_KEY="YOUR_API_KEY"
export ANTHROPIC_API_KEY="YOUR_API_KEY"
前端只调用你自己的后端接口，不要把真实 Key 放到浏览器里。
可复制的示例需求
你可以先让 AI 帮你生成一个接入说明，直接复制这段：
我有一个产品官网，想用 Persona.js 加一个右下角 AI 助手。请基于官方 examples/echo-script-tag，给我一个最小接入方案：包括 HTML 中要放什么 script、后端 SSE 接口怎么返回、如何把按钮文案改成“问问产品助手”，以及哪些配置不能暴露 API Key。
如果你是运营或产品同学，也可以把它交给开发同事：目标不是“今天就上线复杂 Agent”，而是先把聊天入口、基础问答和工具调用状态跑通。
成功后应该看到什么
成功启动后，你应该能在本地页面看到一个聊天入口，点开后可以输入问题，助手会流式返回内容。切换不同示例时，可能还能看到工具调用、附件、语音、侧边栏或全屏布局。只要本地 Demo 能正常热更新，就说明第一步环境没有问题。
常见坑
第一，Node 版本太低会导致安装失败，优先升级到 Node 20+。第二，pnpm 依赖安装慢，多半是网络问题，不要误以为项目坏了。第三，真实模型密钥必须放服务端，前端页面里只能出现临时 token 或自己的后端地址。第四，WebMCP/page tools 听起来很酷，但涉及页面操作权限，正式上线前要明确哪些动作需要用户确认。
继续尝试的 3 个场景
1. 给公司官网加一个产品问答助手，把 FAQ 和文档接到后端知识库。
2. 给内部运营后台加一个 AI 助手，让它解释报表字段、生成活动文案草稿。
3. 给自己的开源项目文档页加一个“问文档”入口，再逐步接 RAG 或 LangGraph。
今天先把 Persona.js 记下来。它的价值不是替代大模型，而是把 AI Agent 在网页里的“可用界面”先搭好。明天继续试一个新的 AI 工具。
