Create a Retool app with Weavy components

In this guide, we'll be adding all Weavy features as custom components so they'll show up in the Component Library in your Retool app - just drag and drop!

Prerequisites

You will need:

A Weavy API key
A Retool account
Admin permissions in Retool
Git
Node.js

1. Weavy API key and backend

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. You can find your API key and backend URL in your Weavy account.

2. Clone repo

The repo contains everything you need to set up and configure the demo app and use Weavy as custom components in your Retool app.

Start by cloning the repo:

git clone https://github.com/weavy-labs/retool-weavy-components.git retool-weavy-components

3. Install dependencies

Change your directory to retool-weavy-components and run:

npm install

4. Environment variables

We need the environment URL and an API key to communicate with the Weavy backend. To make this available for the scripts in the repo, we need to place it in a .env file.

Copy into the .env file in the root of the project:

WEAVY_URL="WY_BACKEND_URL"
WEAVY_APIKEY="WY_API_*****************"

Note

Replace WY_BACKEND_URL with the URL to your Weavy backend.

Replace WY_API_***************** with an API key for your Weavy backend.

You can find this information in your Weavy account.

Create a .env file in the root of your project folder and copy the above into the file.

5. Log in to Retool

The installation scripts are using the Retool CLI and the Custom Components Library utils to create the demo.

Make sure you have admin permissions in Retool.
The login command will ask you to create an API access token with read-and-write scopes for Custom Component Libraries in your Retool account. See the Retool API authentication documentation for additional instructions on generating an access token. Make sure to copy or save the token.
Login to Retool CLI and the Custom Components Library using the following command:

npm run login

Run this command in the project's root folder.

6. Install demo app

Once you have your Retool authentication configured, you can run the installation script to upload and configure the Weavy components and the demo app.

Run the script in the project root:

npm run create:demo

The script will automatically configure the following:

It sets a global WEAVY_URL Javascript variable. You can see it under Settings > Advanced settings > Preloaded Javascript in your Retool account.
It creates a WeavyAuthentication workflow for authentication token handling in the Workflows section in Retool. The Workflow is configured with your Weavy API key.
It creates a WeavyPageNavigation workflow in the Workflows section for saving page metadata that is needed by Weavy Notifications to be able to navigate back to the container their content originated from. The Workflow is configured with your Weavy API key.
It installs the Weavy components under Settings > Custom Components Library in your Retool account.
It creates a demo app called Weavy Components - Basic Layout in the Apps section in Retool.

7. Done!

Click the link in the terminal window, and there we have it - a complete Retool demo app using Weavy components.

Select data in the table and see how the right panel updates with collaboration components. In the top right corner, you can also see a messenger icon; click it to open a drawer with our messenger component.

It even works with notifications - toasts, deep navigation, and all - see the notifications icon in the top bar.

Now, imagine all this in your app!