<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Tutorial

Create a Gemini AI prompt for your Retool app

This tutorial will show how to create a Gemini AI prompt that you can add to your Retool app. Have Retool ready and a Google AI Studio account, and let's get started.

1. Weavy API key and backend

First we need an API key to communicate with the Weavy backend.

2. Gemini AI API Key

To connect the bot to Gemini AI, we need an API key. Log in to your Google AI Studio account and find or create an API key. 

3. Name the bot

The bot needs a display name (what the end user sees) and a unique identifier required when rendering our messenger in bot mode.

The unique identifier (uid) is also used to update the bot through the Web API, etc.

4. Create the bot

Now it's time to create the bot in Weavy through the API using CURL with your provided information.
Copy and paste this into command in a terminal window and run it 
curl WEAVY_URL/api/users -H "Authorization: Bearer ********************" --json "{ 'uid': 'BOT_UID', 'name': 'BOT_NAME', is_bot: true, 'metadata': {'family': 'OpenAI', 'model' : 'gpt-4o', 'api_key' : '***---***'} }"
This will create a bot user in Weavy using OpenAI with the gpt-4o model.

5. Get access token

For our Weavy component to work, we need an access token from the authentication workflow. 

Go to Code in the left panel, click the + and select Import Workflow

  • Name it getAccessToken
  • Select WeavyRetoolWorkflow from the Select Workflow dropdown
  • Update the Workflow parameters according to the JSON snippet below.
Copy and paste into Workflow paramaters 
{ 
  "uid" : "{{ current_user.sid }}", 
  "fullname" : "{{ current_user.fullName }}", 
  "email" : "{{ current_user.email }}", 
  "avatar" : "{{ current_user.profilePhotoUrl }}" 
}
  • Change the Run behavior to Automatic
  • Click Save & Run
  • If successful, you should see an access token in the output window
workflow2

6. Add custom component

Search for Custom component in the components search bar.

Drag and drop it onto the canvas and do the following in the inspector:

For Content;

  • Remove all code in Model
  • Remove all code in IFrame Code

Check the following for Interaction;

  • Downloads
  • Forms
  • Modals
  • Popups
  • Fullscreen
  • Top-level navigation
  • Storage and cookies
addcustomcomponent

7. Pass access token

This will trigger the workflow, return an access token, and pass it to the custom component. Update Model with;
Modify Model in the inspector - copy and paste this code 
{
  "token" : {{ getAccessToken.data.access_token }}
}

8. Add AI prompt

In the IFrame code for the custom component, we'll initiate the Weavy context and pass the access token to the token factory for authentication.

Once authenticated, we can render the messenger component in bot mode from Weavy.

Modify IFrame Code in the inspector - copy and paste this code 
<script src="WEAVY_URL/uikit-web/weavy.js"></script>    
<script>
    const weavy = new Weavy();
    weavy.url = "WEAVY_URL";
    window.Retool.subscribe(function (model) {
      weavy.tokenFactory = model.token ? async (refresh) => model.token : undefined;
    });
 </script>

<style>
  :root { 
    --wy-theme-color: #3170F9; 
    --wy-border-radius:8px;
    font-family: "Inter var", sans-serif
  }
  html, body { 
    padding: 0px; 
    margin:0px; 
    height:100%;
  }
</style>

<div style="height:100%;display:flex;background:#fff">
    <wy-messenger bot="BOT_UID"></wy-messenger>
</div>
  • Line 6 - getting the access token from the workflow passed through the model.
  • Line 24 - rendering the messenger component with bot mode enabled.

9. Done!

The Custom Component with the Messenger component should load instantly - but toggle to Preview mode to see the full experience.

Note that this is fully working now and available for all your users if you want - AI prompting with Gemini AI added, just like that.

openai-retool2
On this page
Next

What's next?

Build

Build workflow and custom component

A step-by-step guide to building a workflow and rendering a building block with the logged-in user.

This tutorial guides you through all the steps to fetch the logged-in user of your Retool app, create a workflow to sync the user with Weavy, and generate an access token so all of your users can start using our components.

Best way to learn step by step how it works
Start building
Import

Import complete workflow and app

Use our JSON templates and import to quickly have it up and running to experiment.

We created a prebuilt workflow that fetches information about the current user in Retool, communicates with the Weavy API, and renders all our building blocks in an app.
The fastest way to get up and running with access tokens, etc.
Easy to extract to your own apps/modules
Start importing

There's more

Check out the other tutorials for setting up workflows, queries, and more.

All tutorials
Ask AI
Support

You're not signed in to your Weavy account. To access live chat with our developer success team you need to be signed in.

Sign in or create a Weavy account