Hello everyone, I'm Sebastian Choper. In this video, I'm going to show you how to use Next.js Hub to add AI and blob storage features to your next application. Here, I added the Next.js Hub core module and enabled AI and blob. I have my main component where I

display an input file tip where I can select an image, and it will call my API with a POST request with my image in it and expecting a description. Right now, my API request, my API endpoint is sending back to do so. Let's work on this, but in order to add

AI, I need to run `npx next hub link` because it needs to communicate with my Cloudflare account. Let's link my project with my ATTI demo team. Create an EMG AI project in Europe. Um, if I open the admin...com in my team, I can see that I connected my

Cloudflare account using Workers Free. I am also on the free plan, which is up to five projects, and if I check the project, I can see my created project, but not deployed. So, let's finish it before deploying it to the edge in our API

endpoint. We are going to call a .run to run our LLM model, which takes as argument a prompt. So, describe the image in one sentence, and the image has a specific format that I created above, which is an array of numbers, and let's say the max token of

100. This looks good. I also want to store the image in my bucket. So, for this, I'm using the Hub blob dot put using the image, uh, find name image here, and also I want to store the custom metadata, the description as custom metadata, which could be useful if I use

the API to list the image and I this way I can have the alt text ready so let's try again now uploading a car image let's see what the AI will answer and we have our description if I open the dev tools I will have another tab uh called Hub blob

where I can see my uploaded image and all of this is happening locally in my data directory but if I want to deploy my project I can run the npx knub deploy command that is going to build my project for production deploy it to my Cloudflare

pages account and create the air route and the AI Bing without me doing anything except waiting for it to be deployed so let's go back on the uh admin here and if I open this I can see my production deploy which is already ready if I visit the

site and select this mountain image and I have my description I don't have the dev tools but I can go to my admin and open the blob tab and same here I can see my beautiful mountain with the description and this is how you can add AI and blob storage

Add AI & File upload to your Nuxt application

Add AI & File upload to your Nuxt application

Scripts