K Om Senapati

Posted on Jan 6

Building Talk-to-Page: Chat or Talk with Any Website

#coagents #copilotkit #nextjs #langchain

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:

kom-senapati / coagents-starter

🤖 Starter kit for building agentic full-stack apps

CoAgents Starter

This example contains a simple starter project.

These instructions assume you are in the coagents-starter/ directory

Running the Agent

First, install the dependencies:

cd agent
poetry install

Then, create a .env file inside ./agent with the following:

GROQ_API_KEY=...

IMPORTANT: Make sure the OpenAI API Key you provide, supports gpt-4o.

Then, run the demo:

poetry run demo

Running the UI

First, install the dependencies:

cd ./ui
pnpm i

Then, create a .env file inside ./ui with the following:

GROQ_API_KEY=...

Then, run the Next.js project:

pnpm run dev

Usage

Navigate to http://localhost:3000.

LangGraph Studio

Run LangGraph studio, then load the ./agent folder into it.

Make sure to create teh .env mentioned above first!

Troubleshooting

A few things to try if you are running into trouble:

Make sure there is no other local application server running on the 8000 port.
Under /agent/my_agent/demo.py, change 0.0.0.0 to 127.0.0.1 or to localhost

View on GitHub

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 🤝

Follow me for more content like this!