# Chat with your data 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](https://copilotkit.ai/examples/chat-with-your-data)
Chat with your data Built with CopilotKit Built with Next.js Styled with shadcn/ui
## 🛠️ Getting Started ### Prerequisites - Node.js 18+ - npm, yarn, or pnpm ### Installation 1. Clone the repository: ```bash git clone https://github.com/CopilotKit/CopilotKit.git cd CopilotKit/examples/copilot-chat-with-your-data ``` 2. Install dependencies: ```bash pnpm install ```
Using other package managers ```bash # Using yarn yarn install # Using npm npm install ```
3. Create a `.env` file in the project root and add your [OpenAI API Key](https://platform.openai.com/api-keys) and [Tavily API Key](https://tavily.com/api-key): ``` OPENAI_API_KEY=your_openai_api_key TAVILY_API_KEY=your_tavily_api_key ``` 4. Start the development server: ```bash pnpm dev ```
Using other package managers ```bash # Using yarn yarn dev # Using npm npm run dev ```
5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. ### Query Parameters The application supports the following optional query parameters: - `openCopilot=true` - Automatically opens the CopilotKit sidebar when the page loads - Example: `http://localhost:3000?openCopilot=true` ## 🧩 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](./app/layout.tsx) ```tsx export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ); } ``` ### CopilotReadable This makes your dashboard data available to the AI, allowing it to understand and analyze your metrics in real-time. [components/Dashboard.tsx](./components/Dashboard.tsx) ```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](./app/api/copilotkit/route.ts) ```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](./components/Dashboard.tsx) ```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 ( ); }, }); ``` ### 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](./app/page.tsx) ```tsx ``` ### 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](./components/AssistantMessage.tsx) ```tsx export const CustomAssistantMessage = (props: AssistantMessageProps) => { const { message, isLoading, subComponent } = props; return (
{(message || isLoading) && (
{message && } {isLoading && (
Thinking...
)}
)} {subComponent &&
{subComponent}
}
); }; ``` ### 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](./app/globals.css) ```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; } ``` ## 📚 Learn More Ready to build your own AI-powered dashboard? Check out these resources: [CopilotKit Documentation](https://docs.copilotkit.ai) - Comprehensive guides and API references to help you build your own copilots. [CopilotKit Cloud](https://dashboard.operations.copilotkit.ai/) - Deploy your copilots with our managed cloud solution for production-ready AI assistants.