GPT-4 Vision and Next.js Tutorial - Create Your Own AI Coding Bot

I'll guide you step-by-step on how to create your own AI coding bot using GPT-4 Vision and Next.js. This is everything you need to know to get started making your own custom gpt 4 apps with next.js and HTTP streaming.
Next two videos that build ontop of this:
1. Easiest Database Setup in Next.js 14 with Turso & Drizzle: • Easiest Database Setup...
2. Kinde: The Best Auth Solution Next.js 14: • Kinde: The Best Auth S...
Upload image to S3: • Next-Level S3 File Man...
Networking in React: • Fetching and Posting D...
Code: github.com/meech-ward/code-gp...
Join this channel to help me out and get early access to some videos:
/ @sammeechward
Chapters:
0:00​ Intro
1:59 POST to Server
4:06 Setup OpenAI
6:14 Streaming
13:15 Markdown Parsing
17:35 Prompt Engineering
19:59 Edge Runtime
20:48 GPT Vision Image URL
24:45 Stop streaming
29:13 Summary
Reference Links:
nextjs.org/docs/app/building-...
vercel.com/ai
sdk.vercel.ai/docs/concepts/p...
tailwindcss.com/docs/typograp...
vercel.com/docs/functions/ser...
My Website: www.sammeechward.com
Instagram: / meech_ward
Twitter: / meech_ward
Github: github.com/orgs/Sam-Meech-Ward

[@kaarthikandu]

Very cool stuff 👍

[@lucasvtiradentes]

Great video, thanks

[@Lyaz01]

Awesome stuff!!

[@salsadisol6014]

Hey Sam! Love your videos man, I learned a lot with them. That said, how would you test a Next.js application ? Especially like this one, with API routes and openAI service ?

[@SamMeechWard]

Testing is always a hot topic, and I don't have an answer that most people will agree with, but here goes. My approach and my suggestion to people is to use vitest (maybe bun in the future). Do unit and integration tests, but not end to end tests, and definitely no UI tests. Don't mock if you can avoid it, use a real database if you can, however, definitely mock openai because that service is expensive and brittle. Start with small unit tests of the core functions, then move to integration tests. ONLY WRITE TESTS THAT YOU WILL 100% DEFINITELY MAINTAIN AND TRUST.

[@maharshiguin7813]

Hey SAm, thanks for the videa, is the full version video out yet?

[@Rajvirnahar]

Hey Sam. Could you upload a image, tell it to change the inage or remove a certain thing from it and reiceve back a new image or does this striclty only use GPT 4 vision?

[@goncalopinto6544]

Can you do a full tutorial how we can build this, to a ready prodution app? It will be so cool.

[@SamMeechWard]

Sorry for the late response here, but the next two videos set you up for this. Check the description for the next one.

[@natnaelzewdu4289]

Hey sam, I am having issues with creating a production build of the app. The error is coming from the router file inside the messages directory. However if i remove the edge runtime code line everything works. Do you have any suggestions. Error I get: Build error occurred Error: Failed to collect page data for /api/message ... or if I remove my database queries i make with drizzle it also works fine even if i have the edge run time code.

[@natnaelzewdu4289]

I figured it out after like 10 days or something 😭. The whole issue was that the version of libsql/client package we had installed ("@libsql/client": "^0.4.0-pre.4",) has issues when it comes to edge run time. For anyone looking to deploy on Vercel or other platforms please make sure you have the most up to date version of the package by running npm i libsql/client

[@evgenykorolev9108]

Bro, how to process a mathematical formula. I know that there is a plugin in markdown, but it somehow refuses to process the request from gpt. What can be done?

[@the_yugandharr]

man how are you moving like a well oiled robot?! Amazing video tho

[@meandyoucoding]

how do use bun with next.js

[@the_yugandharr]

man how are you moving like a well oiled robot?! Amazing video tho