Build an AI Image Generator Next.js (Miro) app w/ OpenAI 4.8

  Рет қаралды 1,421

Miro for Developers

Miro for Developers

Күн бұрын

This app implements image generation using AI (OpenAI) and shows how to drag and drop those images to a Miro Board. You can change out the api/openai.js route to use the AI model of your choice, just make sure to return the image URL!
Code for the app: github.com/miroapp/app-exampl...
OpenAI Library may have changed since the publishing of this video. For the latest syntax to use the official OpenAI Node.js Library: platform.openai.com/docs/libr...
For more details about mirotone: www.mirotone.xyz/css
For more info on how to deploy an app to AWS Amplify, check this video: • Deploy Next.js (Miro) ...
00:00 - Intro
00:18 - App Demo
01:48 - GitHub code README walkthrough
03:12 - Code walkthrough - .env.sample (How to get OpenAI API Key)
04:05 - Code walkthrough - Next.js app pages overview
04:40 - Code walkthrough - index.jsx (imports & useState)
05:20 - Code walkthrough - index.jsx (openPanel & drag and drop logic)
06:45 - Code walkthrough - index.jsx (handle generate button click and /api/openai route)
08:00 - Code walkthrough - pages/api/openai.js (use openai to generate image)
10:00 - Code walkthrough - index.jsx (HTML + basic input and button components)
10:35 - Code walkthrough - Mirotone Layout explanation
10:00 - Code walkthrough - index.jsx (HTML + basic input and button components)
11:17 - Code walkthrough - React components (components/PromptInput.jsx)
11:32 - Code walkthrough - React components (components/Button.jsx)
11:43 - Code walkthrough - index.jsx (HTML + basic input and button components)
12:03 - Code walkthrough - index.jsx (Image container and loader)
12:55 - App configuration (clone app-examples folder locally)
12:55 - App configuration (clone app-examples folder locally)
13:30 - App configuration - npm install / start
13:53 - App configuration - Create Miro app on developers.miro.com
13:53 - App configuration - Create Miro app on developers.miro.com
14:48 - App configuration - Install the app and get OAuth token
15:16 - App configuration - Run the App
15:50 - Outro

Пікірлер
Turning Your AI Application into a Profitable SaaS Business
1:15:27
JavaScript Mastery
Рет қаралды 287 М.
CAN FOXY TRICK HIM?! 🤣 #shorts *FOXY AND NUGGET!*
00:17
LankyBox
Рет қаралды 10 МЛН
请善待你的娃娃第二集 #naruto  #cosplay  #shorts
00:52
佐助与鸣人
Рет қаралды 24 МЛН
skibidi toilet 73 (part 2)
04:15
DaFuq!?Boom!
Рет қаралды 15 МЛН
Using Images in Next.js (next/image examples)
9:10
Lee Robinson
Рет қаралды 83 М.
Make Crazy Art with the NEW OpenAI Dall-e API
5:37
Beyond Fireship
Рет қаралды 164 М.
Deploy Next.js (Miro) App on AWS Amplify w/ Env Variables in 10 min!!!
10:15
Miro for Developers
Рет қаралды 3,3 М.
Build an AI photo restorer app with Next.js and Replicate
4:20
How to set up Prisma with Next.js and Postgres!
17:40
Build SaaS with Ethan
Рет қаралды 25 М.
How to Mind Map in Miro (Tutorial + Tips)
12:21
Facilitator School
Рет қаралды 501
CAN FOXY TRICK HIM?! 🤣 #shorts *FOXY AND NUGGET!*
00:17
LankyBox
Рет қаралды 10 МЛН