Learn about Gadget's built-in AI features such as the OpenAI connection, vector databases, and cosine similarity search, and use them to build a chatbot that generates custom movie scenes.
You can fork this Gadget project and try it out yourself.
Create a new Gadget app
Before we get started we need to create a new Gadget app. We can do this at gadget.new. When selecting an app template, make sure you select the Web app type.
Now that we have a new Gadget app, let's start building!
Step 1: Create a movie model
The first thing we need to do is store some movie quotes in our Gadget app. We're going to make use of Gadget's data models, which are similar to tables in a Postgres database, to store this information.
Start by creating a new model in Gadget:
Click the + button in the api/models folder of the sidebar
Enter movie as the model's API identifier
Now add some fields to your model. Fields are similar to columns in a database table, and allow you to define what kind of data is stored in your model. For our movie model, we'll add the following fields:
Select schema in the api/models/movie folder
Click + in the FIELDS section
Enter title as the field's API identifier
Click on the + Add Validations drop-down and select Required to make the title field Required
Adding a Required validation to title means that an error will be thrown if a movie is added without a title. Now let's add a field to store the movie's quotes:
Select schema in the movie model's folder
Click + in the FIELDS section
Enter quote as the field's API identifier
Click on the + Add Validations drop-down and select Required to make the quote field Required
Now we have a place to store movie quotes! We also need a field used to store vector embeddings. Vector embeddings are a way of representing text as a vector of numbers. To learn more about vector embeddings, check out our docs on building AI apps.
Select schema in the movie model's folder
Click + in the FIELDS section
Enter embedding as the field's API identifier
Select vector as the field's type
That is all that we need to store data for our app! Now we need a way to generate embeddings. Luckily, OpenAI has an API that we can use to pass in text and get back a vector embedding.
Step 2: Add the OpenAI connection
Gadget has built-in connections to popular APIs, including OpenAI. You can use these connections to interact with external services in your app.
Click on Settings in the sidebar
Click on Plugins
Select OpenAI from the list of plugins
Use the Gadget development keys so you can start using the OpenAI API without an API key
We need some test data for our app. We're going to use a global action to fetch an open data source hosted on Hugging Face. We will then use the OpenAI connection to generate embeddings for our movie quotes.
Click the + next to the api/actions folder to create a new global action
Name the action file ingestData.js
Our OpenAI connection is already set up for us using Gadget-managed credentials. To learn more about how to set up your own OpenAI connection, check out our OpenAI connection docs.
Free OpenAI credits to get you started
Teams in Gadget get free OpenAI credits to use for experimenting during development! Using Gadget-managed OpenAI credentials automatically
draws from this credit pool.
Enter the following code in the generated code file (replace the entire file):
api/actions/ingestData.js
JavaScript
type Dataset = {
rows: {
row: {
quote: string;
movie: string;
type: string;
year: number;
};
}[];
};
export const run: ActionRun = async ({ logger, api, connections }) => {
// use Node's fetch to make a request to https://huggingface.co/datasets/ygorgeurts/movie-quotes
const response = await fetch(
"https://datasets-server.huggingface.co/first-rows?dataset=ygorgeurts%2Fmovie-quotes&config=default&split=train",
{
method: "GET",
headers: { "Content-Type": "application/json" },
}
);
const responseJson: Dataset = await response.json();
// log the response
logger.info(
{ responseJson },
"here is a sample of movies returned from hugging face"
);
// get the data in our record's format
const movies = responseJson.rows.map((movie) => ({
title: movie.row.movie,
quote: movie.row.quote,
embedding: [] as number[],
}));
// also get input data for the OpenAI embeddings API
const input = responseJson.rows.map(
(movie) => `${movie.row.movie} from the movie ${movie.row.quote}`
);
const embeddings = await connections.openai.embeddings.create({
input,
model: "text-embedding-ada-002",
});
// append embeddings to movies
embeddings.data.forEach((movieEmbedding, i) => {
movies[i].embedding = movieEmbedding.embedding;
});
// use the internal API to bulk create movie records
await api.internal.movie.bulkCreate(movies);
};
type Dataset = {
rows: {
row: {
quote: string;
movie: string;
type: string;
year: number;
};
}[];
};
export const run: ActionRun = async ({ logger, api, connections }) => {
// use Node's fetch to make a request to https://huggingface.co/datasets/ygorgeurts/movie-quotes
const response = await fetch(
"https://datasets-server.huggingface.co/first-rows?dataset=ygorgeurts%2Fmovie-quotes&config=default&split=train",
{
method: "GET",
headers: { "Content-Type": "application/json" },
}
);
const responseJson: Dataset = await response.json();
// log the response
logger.info(
{ responseJson },
"here is a sample of movies returned from hugging face"
);
// get the data in our record's format
const movies = responseJson.rows.map((movie) => ({
title: movie.row.movie,
quote: movie.row.quote,
embedding: [] as number[],
}));
// also get input data for the OpenAI embeddings API
const input = responseJson.rows.map(
(movie) => `${movie.row.movie} from the movie ${movie.row.quote}`
);
const embeddings = await connections.openai.embeddings.create({
input,
model: "text-embedding-ada-002",
});
// append embeddings to movies
embeddings.data.forEach((movieEmbedding, i) => {
movies[i].embedding = movieEmbedding.embedding;
});
// use the internal API to bulk create movie records
await api.internal.movie.bulkCreate(movies);
};
This code:
uses fetch to pull in a small sample dataset that stores movie quotes hosted on Hugging Face
loops through the returned data and creates a new movie record for each movie quotes
uses the OpenAI connection (connections.openai) to generate embeddings for each movie quote
uses your Gadget app's internal API to bulk create movie records with the generated embeddings
Now we can run our global action to ingest the data:
Click on the Run Action button to open your action in the API Playground
Run the action
The action will be run and a success message is returned once data has been added to the database.
We can also see the data in our Gadget database by:
Clicking on api/models/movie/data
You should see movie records, complete with title, quote, and embedding data!
Now that we have data in our database, we are ready to build the user-facing portion of our app.
Step 4: Use a global action to find similar movie quotes
Our app will allow users to enter a fake movie quote and find movie quotes that are similar to the entered text using a similarity search on the embeddings. We will use a global action to find the top 4 most similar movie quotes, and then present these movies to the user.
We can create a new global action:
Click the + next to the api/actions folder to create a new global action
Name the action file findSimilarMovies.js
Enter the following code in the generated code file (replace the entire file):
api/actions/findSimilarMovies.js
JavaScript
export const run: ActionRun = async ({ params, api, connections }) => {
const { quote } = params;
// throw an error if a quote wasn't passed in
if (!quote) {
throw new Error("Missing quote!");
}
// create an embedding from the entered quote
const response = await connections.openai.embeddings.create({
input: quote,
model: "text-embedding-ada-002",
});
// get the 4 most similar movies that match your quote, and return them to the frontend
const movies = await api.movie.findMany({
sort: {
embedding: {
cosineSimilarityTo: response.data[0].embedding,
},
},
first: 4,
select: {
id: true,
title: true,
},
});
// remove duplicates
const filteredMovies = movies.filter(
(movie, index) => movies.findIndex((m) => m.title === movie.title) === index
);
return filteredMovies;
};
// define custom params to pass values to your global action
export const params = {
quote: { type: "string" },
};
export const run: ActionRun = async ({ params, api, connections }) => {
const { quote } = params;
// throw an error if a quote wasn't passed in
if (!quote) {
throw new Error("Missing quote!");
}
// create an embedding from the entered quote
const response = await connections.openai.embeddings.create({
input: quote,
model: "text-embedding-ada-002",
});
// get the 4 most similar movies that match your quote, and return them to the frontend
const movies = await api.movie.findMany({
sort: {
embedding: {
cosineSimilarityTo: response.data[0].embedding,
},
},
first: 4,
select: {
id: true,
title: true,
},
});
// remove duplicates
const filteredMovies = movies.filter(
(movie, index) => movies.findIndex((m) => m.title === movie.title) === index
);
return filteredMovies;
};
// define custom params to pass values to your global action
export const params = {
quote: { type: "string" },
};
Finding similar vectors with cosine similarity
This api.movie.findMany call from the above function is the key to finding similar movies:
api.movie.findMany({...}) in api/actions/findSimilarMovies.js
JavaScript
// get the 4 most similar movies that match your quote, and return them to the frontend
const movies = await api.movie.findMany({
sort: {
embedding: {
cosineSimilarityTo: response.data[0].embedding,
},
},
first: 4,
select: {
id: true,
title: true,
},
});
// get the 4 most similar movies that match your quote, and return them to the frontend
const movies = await api.movie.findMany({
sort: {
embedding: {
cosineSimilarityTo: response.data[0].embedding,
},
},
first: 4,
select: {
id: true,
title: true,
},
});
Gadget has built-in vector distance sorting which we use to get the most similar vectors to the user's entered text. We use the cosineSimilarityTo operator to find the cosine similarity between the user's entered text and the movie quotes in our database.
Step 5: Add a route to generate a scene
Now for the final backend development step: adding an HTTP route to our Gadget app that will be called by the frontend to generate a scene. We make use of Gadget's OpenAI connection to generate a scene using the user's entered text and a movie quote.
Why not use a global action?
We used a global action to ingest data and find similar movies, but we're using a route to generate a scene. You might be asking yourself why?
There are two main reasons:
Global actions do not support streaming responses, and we want to stream the text returned from OpenAI to the frontend
The openAIResponseStream helper we are using integrates seamlessly with HTTP routes
In general, we suggest you use global actions over HTTP routes whenever possible. But when streaming or integrating with external systems or packages, HTTP routes can be a better choice. To read more about when to use each, see the Actions guide.
Add a api/routes/POST-chat.js HTTP route file to your app and paste the following code:
api/routes/POST-chat.js
JavaScript
import { RouteHandler } from "gadget-server";
import { openAIResponseStream } from "gadget-server/ai";
/**
* Route handler for POST chat
*
* See: https://docs.gadget.dev/guides/http-routes/route-configuration#route-context
*/
const route: RouteHandler<{
Body: { quote: string; movie: string };
}> = async ({ request, reply, api, logger, connections }) => {
const prompt = `Here is a fake movie quote: "${request.body.quote}" and a movie selected by a user: "${request.body.movie}". Write a fake scene for that movie that makes use of the quote. Use a maximum of 150 words.`;
// get streamed response from OpenAI
const stream = await connections.openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [
{
role: "system",
content: `You are an expert, hilarious AI screenwriter tasked with generating funny, quirky movie scripts.`,
},
{ role: "user", content: prompt },
],
stream: true,
});
await reply.send(openAIResponseStream(stream));
};
export default route;
import { RouteHandler } from "gadget-server";
import { openAIResponseStream } from "gadget-server/ai";
/**
* Route handler for POST chat
*
* See: https://docs.gadget.dev/guides/http-routes/route-configuration#route-context
*/
const route: RouteHandler<{
Body: { quote: string; movie: string };
}> = async ({ request, reply, api, logger, connections }) => {
const prompt = `Here is a fake movie quote: "${request.body.quote}" and a movie selected by a user: "${request.body.movie}". Write a fake scene for that movie that makes use of the quote. Use a maximum of 150 words.`;
// get streamed response from OpenAI
const stream = await connections.openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [
{
role: "system",
content: `You are an expert, hilarious AI screenwriter tasked with generating funny, quirky movie scripts.`,
},
{ role: "user", content: prompt },
],
stream: true,
});
await reply.send(openAIResponseStream(stream));
};
export default route;
The OpenAI connection is used to call the chat completions endpoint, which generates a scene from the user's selected movie and entered quote.
Now we can call this route from our frontend to generate a scene!
Step 6: Build the frontend
Now that we have defined our global actions and HTTP route, we can add support to call them from the frontend.
Gadget's React frontends are built on top of Vite, and include support for email/password auth as well as Google Auth. Our frontend code lives in the web folder. We will only be making changes to a single frontend route, web/routes/signed-in.jsx, which is the route accessed when a user is signed in to our app.
Paste the following code into web/routes/signed-in.jsx:
web/routes/signed-in.jsx
React
import { useGlobalAction, useFetch, useMaybeFindFirst, useActionForm } from "@gadgetinc/react";
import { api } from "../api";
import { useState } from "react";
export default function () {
// see if movie data exists in the database!
const [{ data: movieDataIngested, fetching: checkingIfMovieDataExists, error: errorCheckingForData }, retry] = useMaybeFindFirst(
api.movie
);
// fire action used to ingest data from HuggingFace model
const [{ fetching: ingestingData, error: errorIngestingData }, ingestData] = useGlobalAction(api.ingestData);
return (
<main style={{ width: "60vw", position: "absolute", top: 40 }}>
<div>
<h1>Make-a-movie scene (with AI)</h1>
<p>Write a fake movie quote, pick a suggested movie, and let OpenAI generate a new scene!</p>
</div>
<br />
{checkingIfMovieDataExists && <div className="loader"></div>}
{ingestingData && (
<div className="row">
<h2>Fetching movie data...</h2>
</div>
)}
{errorCheckingForData && <p className="error">{errorCheckingForData.message}</p>}
{errorIngestingData && <p className="error">{errorIngestingData.message}</p>}
{!movieDataIngested && !checkingIfMovieDataExists && (
<button
onClick={async () => {
await ingestData();
await retry();
}}
disabled={ingestingData}
>
Ingest data
</button>
)}
{movieDataIngested && <MovieQuoteForm />}
</main>
);
}
const MovieQuoteForm = () => {
// used to track the reset state of the form
const [isReset, setIsReset] = useState(true);
// state for the currently selected movie
const [movie, setMovie] = useState("");
// action for finding movies with similar quotes
const { submit, register, actionData, error, formState, watch, reset } = useActionForm(api.findSimilarMovies);
const similarMovies = actionData as { id: string; title: string }[] | undefined;
// watch changes to the quote state in our form, and store in a variable
const quote = watch("quote");
return (
<>
<form
onSubmit={async (e) => {
e.preventDefault();
await submit();
setIsReset(true);
}}
style={{ maxWidth: "100%" }}
autoComplete="off"
>
<div className="row" style={{ display: "flex" }}>
<input
style={{ flex: "1", marginRight: "4px" }}
placeholder="Enter a fake movie quote! Ex. Here's a toast to you, my dear."
{...register("quote")}
disabled={formState.isSubmitting}
/>
<button type="submit" disabled={formState.isSubmitting} style={{ marginRight: "4px" }}>
Find quotes
</button>
<button
disabled={!formState.isDirty}
onClick={() => {
// reset the form
reset();
setIsReset(false);
}}
>
Reset
</button>
</div>
</form>
{error && <p className="error">There was an error fetching similar movies. Check your Gadget logs for more details!</p>}
{quote && similarMovies && isReset && (
<>
<div className="row" style={{ textAlign: "left", paddingBottom: 8 }}>
<b>Movies with similar quotes:</b>
</div>
<form>
<div
className="row"
style={{
display: "flex",
flexWrap: "wrap",
textAlign: "left",
gap: 16,
}}
>
{similarMovies.map((movieRecord, i) => (
<span key={`movie_option_${i}`}>
<input
type="radio"
checked={movieRecord.title == movie}
value={movieRecord.title}
onChange={(e) => setMovie(e.target.value)}
id={movieRecord.id}
/>
<label htmlFor={movieRecord.id}>{movieRecord.title}</label>
</span>
))}
</div>
</form>
</>
)}
{movie && quote && isReset && <SceneGenerator movie={movie} quote={quote} />}
</>
);
};
const SceneGenerator = ({ movie, quote }: { movie: string; quote: string }) => {
// call HTTP route and stream response from OpenAI
const [{ data, fetching, error }, sendPrompt] = useFetch("/chat", {
method: "post",
body: JSON.stringify({ movie, quote }),
headers: {
"content-type": "application/json",
},
stream: "string",
});
return (
<section>
<button onClick={() => void sendPrompt()}>Generate scene</button>
{error && <p className="error">{error.message}</p>}
{fetching && <div className="loader" />}
{data && (
<pre
style={{
border: "dashed black 1px",
background: "#f5f5f5",
padding: "10px",
maxHeight: "45vh",
overflowY: "scroll",
whiteSpace: "pre-wrap",
textAlign: "left",
}}
>
{data}
</pre>
)}
</section>
);
};
import { useGlobalAction, useFetch, useMaybeFindFirst, useActionForm } from "@gadgetinc/react";
import { api } from "../api";
import { useState } from "react";
export default function () {
// see if movie data exists in the database!
const [{ data: movieDataIngested, fetching: checkingIfMovieDataExists, error: errorCheckingForData }, retry] = useMaybeFindFirst(
api.movie
);
// fire action used to ingest data from HuggingFace model
const [{ fetching: ingestingData, error: errorIngestingData }, ingestData] = useGlobalAction(api.ingestData);
return (
<main style={{ width: "60vw", position: "absolute", top: 40 }}>
<div>
<h1>Make-a-movie scene (with AI)</h1>
<p>Write a fake movie quote, pick a suggested movie, and let OpenAI generate a new scene!</p>
</div>
<br />
{checkingIfMovieDataExists && <div className="loader"></div>}
{ingestingData && (
<div className="row">
<h2>Fetching movie data...</h2>
</div>
)}
{errorCheckingForData && <p className="error">{errorCheckingForData.message}</p>}
{errorIngestingData && <p className="error">{errorIngestingData.message}</p>}
{!movieDataIngested && !checkingIfMovieDataExists && (
<button
onClick={async () => {
await ingestData();
await retry();
}}
disabled={ingestingData}
>
Ingest data
</button>
)}
{movieDataIngested && <MovieQuoteForm />}
</main>
);
}
const MovieQuoteForm = () => {
// used to track the reset state of the form
const [isReset, setIsReset] = useState(true);
// state for the currently selected movie
const [movie, setMovie] = useState("");
// action for finding movies with similar quotes
const { submit, register, actionData, error, formState, watch, reset } = useActionForm(api.findSimilarMovies);
const similarMovies = actionData as { id: string; title: string }[] | undefined;
// watch changes to the quote state in our form, and store in a variable
const quote = watch("quote");
return (
<>
<form
onSubmit={async (e) => {
e.preventDefault();
await submit();
setIsReset(true);
}}
style={{ maxWidth: "100%" }}
autoComplete="off"
>
<div className="row" style={{ display: "flex" }}>
<input
style={{ flex: "1", marginRight: "4px" }}
placeholder="Enter a fake movie quote! Ex. Here's a toast to you, my dear."
{...register("quote")}
disabled={formState.isSubmitting}
/>
<button type="submit" disabled={formState.isSubmitting} style={{ marginRight: "4px" }}>
Find quotes
</button>
<button
disabled={!formState.isDirty}
onClick={() => {
// reset the form
reset();
setIsReset(false);
}}
>
Reset
</button>
</div>
</form>
{error && <p className="error">There was an error fetching similar movies. Check your Gadget logs for more details!</p>}
{quote && similarMovies && isReset && (
<>
<div className="row" style={{ textAlign: "left", paddingBottom: 8 }}>
<b>Movies with similar quotes:</b>
</div>
<form>
<div
className="row"
style={{
display: "flex",
flexWrap: "wrap",
textAlign: "left",
gap: 16,
}}
>
{similarMovies.map((movieRecord, i) => (
<span key={`movie_option_${i}`}>
<input
type="radio"
checked={movieRecord.title == movie}
value={movieRecord.title}
onChange={(e) => setMovie(e.target.value)}
id={movieRecord.id}
/>
<label htmlFor={movieRecord.id}>{movieRecord.title}</label>
</span>
))}
</div>
</form>
</>
)}
{movie && quote && isReset && <SceneGenerator movie={movie} quote={quote} />}
</>
);
};
const SceneGenerator = ({ movie, quote }: { movie: string; quote: string }) => {
// call HTTP route and stream response from OpenAI
const [{ data, fetching, error }, sendPrompt] = useFetch("/chat", {
method: "post",
body: JSON.stringify({ movie, quote }),
headers: {
"content-type": "application/json",
},
stream: "string",
});
return (
<section>
<button onClick={() => void sendPrompt()}>Generate scene</button>
{error && <p className="error">{error.message}</p>}
{fetching && <div className="loader" />}
{data && (
<pre
style={{
border: "dashed black 1px",
background: "#f5f5f5",
padding: "10px",
maxHeight: "45vh",
overflowY: "scroll",
whiteSpace: "pre-wrap",
textAlign: "left",
}}
>
{data}
</pre>
)}
</section>
);
};
The frontend has 3 components: the default export for the route, the MovieQuoteForm component, and the SceneGenerator component. These 3 components all make use of different @gadgetinc/react hooks that help us make requests and manage our form state. The hooks simplify the management of response and form state, and let us interact with responses and forms in a React-ful way through the returned data, fetching, and error objects.
the route's default export is responsible for calling the ingestData global action (if you haven't already done so!) using the useGlobalAction hook (more info on useGlobalAction)
the MovieQuoteForm component manages and submits the input form for the entered quote, and calls the findSimilarMovies global action using the useActionForm hook (more info on useActionForm) which then allows users to select a movie from the returned actionData
the SceneGenerator component makes a request to the /chat HTTP route using the useFetch hook (more info on useFetch) and displays a streamed response
Remove background-image
You can clean up the appearance of your project by removing the background-image from the .app CSS class set in web/components/App.css:
Search for and remove this line from the .app class in web/components/App.css
