Copilot Data Chat

An AI-powered data exploration tool that combines GitHub Copilot with SQLite database queries to provide intelligent, conversational data analysis with automatic visualization.

🚀 What It Does

Copilot Data Chat allows you to ask natural language questions about your database and receive:

• Intelligent SQL query generation - Copilot automatically generates the right SQL queries based on your questions
• Automatic visualization - Results displayed as formatted HTML tables or interactive charts (bar, pie, line)
• Real-time execution - Queries run instantly against your SQLite database
• Conversational interface - Ask questions like "Show me all users in a table" or "Create a pie chart of user distribution"

🛠️ Tech Stack

Backend

• Bun - Fast all-in-one JavaScript runtime (v1.3.6+)
• TypeScript - Type-safe development
• SQLite - Built-in database (via bun:sqlite)
• @github/copilot-sdk - GitHub Copilot API integration

Frontend

• HTMX - Modern, declarative AJAX interactions (v2.0.4)
• Chart.js - Interactive data visualizations
• Vanilla JavaScript - No heavy frameworks needed
• CSS3 - Custom dark theme inspired by GitHub Copilot

Key Features

• Semantic HTML with HTMX attributes for reactive updates
• JSON-encoded form submissions via HTMX extension
• Split-panel UI (results left, input right)
• Sticky input panel for constant access
• Real-time SQL execution with error handling
• Dark, futuristic UI with glowing effects and smooth animations

📦 Installation

Install dependencies:

bun install

🚀 Running the Application

Start the development server:

bun run index.ts
or
bun run start

The application will be available at http://localhost:3000

📖 Usage

1. Open your browser to http://localhost:3000
2. Type a natural language question in the input field, such as:
   • "How many rows are in the users table?"
   • "Show me all users in a table"
   • "Create a bar chart of user count"
3. Press Enter or click "Send to Copilot"
4. Copilot will generate the SQL, execute it, and display the results

🗄️ Database

The app uses SQLite with a pre-seeded users table containing sample data. The database is automatically created and populated on first run.

Schema

CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  email TEXT NOT NULL
);

🎨 Visualization Formats

Copilot can automatically format results using special commands:

• FORMAT:TABLE - Display as HTML table
• FORMAT:CHART:bar - Bar chart
• FORMAT:CHART:pie - Pie chart
• FORMAT:CHART:line - Line chart

📁 Project Structure

my-app/
├── index.ts          # Main server and API routes
├── index.html        # Frontend UI
├── db.ts            # Database setup and schema
├── css/
│   └── styles.css   # Dark theme styling
└── mydb.sqlite      # SQLite database (auto-generated)

🔑 Requirements

• Bun v1.3.6 or higher
• GitHub Copilot API access (via @github/copilot-sdk)

---

Built with ❤️ using Bun, TypeScript, HTMX and GitHub Copilot