Building Talk-to-Page: Chat or Talk with Any Website
Ever thought of chatting with a webpage or literally talking to it? Well, I built an app that does just that! It’s called Talk-to-Page. You simply input a URL, and you can start a conversation with the page.
Here’s a quick demo of how it works:
Why Did I Build This?
Chatbots are cool, but they’re not perfect. Most don’t understand the specific details of a web page. If you build a chatbot with Retrieval Augmented Generation (RAG), it often feels limited. You set it up for one page, and it’s stuck with that static content.
So, I thought: Why not make it dynamic?
What if you could give the chatbot any URL and let it adapt on the go?
That’s how Talk-to-Page was born!
How It Came Together
I used my coagents-starter kit as the foundation. It’s a setup I built for creating full-stack apps with AI agents using LangGraph and CopilotKit.
Here’s the starter kit, in case you want to check it out:
The backend uses FastAPI for deploying the LangGraph agent, while the frontend is built with Next.js.
Building the Agent
The first step was to create the agent. I followed a modular approach, breaking it into smaller parts like state, nodes, and edges. You can see the folder structure here:
I renamed my_agent to rag_agent. This meant updating the name everywhere—folders, files (like demo.py), and config (like langgraph.json and pyproject.toml).
Url Updating stuff:
Node: I added a new node called update_url that updates the agent’s retriever whenever the URL changes.
Edge: Created an edge called new_url that listens for a "URL UPDATED" message and triggers the update_url node to update the retriever.
Except that it's a self-RAG agent. You can check out its tutorial and code here.
Here’s what the final agent graph looks like:
Building the UI
The UI was fairly straightforward, but I wanted to make it interesting. Instead of using CopilotKit’s built-in copilot, I built a custom chat-bot interface.
For backgrounds, I added a retro grid background using Magic UI’s Retro Grid. I also implemented a Matrix Rain background using v0.dev which remained active for 5s when the URL was updated.
Voice Interaction:
For a better experience than that of a normal chatbot, I added the following:
Speech-to-text for user input.
Text-to-speech for AI responses.
So now, you can literally talk to a webpage. Cool, right? 😉
Getting It All Working
The starter kit comes pre-configured with Tailwind CSS, Shadcn, and CopilotKit. For the agent to work, I just updated the agent name in ui/app/layout.tsx.
My Experience
Building this app was a fun and rewarding experience. Learning LangGraph and LangChain took some time, but the CopilotKit integration was surprisingly smooth.
