@databridgeai/react

Drop-in React chat widget for natural language database queries.

Add a ChatGPT-like interface to your React app that lets users query your database in plain English. Renders tables, images, and charts automatically.

Quick Start

npm install @databridgeai/react

import { ChatWidget } from '@databridgeai/react';

function App() {
  return (
    <ChatWidget
      endpoint="/api/ai/chat"
      userContext={{
        userId: currentUser.id,
        orgId: currentUser.organizationId,
        role: currentUser.role,
      }}
      title="Data Assistant"
    />
  );
}

That's it. Your users can now ask questions like:

• "Show me this month's revenue"
• "Who are our top 10 customers?"
• "Compare sales by region as a bar chart"

Features

• Table rendering: Query results displayed in clean, sortable tables
• Chart visualization: Automatic Chart.js rendering (bar, pie, line, doughnut)
• Image detection: URLs to images render as inline thumbnails
• Responsive design: Works on desktop and mobile
• Customizable: Adjust colors, title, placeholder text
• TypeScript: Full type safety included

Props

interface ChatWidgetProps {
  /** Your backend chat endpoint (e.g., "/api/ai/chat") */
  endpoint: string;

  /** User context for tenant isolation */
  userContext: {
    userId: string;
    orgId: string;
    role: string;
  };

  /** Widget title (default: "AI Assistant") */
  title?: string;

  /** Input placeholder text */
  placeholder?: string;

  /** Custom CSS class for the container */
  className?: string;

  /** Custom headers for API requests */
  headers?: Record<string, string>;
}

Backend Requirement

This widget requires a backend endpoint powered by @databridgeai/connector:

// Your Express backend
import { initExecutorAgent } from '@databridgeai/connector';

const agent = await initExecutorAgent({
  apiKey: process.env.DATABRIDGE_API_KEY!,
  db: pool,
  exposeTables: ['users', 'orders', 'products'],
  tenantField: 'organization_id',
});

app.post('/api/ai/chat', agent.middleware());

Response Format

The widget expects this JSON response structure:

{
  "message": "Here are the top 5 customers by revenue:",
  "data": {
    "rows": [...],
    "columns": ["name", "revenue", "avatar_url"]
  },
  "visualization": {
    "type": "bar",
    "title": "Revenue by Customer",
    "labels": ["Acme", "Globex", "Initech"],
    "datasets": [{ "label": "Revenue", "data": [50000, 42000, 38000] }]
  }
}

Peer Dependencies

• react >= 18
• react-dom >= 18

Related Packages

| Package | Purpose | |---------|---------| | @databridgeai/connector | Backend connector (required) | | @databridgeai/toolkit | Schema introspection & utilities | | @databridgeai/core | Shared types & validators |

License

MIT