有沒有想過與網頁聊天或直接與網頁交談？好吧，我建立了一個應用程式來做到這一點！這稱為“Talk-to-Page” 。您只需輸入一個 URL，即可開始與該頁面對話。
這是其工作原理的快速演示：
{% 嵌入 https://youtu.be/O0Y2WEqkros %}
我為什麼要建構這個？
聊天機器人很酷，但它們並不完美。大多數人不了解網頁的具體細節。如果您使用檢索增強生成（RAG）建立聊天機器人，通常會感覺受到限制。您將其設定為一頁，並且它被固定在該靜態內容中。
所以，我想：為什麼不讓它變得動態呢？
如果您可以為聊天機器人提供任何 URL 並讓它隨時適應會怎麼樣？
Talk-to-Page就這樣誕生了！
它是如何結合在一起的
我使用我的助劑入門套件作為基礎。這是我為使用 LangGraph 和 CopilotKit 建立具有 AI 代理程式的全端應用程式而建置的設定。
這是入門套件，如果您想查看的話：
{% 嵌入 https://github.com/kom-senapati/coagents-starter %}
後端使用FastAPI部署 LangGraph 代理，而前端則使用Next.js建置。
建構代理
第一步是建立代理。我遵循模組化方法，將其分解為較小的部分，例如狀態、節點和邊。您可以在此處查看資料夾結構：
我將my_agent重命名為rag_agent 。這意味著要更新各處的名稱—資料夾、檔案（如demo.py ）和配置（如langgraph.json和pyproject.toml ）。
更新內容的網址：
-
節點：我新增了一個名為
update_url的新節點，每當 URL 變更時，該節點都會更新代理程式的檢索器。 -
Edge：建立了一個名為
new_url的邊，用於偵聽「URL UPDATED」訊息並觸發update_url節點來更新檢索器。
只不過它是一個自我 RAG 特工。您可以在此處查看其教程和程式碼。
最終的代理圖如下所示：
建構使用者介面
使用者介面相當簡單，但我想讓它變得有趣。我沒有使用 CopilotKit 的內建副駕駛，而是建立了一個自訂聊天機器人介面。
您可以在這裡找到程式碼：
對於背景，我使用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 加上星標並在頁面上留言:)
{% cta https://github.com/CopilotKit/CopilotKit %} 明星 CopilotKit ⭐ {% endcta %}
{% cta https://github.com/kom-senapati/talk-to-page %} 為 talk-to-page 加上星標 🤝 {% endcta %}
關注我，了解更多這類內容！
原文出處：https://dev.to/komsenapati/building-talk-to-page-chat-or-talk-with-any-website-g0h
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式