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.
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 data source that the authentication queries can use in the app.
WeavyAPI.https://[WEAVY_URL] where [WEAVY_URL] is replaced by the URL to your Weavy environment.Content-Type and set the value to application/json.Bearer token and copy/paste your Weavy API key into the Token field.To make it easier to use multiple Weavy components, we will provide a global configuration for the Weavy URL.
WEAVY_URL.
To 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.
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.
getWeavyToken. We will reference this name later.POST and the URL to /api/users/{{globals.currentUser.email}}/tokens.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.
updateWeavyUser.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.name ⇒ {{globals.currentUser.firstName}} {{globals.currentUser.lastName}}email ⇒ {{globals.currentUser.email}}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.
WeavyCopilot.{{{
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
}}}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.
Play around with it and try creating other Weavy components, such as chat, files, feeds, comments or a fully featured messenger!
To access live chat with our developer success team you need a Weavy account.
