Fullstack NextJS & CrewAI Crash Course For Beginners [Source Code Included]
ฝัง
- เผยแพร่เมื่อ 9 มิ.ย. 2024
- 🤖 Download the Source Code Here:
brandonhancock.io/nextjs_crew...
Don't forget to Like and Subscribe if you're a fan of free source code 😉
📆 Need help with CrewAI, join our FREE Skool Community:
skool.com/ai-developer-accele...
In this video, you're going to learn how to build a backend application to launch your Crews. You'll also learn how to build a NextJS frontend application to pass data to your Crews and view the results of your Crews as they perform their duties.
📰 Stay updated with my latest projects and insights:
LinkedIn: / brandon-hancock-ai
Twitter: / bhancock_ai
Checkout my other CrewAI Tutorials:
- CrewAI Tutorial: Complete Crash Course for Beginners - • CrewAI Tutorial: Compl...
- CrewAI Tutorial for Beginners: Learn How To Use Latest CrewAI Features - • CrewAI Tutorial for Be...
- How To Connect Local LLMs to CrewAI [Ollama, Llama2, Mistral] - • How To Connect Local L...
Resources:
- Create API Key in google cloud: console.cloud.google.com/apis...
- Enable TH-cam Data v3: console.cloud.google.com/apis...
Timestamps
00:00:00 Introduction
00:00:12 Application Overview
00:02:34 Application Architecture
00:05:27 Project Setup
00:09:01 Install BE Dependencies
00:11:27 Setup api.py
00:22:12 Setup crew.py
00:26:48 Setup jobs_manager.py
00:35:17 Setup agents.py
00:44:31 Setup Tasks & Pydantic Models
01:03:16 Kickoff Crew
01:08:36 Setup api.py - Fetch Crew
01:13:30 Setup TH-cam Search Tool
01:21:18 Setup Serper Search Tool
01:23:20 BE Debugging
01:27:25 Setup Frontend NextJS Application
01:37:18 Setup Header.tsx
01:40:36 Setup Page Layout
01:43:27 Create InputSection.tsx
01:57:23 Setup Right Column Page Layout
02:00:46 Create useCrewHook.tsx
02:16:06 Update CORS Policy In Flask App
02:19:02 Continue Building useCrewHook.tsx
02:28:18 Create EventLog.tsx
02:35:14 Create FinalOutput.tsx
02:48:28 Outro - วิทยาศาสตร์และเทคโนโลยี
![I Automated My YouTube Channel With CrewAI [Free Source Code Included]](http://i.ytimg.com/vi/OumQe3zotGU/mqdefault.jpg)
![[Live] : ONE 167 วันนี้!! "ตะวันฉาย vs โจ"](http://i.ytimg.com/vi/D9_dvfIa6Ao/mqdefault.jpg)
crewAI creator here, I love this! So good!! I'd love to see a version of this using crewAI+, let's make sure to get you access :D
Thanks João! Thanks for making CrewAI so awesome!
And, I just heard about CrewAI+ the day after I launched this TH-cam video. I’m sure CrewAI+ will make building full stack apps 10x easier!
Agreed hands down best leap forward for me. I’m not an expert but have been doing this stuff for years and this video taught me things. I am very impressed with your entire channel tbh. Keep it up bro you are doing a great job.
@@bhancock_ai @BuildNewThing What is CrewAI+ (I hadn't heard of it)
hey let me know! id love to test out crewAI+
Yep he is top notch... him and Praison make everything look simple while driving 120mph
Waiting days for this to come out! Thanks man! 🎉
Thanks Brandon for the great content, I started watching your tutorials this week. And created ai agents that could help me do a app store review analysis today. Just when I think about how to create a frontend you drop this video. Looking forward to see more from you
Thanks Brandon. This is exactly what I was looking for. I remember asking for an event based / workflow driven AI application 🙌🏽
Brandon. I can't express enough of how much I appreciate your work and lessons for all of us. Your videos are better than anything I have experienced online, learning wise. Please keep doing what you do and you'll grow an army of followers and future AI devs. Could you , when time is right, put something similar to this tutorial but with FastAOI instead of Flask? Anyway, I think that Fulstack project that contain (CrewAI/LangGraph + Fastapi + NextJS + Neo4j + Vercel + Stripe and maybe Firebase) could be an excellent starting point for each and one of your channel viewers . 1 such project could change everything to almost everyone here.. Well, plus a lot of dedication and little of luck :). Thank you in advance
Thanks Brandon! I love to see your videos and hear
Thank you! I have a lot more videos in store for you guys!
I been watching this since the first day release .still trying to experiment with it . super great project.
I was eagerly waiting for this after the announcement . Thankyou so so much.
Love to hear it man! These AI tools are amazing! I have a lot more in store for you guys.
If you have any video requests, please let me know!
Beautiful! THanks for the inside look!
I've wanted to make this video for a long time so I hope you guys like it!
Thanks for all your hard work, All The Best
absolute gold. great tutorial. thanks for offering it.
AWESOME!!!!!!!!!!!!!
Great content, your videos are very detailed. Thanks for sharing
Thank you so much for sharing your experience and knowledge, Sir.
Thanks for great tutorial. We need more crewai + nextjs projects !!
It would be really cool if you could also show us beginners on how to actually deploy the project on vercel
Cool , started learning about the topic
Thank you, much appreciated fr
It would be great. For example, I use low code tools for the front end, so if you were part of the construction of the endpoints and deploying it to the cloud on Crewai's part, it would be amazing. It is free for anyone who wants to use the API wherever they want.
Yay!! Thank you so much!
Thanks Posh!
Awesome! You should definitely publish a completed version including cloud hosting (i.e. Vercel) and potentially optimising/analysing the running cost.
Great suggestion! I'm going to wait a little bit on this one because I think CrewAI is making some big changes which will make it super easy for us to deploy it to the cloud.
I post updates about what I'm building in my Skool community so feel free to join to get access to my projects before I release them here on TH-cam:
www.skool.com/ai-developer-accelerator/about
Amazing good tutorial!! One question: Is it possible to get an output of all the text that CrewAI sends to the model, to use it for fine-tuning local LLMs?
This is awesome! Exactly what I've been looking for 👏👏 . I am thinking on how can I integrate human feedback in the loop using crewAI and get the response from the front end, crewAI provides the tool called "Human" but how can I connect that tool, or a similar custom one with the front end to receive the feedback needed?
Another Excellent Tutorial from Brandon!
What Flowchart Diagram Editor /Presenter did you use?
ExcaliDraw
Is it possible to create a crew that creates web sites? Creating files like css, javascript and so on...
this is great ı think you should make a video about production ready ai agent app with next js and how can we deploy this
What extension are you using for autocomplete?
Hey. What extension do you have that when you type it automatically writes you the code. It stats in grey and if you like it just tab to accept?
@codewithbrandon , @BuildNewThings - This is excellent , as I was able to implement more crews on similar lines via FAST APIs. One question though if there is a human input require how can we handle that situation when we use NextJS or any other web frontend for that matter ? In CrewAI can I control human input via an API or something ? Do I need to use websockets , but if so where will I hook that into crewai
That zoom sound effect 🔫
Nice
Amazing
Thanks you so much! This took a lot more time than I expected so I'm glad you guys like it!
Amazing content, just found you channel. If you have ever time please revisit Assistant API with their new changes and maybe swap out Prisma for Drizzle and Planetscale for some other DB, since that seems to be the "trend" now lol. Other than that keep it up!
Does the API has rate limits?
Hi Brandon, I cannot read the bottom line of code @ the 34.33mins mark. Could you please tell me what the code is there. Thanks mate👍👍
pls can i used crewai in node?
need some more interesting unique projects using crewai + nextjs
Brandon drops a 💣
Y'all are the 💣!
Oh right cool
Hello, can you please guide me how to build the following “mock interview” application?
The app takes both resume and the job description and then starts asking questions!
Hey! I think you could build an app like that using the ChatGPT OpenAI API.
You would need to do a little bit of prompt engineering but it shouldn't be too difficult.
Feel free to join our free Skool community and we'll be able to help you out in more detail there:
www.skool.com/ai-developer-accelerator/about
where do you deploy the python app?
Great question! I wanted to create this video to teach you guys the fundamentals of building out the app.
If enough people ask for it, I'll make another video teaching you guys how to deploy everything to the cloud.
Yes how to deploy an app with UI. please it would be very helpful,,Thanks for free knowledge Brandon🎉
wowww, today i tried to start a project like this. Creating an api to use crewAI via frontend. This video will so helpful
I read your mind 😜
Please let me know if you have any questions and please keep me posted on what you build!
If you run into any issues, feel free to join the Skool community! We'd be happy to help!
www.skool.com/ai-developer-accelerator/about
Would it be easier to use FastAPI instead of Flask?
Potentially. I've just been using Flask for much longer so I'm more familiar with it.
Feel free to try out FastAPI and let me know if you notice any differences in the setup or speed.
Your video came out without subtitles, you could activate it later.
Why don`t you provide the direct link to github, same as other do ?
You could create a tool to dub your videos into any language, we are lacking this content in Brazilian Portuguese, and we have a huge technology market here.
Great idea! Out of curiosity, do you know if there are any commercial apps that already do this? I'd be curious to know how much they cost.
okay so this is what missing in this AI space of agentic applications... A good tutorial
* picking a use case,
* showing a build,
* demonstrating the process,
* deploying and testing...
* using
and now of course we can rip that all apart to apply our own use case. This is how I learned BASIC back in the 80's...
This skill Brandon you have coming out every damn hole in your body!
BTW @ 53:10 Did you say 'helpful tits' Brandon? really?