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:

Upload image to S3: https://youtu.be/t-lhgq7Nfpc Networking in React: https://youtu.be/Mokoo0mVEAU

Code: https://github.com/meech-ward/code-gpt-example/tree/part1

Join this channel to help me out and get early access to some videos: https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/join

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: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#streaming https://vercel.com/ai https://sdk.vercel.ai/docs/concepts/prompt-engineering https://tailwindcss.com/docs/typography-plugin https://vercel.com/docs/functions/serverless-functions/runtimes#streaming

My Website: https://www.sammeechward.com Instagram: https://www.instagram.com/meech_ward Twitter: https://twitter.com/Meech_Ward Github: https://github.com/orgs/Sam-Meech-Ward

Find an issue with this page? Fix it on GitHub