I Built a News Agent in a Weekend to Test CopilotKit. Here's What Actually Happened.

Figma → Claude Code → three deployment platforms → one ghost component → one working dashboard

This wasn't a random experiment. I'd used CopilotKit before in a previous news agent built with FastAPI and React, and I wanted to go deeper — specifically to practice connecting it to an agent that also did data visualization. Deliberate skill-building. Controlled chaos. The result is live at news-agent-v2.pages.dev. It fetches daily tech content from four sources, stores trends over time in SQLite, and lets you query the data conversationally through a CopilotKit chat interface. February 28 to March 1. One long session across two days.

Here's what the app actually does, what broke spectacularly, and what I learned about CopilotKit as a UX tool worth recommending to clients.

What It Does

Every day, the agent fetches:

  • Hacker News Top 5 — ranked by score, with comment counts and author handles

  • Today's Spread — from TechCrunch, Wired, and The Hacker News: most recent, mid-day, and oldest article from the past 24 hours per source

Results accumulate in SQLite over time, which is what makes the dashboard interesting. You're not just seeing today — you're seeing patterns. Score over time, format distribution (personal vs. product update vs. technical), comments by post. All rendered with Recharts. The CopilotKit layer sits on top of this: a chat interface where you can ask things like "what was the top post this week?" and get an answer from the actual data, not a hallucination.

The Workflow: Figma First, Then Claude Code

I designed the UI in Figma before writing a line of code. This is how I work — I want to know what I'm building before I start building it. Then I handed the design to Claude Code and acted as creative director: reviewing output, catching drift, redirecting when needed. For the most part, this workflow is exceptional. Claude Code can move fast. The dashboard came together quickly once the architecture was clear.

Then came the chaos.

Everything That Broke (A Love Story)

Claude Code froze and took over my browser for 10 minutes. Not metaphorically. Literally commandeered it. I watched it work. This is fine and also slightly unhinged and I genuinely did not mind, after all it was just sitting there not doing anything.

Vercel had a broken GitHub connection. Not user error. Not a misconfiguration. Just... broken. No amount of redeploying, force pushing, or deploy hooks could fix it. I eventually gave up and switched to Cloudflare Pages, which worked immediately and I'm now a convert.

Railway kept building from the wrong folder. Until I manually set the root directory. Simple fix in retrospect. Not obvious in the moment at midnight.

SpreadGrid.jsx was built locally but never pushed to GitHub. This created a ghost component situation. The file existed on my machine, the code referenced it, GitHub had never seen it, the build was confused, and I spent about an hour figuring out why. The answer was embarrassingly simple. The hour was not.

This is the actual texture of building with AI tools right now. It's fast, it's powerful, and you will absolutely spend 40 minutes fighting a deployment pipeline at 1am.

What I Actually Learned About CopilotKit

The docs make setup sound simpler than it is. CopilotKit v2 routes through your own backend rather than a simple API key. This adds real complexity — you need to wire up the agent layer yourself, which means understanding the architecture before you can use the abstraction. Not a dealbreaker, but worth knowing before you start.

Once it's wired up, the chat interface drops in cleanly. The UI integration is genuinely smooth. It sits alongside existing components without feeling bolted on, which matters a lot for dashboards where the conversational layer should feel native, not like a widget someone added later.

The most compelling use case is internal tools. Specifically: dashboards where users need to ask questions about data rather than navigate through it manually. "What was the most commented post on Tuesday?" is a much more natural interface than clicking through filters. For client work involving ops dashboards, data-heavy tools, or anything where the user population isn't technical — CopilotKit is worth the setup complexity.

The Bigger Pattern

This project was, in a sense, a microcosm of everything I think about agentic UX. The agent runs in the background. It fetches, stores, aggregates. The human interacts with the output — through a dashboard, through a chat interface, through visualizations that make the patterns visible.

The autonomy is invisible. The experience is legible. That's the design goal.

CopilotKit is a useful tool for building toward that. It's not magic. The setup will humble you. But the mental model it encourages — conversational access layered onto existing data — is the right one for where AI interfaces are going. And don’t get me started on easy on the eyes UI that adapts to the rest of your colorscheme!

I'll use it again.

The live app is at news-agent-v2.pages.dev. Backend on Railway, frontend on Cloudflare Pages (RIP Vercel, you tried). Built with Claude Code over one very long weekend.

Next
Next

Claude Cowork GTM Workshop