Building a Digital Sommelier on Top of ChatGPT and the OpenAI API

Rate this content
Bookmark
Slides

When treated as a platform, LLMs such as ChatGPT become powerful building blocks for custom, conversational agents. In this talk, we use the OpenAI API and Vercel AI SDK to build a digital sommelier that recommends the perfect wine.

8 min
07 Dec, 2023

AI Generated Video Summary

Today's Talk introduces the concept of building a digital AI-powered sommelier using the Bracel.ai SDK. The speaker emphasizes the role of developers in shaping the impact of AI, particularly generative AI, on our work. The Talk showcases a simple digital sommelier built using the Resell AI SDK and OpenAI API, highlighting the ease of implementation and the potential of open source tools. The speaker encourages users to explore the possibilities of generative AI responsibly and recommends checking out And Why, a design and technology studio from Munich.

1. Introduction to AI-powered Sommelier

Short description:

Today I want to show you how to build a digital AI-powered sommelier through Bracel.ai SDK. AI, especially generative AI, will have a profound effect on how we work. We as developers can shape that how. We are the ones building and designing the interfaces that facilitate between users and large language models. It's really simple to get started.

Yes, thank you so much for having me. My name is Jan. I'm a lead developer at EddDwye and today I want to show you how to build a digital AI-powered sommelier through Bracel.ai SDK. And initially it was planned that this talk is part of the Remote Day on Tuesday. So when I recorded the first version a couple of weeks back, I talked about the frantic pace at which things are changing in the AI space. And I guess the latest development really proved that point. And I thought, is my talk still relevant? Because a couple of weeks back, we received custom versions of JetGPT. Maybe you have tried it out. You can build your own versions of JetGPT for any kind of topic. And guess what? There are plenty of sommeliers among them and they are actually pretty good. So I thought, great. What does it mean for my talk? And then Sam Altman was ousted as CEO at OpenAI. Most of its employees went on strike and I thought, okay, how long will this API still be around? But since then things calmed down a bit. Altman is back as CEO at OpenAI. And yeah, I think when I thought about it, the underlying message of my talk is still true. That is that AI, especially generative AI, will have a profound effect on how we work. The good thing is, we as developers can shape that how. We are the ones building and designing the interfaces that facilitate between users and large language models. And that gives us a really good position in this transition to using generative AI tools. The best thing is, it's actually really simple to get started. It doesn't take more than five minutes. So let's pick a challenge and see how far we get.

2. Building a Simple Digital Sommelier

Short description:

We can build a simple digital sommelier using the Resell AI SDK and the OpenAI API. The UI consists of two columns: a menu for food and a wine list for pairing. The code is straightforward, utilizing the Resell AI SDK's chat hook and helper functions. The server-side code involves initiating a client for the OpenAI API and specifying the model (GPT 3.5 TORGO). After sending the dish data to the API, we receive a streaming response that is rendered on the screen using the chat hook. It's a great example of what can be achieved with open source tools.

So maybe you guessed it from the topic. I am really into wine and I like pairing food and wine, but there are literally millions of possibilities from various regions and countries, France, Spain, Italy, you name it. So finding the right pairing can be really challenging. But we can build a really simple, hopefully smart, digital sommelier that helps us with finding that perfect pairing.

So let's do that in the next five minutes with the Resell AI SDK and the OpenAI API. So we'll start with a really simple UI. I'm not lying if I tell you that this took the longest to put together. So we have two columns, there is a menu on the left, so the food, and there is a wine list on the right to pair with the food. And on the bottom, you have a small form, a text area where you can add new dishes to the menu.

If you look at the code, it's really simple. We make use of the use chat hook provided by the Resell AI SDK, and it gives us a set of helper functions to interact with large language models. So it does all the heavy lifting, there's not much we need to do here. And we have the form itself, which uses some of these helper functions to send the data off to an API road. That is also actually quite simple. On the server, we have three things, we initiate a client to interact with the OpenAI API, we specify the model. In this case, it's GPT 3.5 TORGO. We provide our OpenAI API key. Unfortunately, it's not free. And that's it.

We read the form data from the request, so the dish in this case we want to pair a wine with, and we send it off to the OpenAI API. What we get back is a streaming response, or a response that we turn into a readable screen that we send back to the client. And here, there's not a lot more to it. Again, we use chat hook to render this streaming response on the screen. And that gives us that nice effect that looks like the AI is actually typing the response. Probably if you use chat GPT, you've seen it before. And that's really all there is to it. Maybe a hundred lines of code. But I think it's a good showcase of what you can do really quickly with open source tools. But let's see if that actually works. So I prepared a little example.

3. Building an AI Sommelier

Short description:

This is our actual sommelier. It's really simple to get started. You don't need to be an AI expert. Just try it out. Think about how users will interact with generative AI or these tools. Think about the responsible uses and then have fun with it. Check out And Why, a small design and technology studio from Munich.

So this is our actual sommelier. Let's start with fresh oysters on ice and let's see what we get. What kind of wine to pair with. So it suggests us a champagne. It's a really classic pairing. So I guess a good start.

Let's do something for Christmas. Maybe a roast duck with red wine sauce next. And it pairs with a pinot noir. So it could be from France, a red wine or from California. Who knows? And it probably would go really well. It's not very specific, but yeah, why not?

And let's finish off with a dessert. Maybe Mousse au chocolat is nice for this time of the year. And we get a port wine. I guess there are some people from Portugal here. So probably you know that. It's a really classic pairing. Sweet wine with a sweet dessert. And that's really all there is to it.

I don't know if it replaces actual sommeliers anytime soon. But what I wanted to do with this talk is basically to show you it is really simple to get started. It's literally not even a hundred lines of code. We use freely available tools, open source tools. I think there are even some contributors here. So I use Next.js, the Brazilian SDK and for the pretty UI, ShadeCN. So I can highly recommend those. But the gist of this is it's really easy to get started. You don't need to be an AI expert. Just try it out. Pick a challenge. Deploy something to RSL or Netlify or whatever and see how it goes. I think what we should keep in mind if you work on that in some more serious applications, think about how users will interact with generative AI or these tools. Think about the responsible uses and then have fun with it.

And yeah, that's really all there is to my talk. If you liked it, please also check out And Why. We are a small design and technology studio from Munich. We have an office here in Berlin as well. And we do next-to-AI development, 3D and immersive experiences on the web.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
24 min
AI and Web Development: Hype or Reality
In this talk, we'll take a look at the growing intersection of AI and web development. There's a lot of buzz around the potential uses of AI in writing, understanding, and debugging code, and integrating it into our applications is becoming easier and more affordable. But there are also questions about the future of AI in app development, and whether it will make us more productive or take our jobs.
There's a lot of excitement, skepticism, and concern about the rise of AI in web development. We'll explore the real potential for AI in creating new web development frameworks, and separate fact from fiction.
So if you're interested in the future of web development and the role of AI in it, this talk is for you. Oh, and this talk abstract was written by AI after I gave it several of my unstructured thoughts.
React Summit US 2023React Summit US 2023
30 min
The Rise of the AI Engineer
We are observing a once in a generation “shift right” of applied AI, fueled by the emergent capabilities and open source/API availability of Foundation Models. A wide range of AI tasks that used to take 5 years and a research team to accomplish in 2013, now just require API docs and a spare afternoon in 2023. Emergent capabilities are creating an emerging title: to wield them, we'll have to go beyond the Prompt Engineer and write *software*. Let's explore the wide array of new opportunities in the age of Software 3.0!
JS GameDev Summit 2023JS GameDev Summit 2023
37 min
Building the AI for Athena Crisis
This talk will dive into how to build an AI for a turn based strategy game from scratch. When I started building Athena Crisis, I had no idea how to build an AI. All the available resources were too complex or confusing, so I just started building it based on how I would play the game. If you would like to learn how to build an AI, check out this talk!
TestJS Summit 2023TestJS Summit 2023
8 min
Code coverage with AI
In this lightning demo I will showcase how Codium, a cutting-edge generative AI tool, is revolutionizing code integrity. We will demonstrate Codium's ability to generate useful Mocha tests, taken from a public repository and highlight the seamless integration. You can see Codium as it transforms complex test scenarios into actionable insights, propelling code coverage forward. Join us for an insightful peek into the future of automated testing where speed meets quality!
React Summit 2023React Summit 2023
29 min
Improving Developer Happiness with AI
GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda:
Introduction to CoPilot
- What is Copilot
- How can you use it
- How it can help you write code faster
- Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Advanced Conference 2023React Advanced Conference 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Workshop
In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool).
In the workshop they'll be a mix of presentation and hands on exercises to cover topics including:
- GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps
JSNation Live 2021JSNation Live 2021
81 min
Intro to AI for JavaScript Developers with Tensorflow.js
Workshop
Have you wanted to explore AI, but didn't want to learn Python to do it? Tensorflow.js lets you use AI and deep learning in javascript – no python required!
We'll take a look at the different tasks AI can help solve, and how to use Tensorflow.js to solve them. You don't need to know any AI to get started - we'll start with the basics, but we'll still be able to see some neat demos, because Tensorflow.js has a bunch of functionality and pre-built models that you can use on the server or in the browser.
After this workshop, you should be able to set up and run pre-built Tensorflow.js models, or begin to write and train your own models on your own data.