Inconvo x Assistant-UI

Integrate Inconvo with your assistant-ui powered in-app assistant.

Prerequisites

1. An existing React app - If you don’t have one, you can run use npx assistant-ui@latest create to create one.
2. Assistant-UI - Follow the Assistant-UI getting started guide to get set up.
3. Free Inconvo Account - Sign up for Inconvo and create a free API key.

Steps

1. Connect your database

   To add a database connection, click on the connect button on the sidebar.

   Fill out the fields for your database, and click Save at the bottom.

   More details and a list of supported databases here

2. Add Inconvo tools to the AI-SDK backend

   Install tools

   npm i @inconvoai/node-ai-sdk

   Add tools

   import { openai } from "@ai-sdk/openai";
   import { frontendTools } from "@assistant-ui/react-ai-sdk";
   import { convertToModelMessages, stepCountIs, streamText } from "ai";
   import { inconvoTools } from "@inconvoai/node-ai-sdk";
   
   export const maxDuration = 30;
   
   export async function POST(req: Request) {
   const { messages, system, tools } = await req.json();
   
   // This is the tenant identifier
   // It tells inconvo what tenant filter to apply per request
   // Usually get this from the request
   const userContext = {
       organisationId: 1,
   };
   
   const result = streamText({
       model: openai("gpt-5-chat-latest"),
       messages: convertToModelMessages(messages),
       stopWhen: stepCountIs(5), // required - inconvo uses multi-tool calls.
       system,
       tools: {
       ...frontendTools(tools),
       // add inconvo tools
       ...inconvoTools({
           userContext,
       }),
       },
   });
   
   return result.toUIMessageStreamResponse();
   }

3. Add inconvo tool output components

   npx add inconvo assistant-ui-tool-components

   This adds the following components at /src/components/assistant-ui/tools which are used to render outputs of inconvoTools

   src/
   └── components/
       └── assistant-ui/
           └── tools/
               ├── inconvo-chart-colors.ts
               ├── inconvo-chart.tsx
               ├── inconvo-data-table.tsx
               ├── inconvo-hidden-tools.tsx
               ├── inconvo-tools.tsx
               └── message-data-analyst-tool.tsx

Resources

Demo Video

Play

Source Code

Assistant UI + Inconvo Integration See the source code.