Fullstack NextJS & CrewAI Crash Course For Beginners [Source Code Included]

🤖 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 KZbin 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 KZbin 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

[@BuildNewThings]

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

[@bhancock_ai]

Thanks João! Thanks for making CrewAI so awesome! And, I just heard about CrewAI+ the day after I launched this KZbin video. I’m sure CrewAI+ will make building full stack apps 10x easier!

[@AnimusOG]

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.

[@jameslweaver]

@@bhancock_ai @BuildNewThing What is CrewAI+ (I hadn't heard of it)

[@jasonshub]

hey let me know! id love to test out crewAI+

[@johngoad]

Yep he is top notch... him and Praison make everything look simple while driving 120mph

[@sdb_gserrao]

Waiting days for this to come out! Thanks man! 🎉

[@Beenee_AI]

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

[@nerohoop]

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

[@RushyNova]

Thanks Brandon. This is exactly what I was looking for. I remember asking for an event based / workflow driven AI application 🙌🏽

[@vampondaway]

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

[@user-sm1zn6yu1d]

I been watching this since the first day release .still trying to experiment with it . super great project.

[@aladinmovies]

Thanks Brandon! I love to see your videos and hear

[@bhancock_ai]

Thank you! I have a lot more videos in store for you guys!

[@hectorprx]

Thanks for all your hard work, All The Best

[@CodeSnap01]

I was eagerly waiting for this after the announcement . Thankyou so so much.

[@bhancock_ai]

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!

[@markdkberry]

absolute gold. great tutorial. thanks for offering it.

[@uminhtetoo]

Thank you so much for sharing your experience and knowledge, Sir.

[@arthuraquino8356]

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.

[@rstar899]

Beautiful! THanks for the inside look!

[@bhancock_ai]

I've wanted to make this video for a long time so I hope you guys like it!

[@VukDukic]

AWESOME!!!!!!!!!!!!!

[@bonadio60]

Great content, your videos are very detailed. Thanks for sharing

[@gerasimosplegas5699]

Awesome! You should definitely publish a completed version including cloud hosting (i.e. Vercel) and potentially optimising/analysing the running cost.

[@bhancock_ai]

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 KZbin: www.skool.com/ai-developer-accelerator/about

[@RABWA333]

Cool , started learning about the topic

[@cameronyking]

Thank you, much appreciated fr

[@amorotto]

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?

[@poshsims4016]

Yay!! Thank you so much!

[@bhancock_ai]

Thanks Posh!

[@tarunsukhu2614]

@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

[@rjrrclaro]

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?

[@EduGuti9000]

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?

[@lev1ato]

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!

[@selimpy8105]

this is great ı think you should make a video about production ready ai agent app with next js and how can we deploy this

[@JoesJourneythroughAI]

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

[@AndersonSchmitt]

Is it possible to create a crew that creates web sites? Creating files like css, javascript and so on...

[@user-ki6un6ut2g]

Another Excellent Tutorial from Brandon! What Flowchart Diagram Editor /Presenter did you use?

[@mada10plm]

ExcaliDraw

[@vectorxdev]

Nice

[@ccouto2869]

Amazing

[@bhancock_ai]

Thanks you so much! This took a lot more time than I expected so I'm glad you guys like it!

[@user-bt1rk1fg7d]

Does the API has rate limits?

[@satyaviswapavanranga5915]

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!

[@bhancock_ai]

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

[@njohbless2580]

pls can i used crewai in node?

[@arthuraquino8356]

Your video came out without subtitles, you could activate it later.

[@sa3640]

need some more interesting unique projects using crewai + nextjs

[@SamDutter]

That zoom sound effect 🔫

[@salemababneh]

Oh right cool

[@mr.daniish]

Brandon drops a 💣

[@bhancock_ai]

Y'all are the 💣!

[@lucasfrutig4945]

wowww, today i tried to start a project like this. Creating an api to use crewAI via frontend. This video will so helpful

[@bhancock_ai]

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

[@amitbaderia6385]

Why don`t you provide the direct link to github, same as other do ?

[@alexkim_]

Would it be easier to use FastAPI instead of Flask?

[@bhancock_ai]

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.

[@DerekDigitalStage]

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.

[@bhancock_ai]

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.

[@mrallenchuang]

where do you deploy the python app?

[@bhancock_ai]

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.

[@herveyachar1071]

Yes how to deploy an app with UI. please it would be very helpful,,Thanks for free knowledge Brandon🎉

[@mickelodiansurname9578]

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?