⬡ QueryMind — AI Database Explorer

Chat with your data. Natural language → SQL → instant results. No backend required.

Live Demo →

---

What It Does

QueryMind lets you query a database using plain English. Type a question like "Show me the top 10 customers by total spend" and it:

1. Sends your question + database schema to Claude (claude-sonnet-4) via the Anthropic API
2. Gets back a precise SQL query
3. Runs it instantly in-browser using sql.js (SQLite compiled to WebAssembly)
4. Displays the results in a clean, sortable table

Everything runs client-side — no server, no backend, no data ever leaves your browser (except the schema sent to Claude to generate the query).

---

Features

• 🤖 AI-powered SQL generation via Claude Sonnet 4
• 🗄 3 sample databases — RetailCo, HR Corp, StreamDB
• 📂 Upload your own .sql file to query custom data
• 💬 Multi-turn chat — ask follow-up questions in context
• ⚡ SQL inspector — view, copy, and re-run generated queries
• 📱 Mobile-responsive layout
• 🔑 API key stored locally — never transmitted to any server other than Anthropic
• 🎨 Dark industrial design built for showcasing

---

Quick Start

Option 1: GitHub Pages (recommended)

1. Fork this repository
2. Go to Settings → Pages → Source → Deploy from branch (main)
3. Visit https://your-username.github.io/querymind
4. Enter your Anthropic API key in the sidebar

Option 2: Run Locally

# Clone the repo
git clone https://github.com/your-username/querymind.git
cd querymind

# Serve with any static server (required for sql.js WASM loading)
npx serve .
# or
python3 -m http.server 8080
# or
php -S localhost:8080

Then open http://localhost:8080.

⚠️ Important: You must serve via HTTP, not open index.html directly from the filesystem. The sql-wasm.wasm file requires HTTP to load correctly.

---

Getting an API Key

1. Sign up at console.anthropic.com
2. Go to API Keys and create a new key
3. Paste it into the QueryMind sidebar — it's saved to localStorage in your browser only

---

Sample Databases

🛍 RetailCo

E-commerce platform data with customers, orders, products, and order items.

Table	Description
customers	80 customers with segments, lifetime value, location
products	15 products across 8 categories with pricing
orders	~400 orders with status, totals, dates
order_items	Line items with product, quantity, price, returns

Try asking:

• "What's the average order value by customer segment?"
• "Which product category has the highest return rate?"
• "Show customers who haven't ordered in the last 90 days"

---

👥 HR Corp

Human resources data for a mid-size company.

Table	Description
departments	7 departments with budgets
employees	~75 employees with salary, level, hire date, performance
reviews	2 performance reviews per employee

Try asking:

• "Show average salary by department"
• "Which employees have the highest performance scores?"
• "How many employees were hired each year?"

---

🎬 StreamDB

Streaming video platform data.

Table	Description
users	120 users across plans (Free/Basic/Standard/Premium)
content	20 shows and movies with genres, ratings
watch_history	Viewing events with completion and watch time

Try asking:

• "What are the top 5 most-watched shows?"
• "What's the completion rate by genre?"
• "Show monthly active users for the last 6 months"

---

Using Your Own Database

1. Export your database schema + data as a .sql file
2. Click 📂 Upload SQL in the sidebar
3. Start asking questions!

Example minimal SQL file:

CREATE TABLE users (
  id INTEGER PRIMARY KEY,
  name TEXT,
  email TEXT,
  plan TEXT,
  created_at DATE
);

INSERT INTO users VALUES (1, 'Alice', 'alice@example.com', 'pro', '2024-01-15');
INSERT INTO users VALUES (2, 'Bob', 'bob@example.com', 'free', '2024-02-20');

---

Architecture

┌─────────────────────────────────────────────┐
│                  Browser                     │
│                                             │
│  ┌──────────────┐    ┌─────────────────┐   │
│  │   Chat UI    │───▶│  Claude API     │   │
│  │  (HTML/CSS)  │    │  (Anthropic)    │   │
│  └──────────────┘    └────────┬────────┘   │
│         │                     │ SQL Query  │
│         │            ┌────────▼────────┐   │
│         └───────────▶│    sql.js       │   │
│                       │  (SQLite WASM) │   │
│                       └────────────────┘   │
└─────────────────────────────────────────────┘

No backend. No database server. Everything runs in the browser.

---

Why Not MCP?

Great question! MCP (Model Context Protocol) is powerful for connecting Claude to real databases from a server-side context. However:

Approach	Hosting	Real DB	Setup
QueryMind (this)	GitHub Pages, Netlify, Vercel, anywhere	sql.js in-browser	Zero — just static files
MCP backend	Requires Node.js server	PostgreSQL, MySQL, etc.	Server + MCP config

For a public demo or portfolio piece, the client-side approach is ideal. For a production tool with real database access, you'd combine this UI with an MCP server or a backend API proxy.

Upgrading to MCP + Real Database

If you want to connect to a real PostgreSQL or MySQL database, here's the upgrade path:

1. Add a backend proxy (Node.js/Express or Python/FastAPI) that:

   • Accepts the natural language question
   • Calls Claude with your real schema
   • Executes the generated SQL against your actual DB
   • Returns results as JSON

2. Or use MCP with:

   Claude → MCP Server → PostgreSQL
   

   See the Anthropic MCP docs and community MCP servers for PostgreSQL/MySQL.

---

File Structure

querymind/
├── index.html          # App shell
├── css/
│   └── style.css       # All styles (dark industrial theme)
├── js/
│   ├── databases.js    # Sample database definitions + seed data
│   └── app.js          # Main app logic: API calls, SQL execution, UI
└── README.md

---

Customization

Change the AI model

In js/app.js, find:

model: 'claude-sonnet-4-20250514',

Replace with any Claude model you have access to.

Add your own sample database

In js/databases.js, add a new entry to the DATABASES object following the existing pattern:

mydb: {
  name: "My Database",
  description: "...",
  suggestions: ["Question 1", "Question 2"],
  schema: `CREATE TABLE ...`,
  seed: () => `INSERT INTO ...`
}

Then add a button in index.html:

<button class="load-btn" data-db="mydb">🏢 My DB</button>

Modify the system prompt

In js/app.js, edit systemPrompt inside generateSQL() to tune the AI's behavior.

---

Privacy & Security

• Your API key is stored only in your browser's localStorage
• Your database contents never leave your browser — only the schema (table/column names) is sent to Anthropic to generate SQL
• No analytics, no telemetry, no external requests except to Anthropic's API

---

License

MIT — do whatever you want with it.

---

Credits

Built with:

• Claude — AI SQL generation
• sql.js — SQLite compiled to WebAssembly
• Google Fonts — Syne, JetBrains Mono, DM Sans

---

Made with ⬡ QueryMind