Legacy custom components
This tutorial refers to the legacy custom component feature of Retool. This method for building custom components is deprecated.
Tutorial
Add a ChatGPT prompt clone for your Retool app
This tutorial will show how to create a ChatGPT prompt clone that you can add to your Retool app. Have Retool ready, a developer account with OpenAI, and let's get started.
Prerequisites
You will need:
- A Weavy API key
- A Retool account
- An OpenAI developer account
1. Weavy API key and backend
First we need an API key to communicate with the Weavy backend.
Sign up for an account
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
Select what environment you want to use for the tutorial
We need an API key to communicate with Weavy for authentication, etc
2. OpenAI API Key
To connect the bot to OpenAI, we need an OpenAI API key. Log in to your OpenAI account and find or create an API key.
Copy and paste the OpenAPI key here
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.
This is what shown for the end user in title bars, search results for users, etc.
A unique identifier for the bot - cannot contain whitespace and must contain at least one non-digit.
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 a terminal window and run it
curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'BOT-UID', 'name': 'BOT-NAME', is_bot: true, 'metadata': {'family': 'OpenAI', 'model' : 'gpt-4o', 'api_key' : 'OPENAI-API-KEY'} }"Note
Replace
WEAVY-URL and WEAVY-API-KEY with your Weavy backend URL and API key.No API key selected
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
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
WeavyRetoolWorkflowfrom the Select Workflow dropdown - Update the
Workflow parametersaccording 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 behaviortoAutomatic - Click
Save & Run - If successful, you should see an access token in the output window
Don't have the workflow?
Make sure you have imported the authentication workflow into Retool following our tutorial before adding Weavy features to your app.
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
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="WY_BACKEND_URL/uikit-web/weavy.js"></script>
<script>
const weavy = new Weavy();
weavy.url = "WY_BACKEND_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>Note
Replace WEAVY-URL with your backend URL, and make sure that the BOT-UID is the one you created.
No API key selected
You haven't selected an API key. If you do - code snippets, scripts and files you download will automatically be updated with API key and backend URL.
- Line 6 - getting the access token from the workflow passed through the model.
- Line 24 - rendering the messenger component with bot mode enabled.
Tip
If it for some reason, gets stuck and all you see is a spinner, try and uncheck and check one of the interaction options - this will force the custom component to re-render on the canvas.
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 added, just like that.
Known limitations
In this version of Custom Components, we're limited to the canvas area of the component when it comes to rendering previews of files, etc. This will be resolved when Retool releases Custom Components 2.0
Fill out all the values to continue.
Invalid input for the unique identifier.