Tutorial

Add a Gemini AI prompt to your Retool app

This tutorial will show how to add the Gemini AI to your Retool app.

Have Retool ready, an account with Google AI for Developers, and get your Weavy API key - let's get started.

Don't have your Weavy API Key? Sign up for free, or sign in and set up your environment to get your API key.

1. What we are building

We're adding a Gemini AI prompt using our messenger block. You can add it to any view in your Retool app, like the one you see here ➡️. 

It's live, so try it out. Click the + in the top right corner and strike up a conversation with our bot, Gemini AI, which is using Google Gemini AI with its latest model.

Follow this tutorial, and you'll have Gemini AI in your Retool app within minutes.

2. Weavy API Key

First, we need the API key for Weavy to connect to the Web API to create and fetch user information.

3. Gemini API Key

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

4. Name the bot

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

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

5. 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': 'Gemini', 'api_key' : '***---***'} }"
This will create a bot user in Weavy using Gemini and its latest model.

6. Authentication

This workflow we'll import, will get the authenticated user in your Retool app, sync it with Weavy, and return an access token.

  • Download WeavyRetoolWorkflow.JSON (link below)
  • Go to Workflows in Retool
  • Click Create New and select From JSON
  • Choose to Upload a file in the modal and then Create workflow
  • All settings are already included, so all you have to do is Deploy (up to the right)
    • If the Deploy button is disabled, it's either already deployed (look for the text Latest version deployed), or some of the settings might not have loaded correctly - simply refresh, and it should be working.
    • Any message about no triggers configured can be ignored.
Download WeavyRetoolWorkflow.JSON

7. Get access token

Now, we'll put the workflow to work in your app to get an access token for the logged-in user.

Navigate to your app, go to Code in the left panel, to add a query, select Import Workflow

  • Name it getAccessToken
  • Select WeavyRetoolWorkflow from the Select Workflow dropdown
  • Change Workflow parameters to JSON and change the values to;
    • avatar: {{ current_user.profilePhotoUrl }}
    • email: {{ current_user.email }}
    • fullname: {{ current_user.fullName }}
    • uid: {{ current_user.sid }}
  • Expand Run behavior and select Automatic
  • Click Save & Run
  • If successful, you should see an access token in the output window

 

importworkflow3

8. 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

9. Pass access token

This will trigger the workflow, return an access token, and pass it to the custom component. Update Model with;

Update model
{
  "token" : {{ getAccessToken.data.access_token }}
}

10. Render messenger

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";
    weavy.zoomAuthenticationUrl = "https://zoom.us/oauth/authorize?response_type=code&client_id=hJPBXEDrRCyQgcWj47xv9w&redirect_uri=https://webdemo2.weavy.io/meetings/zoom/auth";
    window.Retool.subscribe(function (model) {
      weavy.tokenFactory = model.token ? async (refresh) => model.token : undefined;
    });
 </script>

<style>
  :root { 
    --wy-theme-color: #3170F9; 
    --wy-border-radius:0px;
    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 5 - enables the Zoom meeting integration.
  • Line 7 - getting the access token from the workflow passed through the model.
  • Line 13-14 - set styling using CSS variables, find more variables here.
  • Line 25 - rendering the Messenger building block with bot mode enabled.

11. Done!

The Custom Component with the Messenger building block 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 - an AI prompt added, just like that.

gemini-retool
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.

The next step is 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 building blocks contextually.

Best way to learn step by step how it works
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