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 CopilotKit

Awesome! 🔥

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

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 CopilotKit

Let me know how it turns out, Steven.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert CopilotKit

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

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 CopilotKit

I am happy to hear that, Ajay.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert CopilotKit

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

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, Nathan.

I had fun working on this article.

Collapse
 
trent0123 profile image
Trent

Thanks for sharing!

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

You are welcome, Trent.

Collapse
 
morgan-123 profile image
Morgan

Nice!

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, Morgan.

Collapse
 
johnywalker21 profile image
johny walker

Nice UI

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, Johny.

Collapse
 
johncook1122 profile image
John Cook

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

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, John.

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 CopilotKit

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 CopilotKit

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
 
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 CopilotKit

I am happy to hear that you liked the article.

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 CopilotKit

It is for connecting to LangGraph Studio.

Collapse
 
homeid_homeid_4dff09bbb47 profile image
HomeID HomeID

Awesome content <3

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, HomelD.

Collapse
 
fernandezbaptiste profile image
Bap

Amazing project, as usual!

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

I am happy to hear that, Bap.

Collapse
 
henryjohn21 profile image
henryjohn21

Great guide!

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, Henry.

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 CopilotKit

I am happy to hear you found the article interesting.

Collapse
 
samcurran12 profile image
Sammy Scolling

Gonna play around with this

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Let me know how you find it.

Collapse
 
williamhenry21 profile image
williamhenry21

Really cool!

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

Thanks, William.

Collapse
 
johnwoods12 profile image
johnwoods12

Awesome!

Collapse
 
the_greatbonnie profile image
Bonnie CopilotKit

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 CopilotKit

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 CopilotKit

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