Adding an AI copilot to your Appsmith app

Building with Appsmith and Weavy

Appsmith is an open-source platform that helps developers quickly create internal apps. It features a framework for dynamic interfaces, intuitive drag-and-drop functionality, and easy widget and API integration, streamlining complex application development. This flexibility accelerates development and enhances user experience with customized, interactive modules.

While Appsmith has great components for building from the ground, Weavy can enhance this experience with power components for AI, chat, collaboration, file sharing and notifications. These components provides extensive functionality powered by a complete, yet customizable UI together with a turn-key backend.

For this example we'll take a look at how to bring in the AI copilot as a Custom Widget in an app, complete with user authentication, styling and connection to any dynamic and interactive data you might have. 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 Appsmith

• An Appsmith account.
• A Weavy account with a Weavy environment (v28.0.2 or later).
• An API key for your Weavy environment.

Getting started

Assuming you are somewhat familiar with Appsmith, let's start by adding a new app. For this guide we're creating an empty app to keep things clear. You may of course adapt this guide to any existing app you already have, but let's start simple. Once you have created an app and opened it in edit mode, we can move on to start adding Weavy to it.

Add a Weavy API datasource

To 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 datasource that the queries can use in the app. Once you have created the datasource, you can reuse it for all your Weavy queries.

• Go to the Datasources section down to the left in the navigation bar.
• Click the ＋ button to add a new datasource.
• Select Authenticated API, which will create a REST API with authentication.
• Set the name of the datasource to Weavy API.
• 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 Bearer token field.
• Click Save to get back to your query with the new datasource in place.

Setting up a query for authentication

To be able to authenticate in the Weavy component we are creating, we need to fetch a user access token for the current user.

• Go to the Queries tab.
• Click the ＋ button to add a new query.
• Choose the Weavy API datasource.
• Select the POST method and set the URL to /api/users/{{appsmith.user.email}}/tokens
• Set the Name of the query to GetWeavyToken. We will reference this name later.
• Click the Settings button (cogwheel) to access settings for the query. Set the Run behavior to 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 Appsmith user to Weavy. This way we can get synced names, user details and avatars between Weavy and Appsmith.

• Go to the Queries tab.
• Click the ＋ button to add a new query.
• Choose the Weavy API datasource.
• Select the PUT method and set the URL to /api/users/{{ appsmith.user.email }} to call the Upsert user endpoint. This endpoint will create or update the user with user data.
• Click on the Body tab and insert the following JSON:
  {
  "email": {{ appsmith.user.email }},
  "name": {{ appsmith.user.name }},
  "picture":
}
• Set the Name of the query to UpdateWeavyUser. 
• Click the Settings button (cogwheel) to access settings for the query. Set the Run behavior to On page load.
• Click Run to test the query. The Weavy user should now be updated with data from Appsmith.

Preparing your app

To have more fun and enhance the AI experience of the Weavy Copilot, we'll create a table with data for the copilot to play with. All contextual Weavy components can take advantage of other components and data in the context surrounding them to enhance their AI powers.

• Go to the Datasources section in the left navigation.
• Click the ＋ button to add a new datasource.
• Select the movies datasource from Sample Datasources. 
• Go back to the Editor section in the left navigation
• Go to the UI tab.
• Click New UI element and drag a Table to your canvas.
• Click on Connect data on your table and select the movies datasource.
• Select a collection from movies and set it to movies.
• Select a searchable column and set it to title.
• Click Connect data to update the table.
• Set the Name of the table to MovieTable.

Creating an AI copilot component

We now have the whole authentication configuration in place and it's time for the more fun part; creating the Weavy component! For this example we are creating an AI copilot which can answer questions about the movie table. You can easily modify the component into a files, posts, chat, comments or messenger component instead.

• Make sure you are in the Editor section and the UI tab.
• Click New UI element and drag a Custom widget to your canvas.
• Set the Name of the Custom Widget to WeavyCopilot.
• Set the Default Model to have access token, agent, data and suggestions. The data property provides any context data you want the AI agent to know about. Paste the following model data and make sure to replace [WEAVY_URL] with the URL to your Weavy environment.
  {
  "url": "[WEAVY_URL]",
  "access_token": "{{ GetWeavyToken.data.access_token}}",
  "agent": "assistant",
  "data": "",
  "suggestions": [
    "Which movie has the largest revenue?",
    "How old is the current movie?"
  ]
}
• Add an Event listener called onRefresh.
• Add an Action for the onRefresh event and set it to Execute a query and select the GetWeavyToken query. This will make the user access token refresh whenever it has expired.
• Now, let's edit the widget. Click on Edit source to open the widget editor.
• Set the Javascript to get the Weavy lib and connect the model.
  
  appsmith.onReady(async () => {
    
    const { Weavy, WeavyComponents } = await import(appsmith.model.url + "/uikit-web/weavy.esm.js");

    // Create a weavy instance
    const weavy = new Weavy({
        url: appsmith.model.url,
    });
    
    const updateFromModel = () => {
        // Configure authentication
        weavy.tokenFactory = async (refresh) => {
            if (refresh) {
                appsmith.triggerEvent("onRefresh");
            }
            return appsmith.model.access_token;
        };

        // Configure copilot
        const copilot = document.querySelector("wy-copilot");
        copilot.agent = appsmith.model.agent;
        copilot.data = [appsmith.model.data];

        // Clear before appending buttons
        copilot.innerHTML = "";
        
        // Create a reset button
        const resetButton = new WeavyComponents.WyButton();
        resetButton.kind = "icon";
        resetButton.slot = "actions";
        resetButton.onclick = () => copilot.reset();
        
        // Create a reset icon for the button
        const resetIcon = new WeavyComponents.WyIcon();
        resetIcon.name = "stars";
        resetButton.append(resetIcon); 
        
        // Add the button
        copilot.append(resetButton);

        // Set suggestions
        appsmith.model.suggestions?.map((suggestion) => {
            const sButton = new WeavyComponents.WyButton();
            sButton.className = "suggestion";
            sButton.slot = "suggestions";
            sButton.innerText = suggestion;
            copilot.append(sButton); 
        })
    };

    updateFromModel()

    appsmith.onModelChange((model, prevModel) => {
        updateFromModel();
    });

});




• Set the Style to adapt to the size and connect the theme.
  html, body {
    margin: 0;
    padding: 0;
}

body {
    height: calc(var(--appsmith-ui-height) * 1px);
    width: calc(var(--appsmith-ui-width) * 1px);
    display: flex;
    --wy-theme-color: var(--appsmith-theme-primaryColor);
    --wy-border-radius: var(--appsmith-theme-borderRadius);
    font-family: system-ui;
}

• Finally, provide the copilot component in HTML.
  <wy-copilot></wy-copilot>
  
  
• Close the editor and your all done!

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. 

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