用 eve 和 TanStack Start 构建生成式 UI 网页聊天

基于 eve 和 TanStack Start 构建的网页聊天，智能体可以用生成式 UI（如表格和仪表盘）进行回复。问它“帮我找最新的 Vercel 博客文章”，智能体就会搜索网络，然后返回一排结果卡片，每张卡片都带有预览图和摘要。

快速开始

Vercel 的项目设置流程会在你的 Git 账户中创建一个仓库，并创建一个 Vercel 项目。随后系统会提示你添加以下环境变量：

环境变量	要输入的内容
`EVE_ACCESS_PASSWORD`	访客在开始聊天前需要输入的密码。把它分享给应当拥有访问权限的人。

部署完成后，打开部署 URL 并输入密码。然后向智能体提出一个需要网络搜索的问题，例如“帮我找最新的 Vercel 博客文章”。

技术栈

层级	技术
智能体框架	eve
生成式 UI	json-render
沙箱	Vercel Sandbox
部署	Vercel Services
前端框架	TanStack Start
数据表格	TanStack Table
键盘快捷键	TanStack Hotkeys

聊天的工作原理

智能体位于 agent/，聊天位于 apps/web/。它们通过 Vercel Services 一起部署在同一个项目中，而 vercel.ts 将聊天的服务包装在 withEve 中。

让智能体查找最新的 Vercel 博客文章，它会先搜索网络，然后以卡片形式展示。当它需要你的输入时，会用简短的表单来询问。你可以重新加载页面以便稍后回到对话，也可以把链接分享给任何拥有密码的人。

工具	文件	聊天展示的内容
`render_ui`	render_ui.ts	来自固定目录的结果卡片、指标、表格和其他组件
`ask_question`	ask_question.ts	可供选择的选项，或用于输入答案的字段
`approval_demo`	approval_demo.ts	在运行前请求你的批准

访问控制

未登录的访客会被引导到登录页面，输入在 EVE_ACCESS_PASSWORD 环境变量中设置的密码。请选择一个较长的随机密码，例如 openssl rand -base64 32 的输出。所有拥有该密码的人都被同等信任，因此只把它分享给可以互相看到彼此聊天的人。

在你设置 EVE_ACCESS_PASSWORD 之前，登录页面会要求你进行设置。若要用 Clerk、Better Auth 或其他身份验证提供商替换密码，请参阅自定义指南中的更改谁可以使用聊天。

本地开发

使用 Node.js 24 和 pnpm。安装 Vercel CLI，然后克隆你的仓库并运行：

pnpm install
vercel link
vercel env pull .env.local
pnpm dev:app

当 vercel link 提示你时，选择你已部署的项目。vercel env pull .env.local 会将你项目的开发环境变量保存到 .env.local。

pnpm dev:app 会通过 vercel dev 同时启动聊天和智能体，并像部署时一样将 /eve/v1/* 请求路由到智能体。打开它打印出的 URL 并发送一条消息。当 EVE_ACCESS_PASSWORD 未设置时，聊天无需密码即可打开。若想在终端中与智能体聊天，请运行 pnpm dev:agent。

在部署之前，检查你的更改并确认智能体和 Web 应用能够构建：

pnpm validate
pnpm build

使用 pnpm fix 应用自动格式化和 lint 修复。当检查通过后，使用以下命令部署：

vercel deploy --prod

自定义

自定义项	位置
人设和回复风格	agent/instructions.md
工具	agent/tools/
智能体可以渲染的组件	agent/lib/ui-catalog.ts 和 apps/web/app/_components/ui-registry.tsx
聊天界面	apps/web/app/_components/

有关自定义 agent 的更多方式，包括添加组件、使用你自己的身份验证提供程序，以及连接另一个 eve agent（例如 eve Data Analyst Template），请参阅 CUSTOMIZATION.md。

用 eve 和 TanStack Start 构建生成式 UI 网页聊天

快速开始

技术栈

聊天的工作原理

访问控制

本地开发

自定义

资源