Chat with your data

Transform your data visualization experience with an AI-powered dashboard assistant.

Live Demo

Framework:

Standard

Use Case:

Analysis, Reporting, Insights

Auth:

Database:

CSS:

Transform your data visualization experience with an AI-powered dashboard assistant. Ask questions about your data in natural language, get insights, and interact with your metrics—all through a conversational interface powered by CopilotKit.

Click here for a running example

🛠️ Getting Started

Prerequisites

Node.js 18+
npm, yarn, or pnpm

Installation

Clone the repository:

git clone https://github.com/CopilotKit/CopilotKit.git
cd CopilotKit/examples/copilot-chat-with-your-data

Install dependencies:

pnpm install

Using other package managers

# Using yarn
yarn install

# Using npm
npm install

Create a .env file in the project root and add your OpenAI API Key and Tavily API Key:
```
OPENAI_API_KEY=your_openai_api_key
TAVILY_API_KEY=your_tavily_api_key
```

Start the development server:

pnpm dev

Using other package managers

# Using yarn
yarn dev

# Using npm
npm run dev

Open http://localhost:3000 in your browser to see the application.

🧩 How It Works

This demo showcases several powerful CopilotKit features:

CopilotKit Provider

This provides the chat context to all of the children components.

app/layout.tsx

export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <CopilotKit runtimeUrl="/api/copilotkit">
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}

CopilotReadable

This makes your dashboard data available to the AI, allowing it to understand and analyze your metrics in real-time.

components/Dashboard.tsx

useCopilotReadable({
  description: "Dashboard data including sales trends, product performance, and category distribution",
  value: {
    salesData,
    productData,
    categoryData,
    regionalData,
    demographicsData,
    metrics: {
      totalRevenue,
      totalProfit,
      totalCustomers,
      conversionRate,
      averageOrderValue,
      profitMargin
    }
  }
});

Backend Actions

Backend actions are used to handle operations that require secure server-side processing. This allows you to still let the LLM talk to your data, even when it needs to be secured.

app/api/copilotkit/route.ts

const runtime = new CopilotRuntime({
  actions: ({properties, url}) => {
    return [
      {
        name: "searchInternet",
        description: "Searches the internet for information.",
        parameters: [
          {
            name: "query",
            type: "string",
            description: "The query to search the internet for.",
            required: true,
          },
        ],
        handler: async ({query}: {query: string}) => {
          // can safely reference sensitive information like environment variables
          const tvly = tavily({ apiKey: process.env.TAVILY_API_KEY });
          return await tvly.search(query, {max_results: 5});
        },
      },
    ]
  }
});

You can even render these backend actions safely in the frontend.

components/Dashboard.tsx

useCopilotAction({
  name: "searchInternet",
  available: "disabled",
  description: "Searches the internet for information.",
  parameters: [
    {
      name: "query",
      type: "string",
      description: "The query to search the internet for.",
      required: true,
    }
  ],
  render: ({args, status}) => {
    return <SearchResults query={args.query || 'No query provided'} status={status} />;
  }
});

CopilotSidebar

The CopilotSidebar component provides a chat interface for users to interact with the AI assistant. It's customized with specific labels and instructions to provide a data-focused experience.

app/page.tsx

<CopilotSidebar
  instructions={prompt}
  AssistantMessage={CustomAssistantMessage}
  labels={{
    title: "Data Assistant",
    initial: "Hello, I'm here to help you understand your data. How can I help?",
    placeholder: "Ask about sales, trends, or metrics...",
  }}
/>

Custom Assistant Message

The dashboard uses a custom assistant message component to style the AI responses to match the dashboard's design system.

components/AssistantMessage.tsx

export const CustomAssistantMessage = (props: AssistantMessageProps) => {
  const { message, isLoading, subComponent } = props;

  return (
    <div className="pb-4">
      {(message || isLoading) && 
        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
          <div className="text-sm text-gray-700 dark:text-gray-300">
            {message && <Markdown content={message} />}
            {isLoading && (
              <div className="flex items-center gap-2 text-xs text-blue-500">
                <Loader className="h-3 w-3 animate-spin" />
                <span>Thinking...</span>
              </div>
            )}
          </div>
        </div>
      }
      
      {subComponent && <div className="mt-2">{subComponent}</div>}
    </div>
  );
};

CSS Customization

The dashboard uses CSS variables to customize the appearance of the CopilotKit components to match the dashboard's design system.

app/globals.css

:root {
  --copilot-kit-primary-color: #3b82f6;
  --copilot-kit-contrast-color: white;
  --copilot-kit-secondary-contrast-color: #1e293b;
  --copilot-kit-background-color: white;
  --copilot-kit-muted-color: #64748b;
  --copilot-kit-separator-color: rgba(0, 0, 0, 0.08);
  --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
  /* Additional variables... */
}

/* Custom CopilotKit styling to match dashboard */
.copilotKitSidebar .copilotKitWindow {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.copilotKitButton {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}