How To Develop AI Apps 100% For FREE!

Summary

This 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

00:00

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

05:01

🛠️ 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.

10:02

📸 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.

Keywords

💡React Dev

React Dev refers to a developer who specializes in building user interfaces using the React JavaScript library. In the video's context, the speaker encourages React developers, as well as other front-end developers, to enhance their skills with AI capabilities, which are highly sought after in the current job market. The script mentions building a UI for AI, indicating the importance of integrating AI functionalities into modern web applications.

💡Front-end Dev

Front-end development is the process of creating the user interface and user experience of a website or application. The term 'front-end Dev' is used in the script to address the target audience of the video, which includes developers who work on the client-side of web applications. The video emphasizes the importance of these developers learning AI skills to stay competitive in the job market.

💡AI Skills

AI Skills refer to the abilities and knowledge required to work with artificial intelligence technologies. The script discusses the importance of building up UI for AI skills, as AI is a rapidly growing field with high demand. The video provides a practical approach to learning AI by using open-source tools and developing applications that integrate AI functionalities.

💡Open AI

Open AI is a term that can refer to AI technologies that are publicly available and not restricted by proprietary licenses. In the script, the speaker mentions using Open AI to play around with AI models without worrying about high costs, suggesting that there are affordable or free resources available for developers to learn and experiment with AI.

💡Local First Development

Local First Development is an approach to software development where the primary focus is on creating applications that work well on the user's local machine, even when offline. The script introduces the concept of using 'local First Development' with AI, emphasizing the use of open-source AI models that can be run on a developer's machine without reliance on the internet or cloud services.

💡Olama

Olama is mentioned in the script as a tool for downloading and running free open-source AI models on a local machine. It is part of the process of setting up a local environment for AI development. The script describes using Olama to install and run a chat model, demonstrating how to interact with the AI model locally.

💡Versal AI SDK

Versal AI SDK is an interface layer for AI development, which is mentioned in the script as a tool to be used alongside Olama. It is used to interface with the AI models that are running locally on the developer's machine. The SDK is part of the process of building applications that can communicate with and utilize AI models.

💡Chat Bot

A chat bot is an AI-powered program designed to simulate conversation with human users. In the script, the speaker builds a chat bot using just 20 lines of code, demonstrating the ease of integrating AI into applications. The chat bot is an example of how AI can be used to create interactive user experiences.

💡Photo Reviewer App

The term 'Photo Reviewer App' is used in the script to describe a more complex application that uses AI to analyze and provide feedback on photos. The app allows users to drop a photo, and the AI reviews the photo, offering insights on its quality and suggesting improvements. This showcases a practical application of AI in a non-chat context.

💡Lava Llama

Lava Llama is an image AI model mentioned in the script, which is used for the photo reviewer app. It combines image analysis capabilities with language model functionalities to provide descriptive feedback on images. The script demonstrates using Lava Llama to describe an image of a dog, highlighting its ability to analyze visual content locally and provide responses.

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