examples/v1/chat-with-your-data/README.md
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
<div align="center"> <a href="https://copilotkit.ai" target="_blank"> </a> <a href="https://nextjs.org" target="_blank"> </a> <a href="https://ui.shadcn.com/" target="_blank"> </a> </div>Clone the repository:
git clone https://github.com/CopilotKit/CopilotKit.git
cd CopilotKit/examples/copilot-chat-with-your-data
Install dependencies:
pnpm install
# 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 yarn
yarn dev
# Using npm
npm run dev
Open http://localhost:3000 in your browser to see the application.
The application supports the following optional query parameters:
openCopilot=true - Automatically opens the CopilotKit sidebar when the page loads
http://localhost:3000?openCopilot=trueThis demo showcases several powerful CopilotKit features:
This provides the chat context to all of the children components.
<em>app/layout.tsx</em>
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>
);
}
This makes your dashboard data available to the AI, allowing it to understand and analyze your metrics in real-time.
<em>components/Dashboard.tsx</em>
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 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.
<em>app/api/copilotkit/route.ts</em>
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.
<em>components/Dashboard.tsx</em>
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}
/>
);
},
});
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.
<em>app/page.tsx</em>
<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...",
}}
/>
The dashboard uses a custom assistant message component to style the AI responses to match the dashboard's design system.
<em>components/AssistantMessage.tsx</em>
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>
);
};
The dashboard uses CSS variables to customize the appearance of the CopilotKit components to match the dashboard's design system.
<em>app/globals.css</em>
: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;
}
Ready to build your own AI-powered dashboard? Check out these resources:
CopilotKit Documentation - Comprehensive guides and API references to help you build your own copilots.
CopilotKit Cloud - Deploy your copilots with our managed cloud solution for production-ready AI assistants.