<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
TutorialslowcodecoweaverCopilotToolJet

Adding a fully integrated AI copilot to your ToolJet app

Bring context-aware AI directly into your app with custom components powered by your own data.

Jun 5, 2025

Building with ToolJet and Weavy

ToolJet is an open-source low-code platform that empowers developers to build custom applications with ease. By leveraging its intuitive interface, users can create apps tailored to their specific needs, enhancing functionality and user experience. With ToolJet, developers can seamlessly integrate various data sources and APIs, enabling rapid application development and deployment.

Weavy can further enhance the building possibilities in ToolJet by adding layers of collaboration, AI, file sharing and realtime updates. This is accomplished through the power components of Weavy. The components provide an extensive, customizable UI powered by a turn-key backend. These can be integrated in ToolJet as Custom components.

For this guide, we're building an AI copilot component that is integrated with dynamic data in your app, complete with authentication, user syncing and theming. Weavy provides a built-in AI Agent, but you may configure it to use your own agent using Google Gemini, OpenAI ChatGPT, Anthropic Claude or Kapa.ai.

My name is Klas Jersevi and I'm Head of Products at Weavy. I'm based in the southern part of lovely 🇸🇪 Sweden! My background is in creating apps and components for the web, with focus on UX and DevEx. I love the challenge of adapting new technologies and platforms, especially with the journey of AI!
Prerequisites for integrating Weavy with ToolJet
  • ToolJet account.
  • A Weavy account with a Weavy environment (v28.0.2 or later).
  • An API key for your Weavy environment.

Adding a Weavy data source

tooljet-datasourceTo get started with Weavy components we first need to set up Authentication for the components. This is always handled securely on the server side. To achieve this we need a data source that the authentication queries can use in the app. 

  • Go to the Data sources section in ToolJet.
  • Add a new REST API data source.
  • Set the name of the data source to WeavyAPI.
  • Set the Base URL to https://[WEAVY_URL] where [WEAVY_URL] is replaced by the URL to your Weavy environment.
  • Add a Header with the name Content-Type and set the value to application/json.
  • Set the Authentication type to Bearer token and copy/paste your Weavy API key into the Token field.
  • Click Save.

Provide a Weavy configuration

To make it easier to use multiple Weavy components, we will provide a global configuration for the Weavy URL.

tooljet-constant

  • Go to the Workspace constants section.
  • Click Create a new constant.
  • Set the Name to WEAVY_URL.
  • Set the Type to global constant.
  • Set the Value to the URL of your Weavy environment.
  • Click the Add constant button to create the constant.

Preparing a sample app

tooljet-create-sample-applicationTo have a useful app to play with while integrating the Weavy components, we're creating an app from the built-in Sample data source. This gives us some data to play with. You may of course adapt this guide to any existing app you already have, but let's start with a sample app. 

  • Go to the Data sources section in ToolJet.
  • Select the Sample data source (postgres) found under Data sources added on the left side.
  • Click on the Create sample application button.

Setting up authentication

Once the sample data app is created, we go into the app editor to start the integration. Before we're adding the Weavy components to the app, we need a few queries to handle the authentication for the components.

  • Open the Queries panel in the bottom of the app editor.
  • Click the  button to add a new query and choose the existing WeavyAPI REST API data source we created.
  • Set the Name of the query to getWeavyToken. We will reference this name later.
  • Set the Request Method to POST and the URL to /api/users/{{globals.currentUser.email}}/tokens.
  • Click the Settings tab and enable the Run this query on page load. This will make the query run asap when the app is starting.
  • Click Run to test your query. If everything is successful a user access token will be returned for the current user (you).

Providing user data

To get a more useful experience in the Weavy components, we need to provide some more data about the ToolJet user to Weavy. This way we can get synced names and avatars etc.

  • Open the Queries panel in the bottom of the editor.
  • Click the  button to add a new query and choose the existing WeavyAPI REST API data source we created.
  • Set the Name of the query to updateWeavyUser.
  • Set the Request Method to PUT and the URL to /api/users/{{globals.currentUser.email}} to call the Upsert user endpoint. This endpoint will create or update the user with user data.
  • Select the Body panel for the query and set the following JSON parameters:
    • name{{globals.currentUser.firstName}} {{globals.currentUser.lastName}}
    • email{{globals.currentUser.email}}
  • Click the Settings tab and enable the Run this query on page load. This will update the user data in the Weavy environment when the app loads.
  • Click Run to test the query. The Weavy user should now be updated with data from ToolJet.

Creating an AI copilot component

We now have the whole authentication configuration in place and it's time for the more fun part; creating a Weavy component! For this example we are creating an AI copilot which can answer questions about the country sample data table.

  • Make sure you are editing the sample application.
  • Make some room for a copilot component on the right side to the table.
  • Go to the Components panel on the right and drag a Custom component to the app canvas, next to the country table.
  • Set the Name of the Custom component to WeavyCopilot.
  • Set the Data to have url, access token, agent, context data and suggestions. The context data is any data you want the AI agent to know about.
    {{
        url: constants.WEAVY_URL, 
        accessToken: queries.getWeavyToken.data.access_token,
        contextData: {
          currentRow: components.table2.selectedRow,
          data: components.table2.currentData,
        },
        suggestions: [
          "Which country has biggest exports?",
          "What's the population density of the current country compared to others?"
        ],
        theme: globals.theme.name
      }}}
  • Set the Code to get the Weavy React UI kit and create a Weavy Copilot component.
    import React from 'https://cdn.skypack.dev/react@v18';
    import ReactDOM from 'https://cdn.skypack.dev/react-dom@v18';
    import { useWeavy, WyCopilot, WeavyComponents } from 'https://cdn.skypack.dev/@weavy/uikit-react';

    const { WyButton, WyIcon } = WeavyComponents;

    const extraSheet = new CSSStyleSheet();
    extraSheet.replaceSync(`
      html {
        height: 100%;
      }
      body {
        display: flex;
        height: 100%;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
      }
    `);

    const MyCustomComponent = ({data, updateData, runQuery}) => {
      document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];
      const weavy = useWeavy({ url: data.url, tokenFactory: async (refresh) => {
        if (refresh) {
          runQuery("getWeavyToken");
        }
        return data.accessToken
      } }, [ data.accessToken ]);

      if (data.theme === "dark") {
        document.documentElement.classList.add("wy-dark");
      } else {
        document.documentElement.classList.remove("wy-dark");
      }
      
      return <>
        <WyCopilot agent="assistant" data={[JSON.stringify(data.contextData)]}>
          <WyButton slot="actions" kind="icon" onClick={() => document.querySelector('wy-copilot').reset()}>
            <WyIcon name="stars"/>
          </WyButton>
          {data.suggestions?.map((suggestion) => <WyButton slot="suggestions" className="suggestion">{suggestion}</WyButton>)}
        </WyCopilot>
      </>
    };

    const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
    ReactDOM.render(<ConnectedComponent />, document.body);

Now you have a full Weavy powered copilot in your app, connected to your dynamic data with realtime updates! The users can now analyze the data they are working with using AI in realtime. To further extend the knowledge, other sources of data can be added, and you can provide the AI Agent detailed instructions. Multiple tailored copilots can now easily be placed in any app you have. 

tooljet-copilot-app

Play around with it and try creating other Weavy components, such as chat, files, feeds, comments or a fully featured messenger!

Let me know what you think!

Show me what you've built, tag me on LinkedIn or send me an email. You can always reach us directly in the support chat.
Weavy

Share this post

Support
Book a demo

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

Sign in or create a Weavy account