DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Nathan Tarbert for CopilotKit

Posted on • Edited on

87 13 13 10 11

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

Top comments (26)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

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

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Totally agree Anmol!

Collapse
 
shricodev profile image
Shrijal Acharya

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

Collapse
 
shricodev profile image
Shrijal Acharya

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

Collapse
 
nathan_tarbert profile image
Nathan Tarbert • Edited

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

Thread Thread
 
shricodev profile image
Shrijal Acharya

Ohh, I see.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thank you Shrijal!

I would love to get your feedback when you do.

Collapse
 
the_greatbonnie profile image
Bonnie

Easy-to-understand walkthrough.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

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

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks for your feedback Bonnie!

Collapse
 
_ca7f713f441564c2098ea2 profile image
覃巍

that's great lesson

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thank you!

Collapse
 
david-723 profile image
David

Nice walkthrough!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks David!

Collapse
 
parkerproject profile image
Parker

can we achieve this without the Crewai enterprise version?

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

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

Collapse
 
mathew00112 profile image
Mathew

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

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hey Mathew, thanks for the feedback!

Collapse
 
henryjohn21 profile image
henryjohn21

Great video!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

I agree, thanks Henry!

Collapse
 
silvanet profile image
silvanet

This is pretty useless to me without captions. Sorry.

Collapse
 
ilyas_08 profile image
Ettourach

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide