构建 Talk-to-Page：与任何网站聊天或对话

CoAgents Starter

LangGraph工作室

故障排除

有没有想过和网页聊天，或者说，直接跟它说话？好吧，我开发了一个可以实现这个功能的应用！它叫做Talk-to-Page。你只需输入一个 URL，就可以和网页对话。

以下是其工作原理的快速演示：

我为什么要建造这个？

聊天机器人很酷，但并不完美。大多数聊天机器人并不了解网页的具体细节。如果你用检索增强生成 (RAG) 技术构建聊天机器人，它通常会感觉功能有限。你把它设置为只处理一个页面，它就只能处理静态内容了。

所以，我想：为什么不让它动态化呢？

如果你可以给聊天机器人任意的 URL，让它随时调整，会怎么样？

Talk-to-Page就是这样诞生的！

它是如何形成的

我使用了我的coagents-starter套件作为基础。这是我使用 LangGraph 和 CopilotKit 创建带有 AI 代理的全栈应用的一套工具。

这是入门套件，如果您想查看的话：

cd agent
poetry install

GROQ_API_KEY=...

poetry run demo

cd ./ui
pnpm i

GROQ_API_KEY=...

pnpm run dev

后端使用FastAPI部署 LangGraph 代理，而前端则使用Next.js构建。

构建代理

第一步是创建代理。我采用了模块化方法，将其分解成状态、节点和边等较小的部分。您可以在此处查看文件夹结构：

代理代码

我将其重命名my_agent为rag_agent。这意味着要更新所有地方的名称——文件夹、文件（如demo.py）和配置（如langgraph.json和pyproject.toml）。

网址更新内容：

• 节点：我添加了一个名为的新节点update_url，每当 URL 发生变化时，它就会更新代理的检索器。
• 边：创建一个名为“”的边new_url，用于监听“URL UPDATED”消息并触发update_url节点更新检索器。

但它是一个自 RAG 代理。你可以在这里查看它的教程和代码。

最终的代理图如下所示：

构建 UI

用户界面相当简单，但我想让它更有趣。我没有使用 CopilotKit 内置的 copilot，而是构建了一个自定义的聊天机器人界面。

您可以在此处找到代码：

自定义聊天界面

至于背景，我使用Magic UI 的 Retro Grid添加了复古网格背景。我还使用v0.dev实现了Matrix Rain 背景，当 URL 更新时，该背景会保持活动状态 5 秒。

语音交互：

为了获得比普通聊天机器人更好的体验，我添加了以下内容：

• 语音转文本以供用户输入。
• 文本转语音，实现 AI 响应。

所以现在，你真的可以跟网页对话了。是不是很酷？😉

让一切运转起来

入门套件已预配置 Tailwind CSS、Shadcn 和 CopilotKit。为了使代理正常工作，我刚刚在 中更新了代理名称ui/app/layout.tsx。

我的经历

开发这款应用的过程充满乐趣，收获颇丰。学习LangGraph和LangChain花了不少时间，但与 CopilotKit 的集成却出奇地顺畅。

非常感谢CopilotKit 文档，它让事情变得简单易懂！

这就是我构建Talk-to-Page 的方式！

你觉得这个项目怎么样？你会做类似的东西吗？告诉我！

祝您拥有美好的一天！下次再见！

如果您喜欢这个，请为 CopilotKit 加星标并参与讨论 :)

明星 CopilotKit ⭐

明星对话页面🤝

关注我以获取更多类似内容！