---
type: video
yt_id: VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLno5UEY4TmRNNFhV
videoId: z9PF8NdM4XU
title: "GPT-4 Vision and Next.js Tutorial - Create Your Own AI Coding Bot"
date: "2023-11-29T14:30:27Z"
slug: "gpt4-vision-and-nextjs-tutorial-create-your-own-ai-coding-bot"
image: 
  name: "gpt4-vision-and-nextjs-tutorial-create-your-own-ai-coding-bot.jpg"
  alt: "GPT-4 Vision and Next.js Tutorial - Create Your Own AI Coding Bot"
  width: 1280
  height: 720
status: 'published'
description: "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. "
tags: []
---

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: [https://youtu.be/4ZhtoOFKFP8](https://youtu.be/4ZhtoOFKFP8)
* 2. Kinde: The Best Auth Solution Next.js 14: [https://youtu.be/sjcLxYbw5BQ](https://youtu.be/sjcLxYbw5BQ)

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

Code: [https://github.com/meech-ward/code-gpt-example/tree/part1](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](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://nextjs.org/docs/app/building-your-application/routing/route-handlers#streaming)
[https://vercel.com/ai](https://vercel.com/ai)
[https://sdk.vercel.ai/docs/concepts/prompt-engineering](https://sdk.vercel.ai/docs/concepts/prompt-engineering)
[https://tailwindcss.com/docs/typography-plugin](https://tailwindcss.com/docs/typography-plugin)
[https://vercel.com/docs/functions/serverless-functions/runtimes#streaming](https://vercel.com/docs/functions/serverless-functions/runtimes#streaming)

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