Build Full-Stack AI Agents with Custom React Components (CopilotKit + CrewAI)

Hey everyone👋

I manage the community at CopilotKit, a free and open-source framework for building intelligent companions and, in-app infrastructure.🤔

Think about it like this:🧐 CopilotKit allows your agents to take control of your application, communicate what its doing, and generate completely custom UI.

Check out CopilotKit's GitHub ⭐️

Build Full-Stack Agents

Atai, the Co-Founder and CEO of CopilotKit produced this video to showcase how simple it is to build agents using CrewAI and bring them into your app in easy-to-understand steps.

Agentic Apps

A new wave of Agent-Native apps has emerged - such as Replit's AI Agent, Vercel's new v0, and ChatGPT's Canvas.

These apps deeply integrate an AI agent into a native application, allowing for deep human/AI collaboration and human-in-the-loop flows.

In this video, we will show you how to add an agent to your app in just a few minutes.

Resources:

CopilotKit GitHub Repo

Follow CopilotKit on Twitter and say hi, and if you'd like to build something cool, join our Discord.

Timestamps if you want to jump around:

00:00 CoAgents intro with CrewAI
00:22 Use the new CLI tool to add Crews to your React app
02:09 Created App with Shared agent state
03:50 React component to render the agent streaming
06:04 Agentic Generative UI
06:25 The CrewAI feature viewer demo

Comments

[Anmol Baranwal]

A lot of people are going to build amazing stuff with this.

[Nathan Tarbert]

Totally agree Anmol!

[Shrijal Acharya]

Really awesome, Nathan! 👏🏻 I really want to try this one out.

[Shrijal Acharya]

And I really didn’t know that DEV allows embedding videos on the blog cover. 🫠

[Nathan Tarbert]

Actually, you can upload a video and give the description a blog format which is pretty neat!

[Shrijal Acharya]

Ohh, I see.

[Nathan Tarbert]

Thank you Shrijal!

I would love to get your feedback when you do.

[Bonnie]

Easy-to-understand walkthrough.

[Nathan Tarbert]

Thanks for your feedback, Bonnie!
Agreed, Atai is really good at breaking down complex programming architecture and simplifying it.

[Nathan Tarbert]

Thanks for your feedback Bonnie!

[覃巍]

that's great lesson

[Nathan Tarbert]

Thank you!

[David]

Nice walkthrough!

[Nathan Tarbert]

Thanks David!

[Parker]

can we achieve this without the Crewai enterprise version?

[Nathan Tarbert]

Yes you can Parker. You can use CrewAI's open source

[Mathew]

I'm liking the CLI ease of building a project similar to Shadcn

[Nathan Tarbert]

Hey Mathew, thanks for the feedback!

[henryjohn21]

Great video!

[Nathan Tarbert]

I agree, thanks Henry!

[silvanet]

This is pretty useless to me without captions. Sorry.

[Ettourach]

Great documentation but what is the principal benefice to creat a full stack ai agents??