<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
HACKATHON: Create cutting-edge enterprise apps using Retool + WeavyRead more
Guide

Create a Superblocks boilerplate app with Weavy components

This guide will help you create an empty Superblocks app and with all the needed parts to use Weavy components with simple drag-n-drop!

1. Weavy API Key and backend

We need an API key to communicate with the Weavy backend.
 

2. Create a Weavy API Integration

We need to create a bridge between Weavy and Superblocks. We'll define a new WeavyAPI REST integration. This is where you securely can configure the server connection to the Weavy backend.

  • Open the integrations page in Superblocks and click Add integration.
  • Add REST API.
  • Name the integration WeavyAPI. Make sure you get the name right as it will be referenced later.
  • Use WY_BACKEND_URL as Base URL.
  • In Authentication, select Bearer Token.
  • Copy the masked API key below as the Token.
  • Add a Header with the key Content-Type and set the value to application/json.
  • Click Create to save the integration.
Weavy API Key
WY_API_*****************

3. Clone the repo

The repo contains everything you need to set up and configure the demo app and a template for using Weavy as custom components in a Superblocks app.
Clone the repo
git clone https://github.com/weavy-labs/superblocks-weavy-components.git superblocks-weavy-components

4. Install dependencies

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

Install
npm install

5. Log in to Superblocks

The component repo is using the Superblocks CLI to work with the custom components. Log in to your Superblocks account.

Log in to Superblocks CLI
npx superblocks login

6. Create the boilerplate app

Once you have your Superblocks authentication configured, you can run the create:template script to upload and configure the Weavy workflows and create an empty app with Weavy components and all additional parts needed.

During the installation you will have to deploy the created workflows to make them available for your apps. Just follow the instructions in the terminal to open the workflows in the browser and deploy them.
Run the script in the project root
npm run create:template

The script will automatically configure the following:

  • It creates a WeavyAuthentication workflow for user authentication token handling. The workflow is using the WeavyAPI you created.
  • It creates a WeavyPageNavigation workflow 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 using the WeavyAPI you created.
  • It creates a demo app called WeavyDemo that has the Weavy components installed and configured.
superblocks-workflow-deploy

7. Done!

Click the link in the terminal window, and there we have it - a complete Superblocks 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!

superblocks-app-v2
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account