DEV Community

Cover image for Easily Build a UI for Your AI Agent in Minutes (LangGraph + CopilotKit)⚡️

Easily Build a UI for Your AI Agent in Minutes (LangGraph + CopilotKit)⚡️

Bonnie on March 20, 2025

TL;DR In this article, you will learn how to build an agent-native research canvas app that combines human-in-the-loop capabilities usin...
Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Awesome! 🔥

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Anmol.

Collapse
 
steven0121 profile image
Steven

I'm very familiar with LangGraph, LangChain, and LangSmith but hadn't heard of CopilotKit. I think this is going to save me!

Collapse
 
the_greatbonnie profile image
Bonnie

Let me know how it turns out, Steven.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hey Steven, I'm with the CopilotKit team and I would love to get your feedback when you start building!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hey Bonnie, thanks for such a detailed walkthrough with great visuals!

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Nathan.

I had fun working on this article.

Collapse
 
vertical-click profile image
Ajay Panchal

This is a great guide! CopilotKit looks like a powerful tool for building AI agent UIs. Thanks for the clear explanation. Visit. personalized dog harness

Collapse
 
the_greatbonnie profile image
Bonnie

I am happy to hear that, Ajay.

Collapse
 
johncook1122 profile image
John Cook

Easy to understand, good descriptive images, this is a great guide.

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, John.

Collapse
 
morgan-123 profile image
Morgan

Nice!

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Morgan.

Collapse
 
johnywalker21 profile image
johny walker

Nice UI

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Johny.

Collapse
 
trent0123 profile image
Trent

Thanks for sharing!

Collapse
 
the_greatbonnie profile image
Bonnie

You are welcome, Trent.

Collapse
 
hexa_1 profile image
Veilgen Security

Great and insightful article! I really liked the way you explained building a UI for AI agents using LangGraph and CopilotKit. Thanks for sharing this detailed guide

Collapse
 
the_greatbonnie profile image
Bonnie

I am happy to hear that you liked the article.

Collapse
 
ferguson0121 profile image
Ferguson

I've been saying this for a while, hoping CopilotKit expands to other agentic frameworks, particularly CrewAI. That's what my company uses but I really need this

Collapse
 
the_greatbonnie profile image
Bonnie

The CopilotKit team has already released an EARLY ACCESS to start building with CrewAI!

I think @nathan_tarbert can add more to this.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hey Ferguson, Bonnie is correct. We've released early access to CrewAI support and would love your feedback.
Please reach out to me on Twitter and I will give you access.

Collapse
 
henryjohn21 profile image
henryjohn21

Great guide!

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, Henry.

Collapse
 
homeid_homeid_4dff09bbb47 profile image
HomeID HomeID

Awesome content <3

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, HomelD.

Collapse
 
abrahamn profile image
Abraham

Nice article. I think you didn't mention what your langsmith api key is for

Collapse
 
the_greatbonnie profile image
Bonnie

It is for connecting to LangGraph Studio.

Collapse
 
fernandezbaptiste profile image
Bap

Amazing project, as usual!

Collapse
 
the_greatbonnie profile image
Bonnie

I am happy to hear that, Bap.

Collapse
 
albumcoverai profile image
AlbumCover AI

This 100% deserved the attention it got! It was really interesting to me.

Collapse
 
the_greatbonnie profile image
Bonnie

I am happy to hear you found the article interesting.

Collapse
 
williamhenry21 profile image
williamhenry21

Really cool!

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, William.

Collapse
 
samcurran12 profile image
Sammy Scolling

Gonna play around with this

Collapse
 
the_greatbonnie profile image
Bonnie

Let me know how you find it.

Collapse
 
johnwoods12 profile image
johnwoods12

Awesome!

Collapse
 
the_greatbonnie profile image
Bonnie

Thanks, John.

Collapse
 
glinzco profile image
GlinzCO

Nice project. Thanks for sharing. However, do you have an idea why I get an error: " SyntaxError: The requested module '@trpc/client' does not provide an
export named 'unstable_httpBatchStreamLink'" whenever I try to create the tunnel?

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hi @glinzco, I'm with the CopilotKit team. I would love to help you out with this.

For starters, did you create a Copilot Cloud account?

Next, did you download the LangGraph CLI? That will be running in a separate terminal from the tunnel.

Collapse
 
glinzco profile image
GlinzCO

Hi Nathan, appreciate your help!

Yes, I have a CC account (and API Key) and LangGraph CLI installed.

Here some more error details: agent % npx copilotkit@latest dev --port 8123
Need to install the following packages:
copilotkit@0.0.22
Ok to proceed? (y) y

SyntaxError: The requested module '@trpc/client' does not provide an export named 'unstable_httpBatchStreamLink'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
flvio_6d301e9e675e8f8e66 profile image
Flávio

I'm getting the same error when i run this command:
npx copilotkit@latest dev --port 8123
;(

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hi @flvio_6d301e9e675e8f8e66, I'd love to help you out. I can help you debug it. I commented above, did you complete those steps?

Thanks