In this quickstart you will build an app that creates and displays custom Gadgémon (Gadget Monsters). Custom sprites for your Gadgémon will be generated using OpenAI's DALL-E API and Gadget's built-in OpenAI connection.
What you'll learn
After finishing this quickstart, you will know how to:
Select the Web app type, enter your app's domain name, and click Get started
Step 2: Build your model
Models in Gadget work similarly to models in an ORM (object relational mapper) and map to tables in a database. They have one or more fields which are columns in your tables and are used to store your application data.
Create a new model to store your Gadgémon:
Click the + button next to api/models to create a new model
Name your model gadgemon and hit Enter on your keyboard
You can add fields to your model on the schema page at api/models/gadgemon/schema:
Click the + button next to FIELDS and call the new field name (leave it as the default string type)
Now add the additional fields to your Gadgémon model:
similar: a string field that describes what your Gadgémon looks like
element: an enum field with options grass, fire, and water
sprite: a file field that will store a generated image
More on models
That's it for building your Gadgémon model! To learn more about models, see the models documentation.
Step 3: Add the OpenAI plugin
Gadget has built-in plugins you can use to connect your app with external services, such as OpenAI.
You can add the OpenAI plugin to your app by following these steps:
Click on Settings in the sidebar
Click on Plugins
Select OpenAI from the list of plugins
Leave the default Gadget development keys selected and click Add connection
More on plugins
You can now use the OpenAI connection in your app to generate sprites for your Gadgémon. To learn more about
plugins check out the plugins documentation.
Step 4: Write your backend action
As you build models in Gadget, a CRUD (create, read, update, delete) API is automatically generated. You can see these actions and the code that powers them in the api/models/gadgemon/actions folder.
Now add code to your gadgemon.create action that generates a sprite for your Gadgémon using the OpenAI plugin:
Go to api/model/gadgemon/actions/create.js
Paste the following code (replace the entire file):
3exportconst run:ActionRun=async({ params, record, logger, api })=>{
4applyParams(params, record);
5awaitsave(record);
6};
7
8exportconst onSuccess:ActionOnSuccess=async({
9 params,
10 record,
11 logger,
12 api,
13 connections,
14})=>{
15// "record" is the newly created Gadgemon, with name, similar and element fields that will be added by the user
16const{ id, name, similar, element }= record;
17
18// prompt sent to OpenAI to generate the Gadgemon sprite
19const prompt =`A pixel art style pokemon sprite named ${name} that looks similar to a ${similar} that is a ${element} element. Do not include any text, including the name, in the image`;
20
21// call the OpenAI images generate (DALL-E) API: https://github.com/openai/openai-node/blob/v4/src/resources/images.ts
3exportconstrun:ActionRun=async({ params, record, logger, api })=>{
4applyParams(params, record);
5awaitsave(record);
6};
7
8exportconstonSuccess:ActionOnSuccess=async({
9 params,
10 record,
11 logger,
12 api,
13 connections,
14})=>{
15// "record" is the newly created Gadgemon, with name, similar and element fields that will be added by the user
16const{ id, name, similar, element }= record;
17
18// prompt sent to OpenAI to generate the Gadgemon sprite
19const prompt =`A pixel art style pokemon sprite named ${name} that looks similar to a ${similar} that is a ${element} element. Do not include any text, including the name, in the image`;
20
21// call the OpenAI images generate (DALL-E) API: https://github.com/openai/openai-node/blob/v4/src/resources/images.ts
32 logger.info({ imageUrl },`Generated image URL for Gadgemon id ${id}`);
33
34// save the image file to the newly created Gadgémon record
35await api.gadgemon.update(id,{
36gadgemon:{
37sprite:{
38copyURL: imageUrl,
39},
40},
41});
42};
43
44exportconstoptions:ActionOptions={
45actionType:"create",
46};
This code will run every time your gadgemon.create API action is called.
Test your action
Gadget apps include an API playground that can be used to test your actions.
Use the playground to run your code in the gadgemon.create action:
While in api/models/gadgemon/actions/create.js, click the Run Action button.
Use the playground's API client to create a Gadgémon:
call create action in playground
JavaScript
await api.gadgemon.create({
name:"Gadgetbot",
similar:"robot",
element:"grass",
});
await api.gadgemon.create({
name:"Gadgetbot",
similar:"robot",
element:"grass",
});
Click the execute query button to run the action
You should see a success: true response in the playground, which means you created a new gadgemonrecord.
Go to api/models/gadgemon/data to view your model records
More on actions
Actions define your application's API. To learn more about actions, see the actions guide.
Step 5: Build your frontend
You need an interface to create and display your Gadgémon. In Gadget, your Vite + React frontend is found inside the web folder, and an API client has been set up for you in web/api.js.
You will use this client and Gadget's React hooks to call your gadgemon.create action and read gadgemon model records.
Go to web/routes/signed-in.jsx and replace the contents with the following code:
74{/** iterate over gadgemon returned from useFindMany hook */}
75{!myGadgemon || myGadgemon.length==0?(
76<pclassName="format-message">Start by creating a Gadgémon!</p>
77):(
78<div
79style={{
80display:"flex",
81flexDirection:"row",
82flexWrap:"wrap",
83width:"100%",
84marginTop:"16px",
85justifyContent:"center",
86}}
87>
88{myGadgemon?.map((gadgemon, i)=>(
89<div
90key={`gadgemon_${i}`}
91style={{
92width:"256px",
93display:"flex",
94flexDirection:"column",
95alignItems:"center",
96padding:"4px",
97border:"1px solid lightgrey",
98margin:"8px",
99}}
100>
101<b>{gadgemon.name}</b>
102<imgsrc={gadgemon.sprite?.url}/>
103<pstyle={{maxWidth:"80%"}}>
104 the "{gadgemon.element} {gadgemon.similar}" Gadgémon
105</p>
106</div>
107))}
108</div>
109)}
110</section>
111</div>
112</>
113);
114}
More on frontends
Like your database and backend, your Gadget frontends are already hosted and live on the internet. For more information on frontends, read
the frontend docs.
Test your app
Now you can view your completed app (and your Gadgémon!) in the frontend:
Click Preview in the top right of the Gadget editor
Sign up and sign in to your app
You should see your Gadgémon displayed on the page.
Try creating new Gadgémon using the form!
Next steps
Try out some of our other tutorials to learn more about building with Gadget: