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:

Demo

---

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:
Starter Kit

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:
Agent Code

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.

You can find the code here:
Custom Chat 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.

Big thanks to the CopilotKit documentation for making things easy to follow!

---

That’s how I built Talk-to-Page!

What do you think about this project? Would you build something similar? Let me know!

Have a great day! Till next time!

If you loved this, please star CopilotKit and talk-to-page :)

Star CopilotKit ⭐ | Star talk-to-page 🤝