How To Develop AI Apps 100% For FREE!
Summary
TLDRThis video script is a guide for front-end developers to enhance their skills by integrating AI into their UI development. It emphasizes the importance of AI in the job market and offers a free, local-first approach using open-source AI models with 'oama' and 'versals AI SDK'. The tutorial walks through building a chatbot and a photo review app with minimal code, showcasing the ease of implementing AI and encouraging developers to boost their employability by learning these skills.
Takeaways
- 🚀 Encouragement for front-end developers to build UI for AI skills as AI is a hot trend and beneficial in the job market.
- 💡 Introduction of using open AI for free to play around without worrying about costs, suggesting local first development.
- 🛠️ Utilization of 'oama' to download and run free open source AI models on a local machine.
- 🔌 Mention of 'versals AI SDK' as an interface to work with the AI models.
- 📝 Building a chat bot in just 20 lines of code using the AI SDK and oama.
- 🎨 Excitement about creating a photo viewer app with AI to review and suggest improvements on images.
- 🔄 Demonstration of using 'oama' commands like 'oama list' and 'oama rm' to manage AI models.
- 📚 Selection of AI models like '53' from Microsoft for chat functionality and the ability to run multiple models.
- 🛑 Explanation of creating a Next.js application with specific features like TypeScript, ESLint, Tailwind CSS, and app router.
- 🔗 Integration of the 'AI toolkit' from versal, 'oama mpm module', and 'oama AI provider' for connecting to AI models.
- 📝 Instructions on building the homepage of the app using the 'useChat' hook from the AI SDK for interactive chat functionality.
- 🖼️ Creation of a second app using 'lava llama 3' for image AI, allowing users to upload photos for AI review.
Q & A
What is the primary recommendation for front-end developers in the current job market?
-The primary recommendation is to build up their UI for AI skills, as AI is super hot right now and having experience with developing for it is critical in the tough job market.
What is a cost-effective way to start developing with AI without incurring high costs?
-A cost-effective way is to use local first development with open AI models. This can be achieved by using Olama to download and run free open source AI models on your machine.
What is Olama and how is it used in the development process?
-Olama is a tool used to download and run open source AI models on your machine. It allows developers to interface with AI models locally without incurring costs from cloud services.
How can you interface with the AI models using Olama?
-You can interface with the AI models using the Versal AI SDK, which provides an open source AI interface layer that works with Olama.
What is the significance of building a chat bot with just 20 lines of code?
-Building a chat bot with just 20 lines of code demonstrates the simplicity and efficiency of using AI tools like Olama and Versal AI SDK, making it accessible for developers to quickly prototype and test AI applications.
What are the steps to get started with Olama and AI models?
-First, download and install Olama using a package manager like Brew on a Mac. Then, start the Olama service and download a model, such as the chat model from Microsoft. Finally, use commands like 'o llama list' and 'o llama RM' to manage the models.
How can you create a simple AI chat application using Next.js and Olama?
-You can create a simple AI chat application by using 'create-next-app' to set up a new Next.js project, adding necessary libraries like the AI toolkit from Versal, the Olama CLI module, and the Olama AI provider. Then, build out the homepage using the 'useChat' hook from the AI SDK.
What is the role of the 'useChat' hook in the AI chat application?
-The 'useChat' hook from the AI SDK provides the necessary data and functions for managing the chat interaction, such as messages, current input value, handleInputChange, and handleSubmit.
How can you handle the server-side logic for an AI chat application in Next.js?
-You can handle the server-side logic by creating an API route in Next.js, such as 'api/chat', and using the Olama AI provider to connect to the AI model and process the messages.
What additional features can be added to enhance the AI chat application?
-Additional features can include formatting the AI responses using React Markdown to handle markdown formatting, and building more complex applications like an image review app using AI models for image analysis.
What is the purpose of the second application mentioned in the script, and how does it utilize AI?
-The second application is an image review app that allows users to drop a photo onto the app. It utilizes AI to review the photo and provide feedback on what's good, what's bad, and how it can be improved.
How can you integrate AI for image analysis in a Next.js application?
-You can integrate AI for image analysis by using Olama to run an image AI model like Lava Llama 3, and then creating an API route in Next.js to handle the image file, send it to the AI, and process the response.
Outlines
🤖 Building AI Skills for Front-End Developers
This paragraph emphasizes the importance of AI skills for front-end developers in the current job market. The speaker encourages developers to explore AI by using open-source tools without incurring significant costs. They introduce the use of 'oama' for running AI models locally and 'versals AI SDK' for interfacing with these models. The paragraph showcases a simple implementation of a chatbot using just 20 lines of code, demonstrating the ease of getting started with AI development.
🛠️ Developing a Chat Application with Local AI Models
The speaker provides a step-by-step guide on setting up a local AI development environment using 'oama' and installing a chat model from Microsoft. They explain how to interact with the model using terminal commands and proceed to build a chat application using 'create next app' and various libraries including the 'AI toolkit' from 'versal'. The process involves creating a homepage, integrating the 'useChat' hook from the AI SDK, and setting up a form for sending messages to the AI. The paragraph concludes with a live demonstration of the chat application in action.
📸 Creating an AI-Powered Photo Reviewer App
This paragraph delves into building a more complex application that uses AI for image analysis. The speaker introduces 'lava llama', an image AI model, and demonstrates how to use it to describe an image locally. They guide through creating a new application called 'cheap AI photo reviewer' using 'next' with similar configurations as the previous app. The focus is on setting up APIs to handle image files, using 'react Drop Zone' for drag-and-drop functionality, and integrating 'react markdown' for message formatting. The paragraph ends with a live test of the app, showing the AI's ability to review and provide feedback on a photo.
Mindmap
Keywords
💡React Dev
💡Front-end Dev
💡AI Skills
💡Open AI
💡Local First Development
💡Olama
💡Versal AI SDK
💡Chat Bot
💡Photo Reviewer App
💡Lava Llama
Highlights
Encouraging front-end developers to build up their UI for AI skills as AI is super hot in the current job market.
Using open AI for free by downloading and running open source AI models locally.
Utilizing the olama tool to download and run AI models on a local machine.
Installing AI models like model 53, a chat model from Microsoft, using olama.
Building a chat bot in just 20 lines of code using the versals AI SDK.
Creating a Next.js application called 'cheap AI chat'.
Using the AI toolkit from versal and olama mpm module to interface with AI models.
Building a homepage with a client component using the useChat hook from the AI SDK.
Creating a form to send messages to the server using handle submit from useChat.
Displaying messages from the chat bot in a flex box layout.
Setting up an API endpoint in Next.js to connect to the AI model.
Using the createOlama function from olama AI provider to interface with AI.
Streaming text response from AI using the streamText function.
Integrating React Markdown to format AI responses in markdown.
Building a second application, a photo reviewer, using local AI to review images.
Using lava llama 3, an image AI model, to describe images.
Creating a Next.js application called 'cheap AI photo reviewer'.
Using react Drop Zone to create a drop target for image files.
Sending base64 encoded image files to the AI for review.
Using the EdDropZone hook to handle file uploads and convert them to base64.
Submitting encoded files to the API server using useEffect.
Encouraging developers to learn AI to enhance job skills and employability.
Announcing a new course on ProNextJS focusing on building advanced chat applications.
Transcripts
if you're a react Dev or really any kind
of front-end Dev I strongly encourage
you to build up your UI for AI skills AI
is just super hot right now and having
experience with developing for it is
critical in this tough job market but
how can you get started for free using
open AI doesn't cost a lot of money if
you're doing just a little bit but still
you want to be able to just play around
with it and not worry about a Big Bill
at the end while the answer is local
First Development we use oama to
download and run our free open source AI
models on our machine and then we'll use
versals AI SDK to interface with it and
then we'll build a chat bot in like 20
lines of code I'm serious I'm not
kidding and then we'll build this cool
photo R viwer app in just a few more I'm
so excited let's get into
[Music]
it all right so as I say the important
parts here are this AI toolkit from
versal it's just an open source AI
interface layer it's very good though
we're going to use open Llama locally to
actually run the models on our machine
now you can get started by just hitting
that download button I'm going to use
Brew install for that since I'm on a Mac
so I'm just going to do Brew install and
then o
Lama okay the next thing we're going to
do is start the olama service
cool now that we got AMA set up what's
let's go and install a model so I'm
going to pick off the top of my head
just 53 this is a chat model from
Microsoft there's Gemma 2 there's a
bunch of different chat models that you
can get just go over here to models and
you'll actually see all of the models
that you can download and run and you
can run as many of them as you want to
or as your machine can handle so let's
try out 53 though I'm going to copy that
going to go in my terminal and do o Lama
run 53
okay the model's all downloaded let's
ask it to say
hello
taada pretty cool all right so now that
we've got our olama model running let's
show you let me show you a few more
commands I can do ol llama list that'll
show me any models that I've installed I
can also do o llama RM if I just want to
get rid of it I don't want to because we
just installed it so now let's go and
build our first app so I'm going to use
create next tab at latest to create our
first application cheap AI chat so of
course all the code for this available
to you on GitHub 4 free in a link in the
description right down
below I'll use typescript yes lint and I
do want to use tail one CSS in this
case I'm going to use the app router and
there we
go looks like we're all set up let's
bring it up vs
code all right now we've got to add some
libraries the first one we're going to
add is AI That's the AI toolkit from
versell
next up we're going to bring the oama
mpm module into our app that's what we
use on the command line to run any oama
commands and connect any models and any
of that so that's going to actually
interface with
oama and then to connect those together
I'm going to use the olama AI provider
it's a nice mpm module that connects the
versal AI SDK to
O all right now the next thing I'm going
to do is build out the homepage so let's
go over to page and I'm going just going
to replace this with an empty page now
that empty page is going to be a client
component because this is all going to
be interactive now the first thing we
need to bring in is the use chat Hook
from the AI
SDK now that AI SDK has a react section
so it works with all kinds of Frameworks
also react so in the react module you
get the use chat hook now we're going to
call that use chat hook with no options
and we're going to get back a bunch of
things we're going to get messages
that's the messages that we've had with
the chat bot and then the current input
value that's going to be for the text
field where we input stuff handle input
change which is what we're going to use
on the unchange of that input field and
then handle submit which is what we're
going to call when we actually want to
hit the return and then send the message
to the AI next we'll build out the
starter jsx we'll have a flex box we in
in a column full width a little bit of
padding on the sides and then we'll
stretch it out so that it uses up the
entirety of the vertical space next we
need a way to send a message to the
server so we'll create a form tag it'll
have an onsubmit using that handle
submit that we got back from used chat
and then an input field which is
connected to that input we give the
value as the input and the onchanges
handle input change pretty easy now
finally the last thing we want to do is
just display the messages so we'll add
some code to iterate through all those
messages with map and then just display
them in a nice little output okay so far
so good let's bring that
up so I'm going to bring up my simple
browser go to Local Host
3000 and that's looking pretty good let
me anchor that over on the side there
okay nice now if I were to do something
like say hello it's not going to do
anything and that's because we don't
actually have an endpoint for to connect
to to send the messages to Now by
default since I haven't changed any
options on use chat the API that it
wants to connect to is SL API chat so
we're going to go and create that so go
back over here in our app create API
chat and then route. s that's a route
Handler in nextjs then I'm going to
handle the post method in here that's
going to receive the request when we get
the handle submit from the client all
the messages are going to come in as
messages in Json and now we actually
want to start building out our
connection to the AI so the first thing
we need is the create olama function
from olama AI provider and we'll just
invoke that now create our o llama
interface and next we want to bring in
streaming text response stream text and
stream data from AI That's going to
handle the streaming response back from
the AI we don't just want it to come out
as one go right we want it to actually
go token by token otherwise you'll be
there waiting for a while for the
response so we're going to use this
streaming function that they got built
into it all right now we get to call our
Ai and that's it all you got to do is
just stream text you give it the model
in this case AMA with that 53 model that
we added and then the messages and then
we return a streaming text response with
the AI stream that we get back out of
that result all right let's give it a go
whoa seriously it was that easy how cool
is that okay I'm going to ask something
a bit more
complicated what are the steps in
bathing a stinky
dog all right now as you can see what's
coming out here is markdown that's the
for example these double stars that
should be bold so just to add a little
bit more complexity here let's go and
bring in react markdown to format
that now we'll launch the server again
we'll go back into our page we'll bring
in the markdown component and then we'll
just wrap everything in the content in
markdown right let's try it one more
time how to bathe a stinky
dog and there we go now you can start to
see we got the Bolding in there this
looks really nice and that's it as you
can see this is just super easy to do of
course all the codes available to you
for for free on GitHub and you can run
this thing anywhere now that you got o
Lama installed on your machine you could
run it on a plane you could run it at
the park while you're watching your kids
play in the park you can do anything
with this it's fantastic Jump On In have
some fun learn AI I'm telling you it'll
help you in the job market so the second
application is a bit more complex just
kind of shows how to use AI in a non-
chat more applied style we're going to
allow the user to drop a photo onto the
app and then we're going to use a local
AI to kind of review the photo and tell
us what's good about it what's bad about
it how it can be improved okay so let's
now go and build our second app so the
second model they're going to bring in
is lava llama lava is an image Ai and
llama 3 is an llm and they've kind of
Squish those two together and now you've
got a really good image AI that can do
llm type chat work okay cool so let's
bring that
in we're going to use o Lama run lava
llama 3
and now that we've got that installed
I'm going to use it to describe this
image of my dog murf so now I'm going to
say describe this
image give it a path downloads dog.
jpeg how cool is that and it's local we
have to pay anything for that that is so
awesome it's amazing what you can do in
open source nowadays okay so now let's
go build an app around this so again I'm
going to use next I'm going to call it
cheap AI photo reviewer I'll use all the
same options as last time including
Tailwind I'm going to jump in there with
vs code and I'm going to speedrun this a
little bit of course all the code is
avable to you for free so after we're
done you can take a look at it download
it try it out for yourself so we're
going to bring in that AI Library olama
AMA AI provider as we did before react
markdown I'm also going to bring in
react Drop Zone since we want to create
a drop Target so you can just drop your
image onto the app
this time I'm going to start with the
API first so we create a new directory
called API chat again and then route. TS
and I'm going to do all the stuff we did
before creating the llama and getting
all the stuff set up for AI but the
prompt is going to look entirely
different so what we're going to get
from the Json in this case are Bas 64
encoded files and then we're going to
send those off to the AI the way that
we're going to do that is call that
stream text function from AI we're going
to give it the O llama adapter with lava
Lama 3 and then we're going to give it
some messages now this is the prompt
engineering that everyone talks about
you give it some messages and in this
case you're going to set up the system
you're going to tell it what it needs to
behave like and then in this case we're
going to say that the second message
comes from the user user asking please
review this photo and then we're going
to send it the encoded image file okay
so we got our API all set up let's now
go and build out our page we're going to
use that use chat Hook from AI but we're
also going to have these encoded files
they're going to be the files that we
get from Drop Zone next we bring in the
Ed Drop Zone hook that's what's actually
going to do the work of accepting those
files turning those into base
64 and then adding those files to the
list of encoded files and then we
finally we add a use effect that says
cool if we got some new encoded files
then fire off that handle submit and
just submit those to the API server all
right let's give it a go and
see unfortunately that simple browser
doesn't handle drag and drop so I'm
going to use ARC for this I'm going to
drag my photo of murf on there and now
we see it's having a good look at our
photo and boom we've got the output from
the AI
mindblowing of course all the code for
this example and the other one is
available to you on GitHub for free I
encourage you to play around with it AI
is something you're really going to want
to get into to enhance your job skills
and employability at this point well I
hope this got you excited about learning
how to build uis for AI how to do it on
your own machine local first if you do
that let me know in the comments right
down below I would love to hear about it
and if you're into advanced content like
this go over to pron nextjs doev that's
where my new course on pron nextjs is
just about to be deployed sign up for
the newsletter today you'll get access
to two free tutorials one on State
Management one on fors management and I
got to tell you the first part of this
new course is going to be on building a
chat application just like this but a
lot more advanced and using all of the
cool features of the nextjs app router
I'm really stoked about it of course in
the meantime if you like this video
please hit that like button it really
helps out with the algorithm hit the
Subscribe button if you want to see more
content like this and click on that Bell
if you want to be notified about it I'll
see you on the next Blue Collar coder
Voir Plus de Vidéos Connexes
AI Developer Roadmap | How I Would Learn AI in 2024
Which Career Path To Choose? Future Scope? Salaries? Job Opportunities?🤔 Computer Science Students
AI Engineer : The ULTIMATE Roadmap for 2024
Cursor AI - Code siêu nhanh siêu nhàn với sự trợ giúp của AI Text Editor
7 Cursor Hacks to become the FASTEST coder
How to Build Custom AI Chatbots 🔥(No Code)
5.0 / 5 (0 votes)