OpenAI Vision API Tutorial: Build a Fullstack Website to Chat With Images

Welcome to our latest tutorial! Today, we're diving into OpenAI's new vision feature. If you're a developer eager to explore the latest in AI, this video is perfect for you.
In this tutorial, you'll learn how to build a website that chats with images using OpenAI's Vision API. This session is all about hands-on learning and practical application.
🔍 What's in store for you:
Building a user-friendly, one-page application with NextJS.
Integrating OpenAI's vision feature for image-based chat.
Uploading images and getting AI responses in real-time.
Quick walk-through of OpenAI's vision documentation and practical tips.
Full access to the source code for easy learning.
Resources:
- Docs: platform.openai.com/docs/guid...
- Source Code: brandonhancock.io/vision
- One-on-One Call: calendly.com/bhancock-ai/30min
Timestamps:
00:00 Introduction
00:17 Application Overview
01:29 GPT-4 With Vision Overview
03:59 Code Walkthrough
21:05 Outro

[@rupeshparmar4916]

Hi Brandan, I'm currently working on a project that involves using the Vision Open API. However, I've encountered an issue with counter questions where OpenAI doesn't recognize older messages. I discovered a solution, which involves sending all messages in context repeatedly, but this increases the token size every time I ask a question. Could you please suggest or help me with this issue?

[@bhancock_ai]

Hey Rupesh! Could you please share a code sample in the free Skool community I created for you guys? If I can share a snippet or screenshot of your code, I can better help! Here's a link: www.skool.com/ai-developer-accelerator/about

[@laidbackluc]

Thank you so much for providing the project files and the tutorial. I've managed to build the Next app and i've started a production build using Vercel. Unfortunately I have an issue where it fails to send the image. Did you run into a similar issue or do you know what might cause this problem? Something to do with the environment variables? Thanks in advance!

[@bhancock_ai]

Hey! I have free Skool community for more involved questions like this: www.skool.com/ai-developer-accelerator/about Feel free to post your question of there with some screenshots and maybe even a loom video going over where you're at in your code and I'll be able to better help you!

[@blaqjettech]

I'm a big fan. Great work

[@bhancock_ai]

Thanks man! The AI field is changing so fast. There’s so many videos I need to make for you guys!

[@sturgeon2888]

I might be missing something major, but this video feels like the third or fourth video in a series, but I didn't find any previous API Vision videos in your channel. I had a very hard time following this. Where do you recommend I start before coming back here?

[@bhancock_ai]

Hey! Great question! I am slowly cranking out videos for each aspect of the new OpenAI API. If you want to see a simplified version of using the new Vision API, I would definitely check out this video on my KZbin channel: kzbin.info/www/bejne/nZbHYXhuYpx_Zposi=WU_mjMS-ifysY7i8 Also, when I made this video, Open AI I had not released a new version of their NPM package so we had to make a lot more direct API calls to their services. That updated video I’m talking about, uses their new NPM package and it simplifies everything a good bit. I hope that helps! Feel free to shoot me a DM on Twitter if you have any thing that you specifically need help with @bhancock_ai

[@Khozikony]

The uploadthing files don't work

[@GreenmeResearch]

Would be interesting to use Llava 1.6 instead and use it to better load pdfs (using it as an OCR) in a vector database, to talk to your documents.

[@blaqjettech]

❤

[@Nolaready]

Great video, can this work in Flutterflow?

[@bhancock_ai]

Great question! I haven't used FlutterFlow before so I'm not entirely sure. Does FlutterFlow have an OpenAI integration?

[@Nolaready]

@@bhancock_ai yes it does.

[@callmehakeem]

hey this is wonderful how do i deploy?

[@bhancock_ai]

Great question! The easiest way to deploy a NextJS application is through Vercel. If you search for a KZbin tutorial on “how to deploy a NextJs application on Vercel” you’ll be able to get everything working in under 10 minutes!