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

NuxtLabs

AI 및 블롭 스토리지용 Next.js Hub 사용 소개.

이미지를 수신하고 설명을 반환하도록 API 엔드포인트를 설정합니다.

Next.js Hub 프로젝트와 Cloudflare 계정 연결.

Cloudflare에서 프로젝트 생성 및 확인.

LLM 모델을 호출하여 이미지를 설명합니다.

메타데이터와 함께 블롭 스토리지에 이미지 저장하기.

이미지 업로드 및 AI 설명 생성을 테스트합니다.

로컬 데이터 디렉토리 및 배포 프로세스.

배포된 애플리케이션을 테스트하고 결과를 확인합니다.

블롭 저장소의 이미지 및 설명을 확인합니다.

Add AI & File upload to your Nuxt application

Add AI & File upload to your Nuxt application

스크립트