About: Hi, I'm K Om Senapati, a 2nd-year B.Tech CSE student at OUTR, Bhubaneswar, and a Python developer passionate about hackathons, teamwork, and exploring new technologies.
Location:
Bhubaneswar, India
Joined:
Sep 5, 2023
Building Talk-to-Page: Chat or Talk with Any Website
Publish Date: Jan 6
102 18
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.
Technically, WebBaseLoader allows you to fetch and process web pages, but whether you're allowed to do so legally depends on the website’s policies and laws in your jurisdiction.
Legality depends on various factors like ToS (Terms of Service), Robots.txt file, other laws for the particular website.
Nice project!!
Starred! ⭐