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.
You will need:
First we need an API key to communicate with the Weavy backend.
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
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.
curl WEAVY-URL/api/users -H "Authorization: Bearer WEAVY-API-KEY" --json "{ 'uid': 'BOT-UID', 'name': 'BOT-NAME', is_bot: true, 'metadata': {'family': 'gemini', 'api_key' : 'GEMINI-API-KEY'} }"WEAVY-URL and WEAVY-API-KEY with your backend URL and API key.You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
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
getAccessTokenWeavyRetoolWorkflow from the Select Workflow dropdownWorkflow parameters according to the JSON snippet below.Workflow paramaters
{
"uid" : "{{ current_user.sid }}",
"fullname" : "{{ current_user.fullName }}",
"email" : "{{ current_user.email }}",
"avatar" : "{{ current_user.profilePhotoUrl }}"
}Run behavior to AutomaticSave & RunMake sure you have imported the authentication workflow into Retool following our tutorial before adding Weavy features to your app.
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;
ModelIFrame CodeCheck the following for Interaction;
Model with;Model in the inspector - copy and paste this code
{
"token" : {{ getAccessToken.data.access_token }}
}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.
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>Replace WEAVY_URL with your backend URL.
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
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.
To access live chat with our developer success team you need a Weavy account.