SQL, and how an LLM writes it for you.

Everything ships as static files. The whole application — database engine, data, UI, and AI wiring — is a single HTML file.

The dataset — 5 tables, 36 rows

Just want SQL? Open sql-workbench.html in a browser — the editor and database work immediately, offline. Want the AI too? Point it at your local Ollama:

# Option A — allow the browser to reach Ollama, then open the file directly
OLLAMA_ORIGINS='*' ollama serve

# Option B — serve the page, then browse to it
python3 -m http.server 8000
# → http://localhost:8000/sql-workbench.html

# check the model name matches one you have installed:
ollama list

Set the model in the top bar (default deepseek-v4.1-flash:cloud).

Run each of these in the Write SQL tab. Type it, press Ctrl+Enter, read the table that comes back. Every result below is real output from the dataset.

SELECT * FROM EMPLOYEES;

SELECT F_NAME, L_NAME, SALARY FROM EMPLOYEES;

SELECT F_NAME, L_NAME, SALARY
FROM EMPLOYEES
WHERE SALARY > 70000;

SELECT F_NAME || ' ' || L_NAME AS name, SALARY
FROM EMPLOYEES
ORDER BY SALARY DESC
LIMIT 5;

SELECT COUNT(*) AS employees,
       ROUND(AVG(SALARY), 0) AS avg_salary,
       MIN(SALARY) AS lowest,
       MAX(SALARY) AS highest
FROM EMPLOYEES;

SELECT SEX, COUNT(*) AS n
FROM EMPLOYEES
GROUP BY SEX;

SELECT d.DEP_NAME,
       COUNT(*) AS people,
       ROUND(AVG(e.SALARY), 0) AS avg_salary
FROM EMPLOYEES e
JOIN DEPARTMENTS d ON e.DEP_ID = d.DEPT_ID_DEP
GROUP BY d.DEP_NAME
ORDER BY avg_salary DESC;

SELECT e.F_NAME || ' ' || e.L_NAME AS name, j.JOB_TITLE, e.SALARY
FROM EMPLOYEES e
JOIN JOBS j ON e.JOB_ID = j.JOB_IDENT
WHERE e.SALARY > 70000
ORDER BY e.SALARY DESC;

The join map

EMPLOYEES.DEP_ID    ──┐
                     ├─► DEPARTMENTS.DEPT_ID_DEP
JOB_HISTORY.DEPT_ID ─┘

EMPLOYEES.JOB_ID    ──► JOBS.JOB_IDENT
JOB_HISTORY.JOBS_ID ──► JOBS.JOB_IDENT
JOB_HISTORY.EMPL_ID ──► EMPLOYEES.EMP_ID
DEPARTMENTS.LOC_ID  ──► LOCATIONS.LOCT_ID

The Ask tab takes “who earns the most, with their department?” and produces the query you'd have written by hand. The mechanism is simpler than it looks.

The pipeline

The four ingredients of a good NL→SQL prompt

1. Schema — the actual CREATE TABLE statements. The model must see real names; guessing produces wrong identifiers.
2. Glossary — the semantics the schema can't express. “Full name is F_NAME || ' ' || L_NAME”, “join DEP_ID to DEPT_ID_DEP”. This is what makes joins work.
3. Rules — constrain output: “Output ONLY the SQL. One SELECT. No DDL/DML.”
4. Examples — two or three question→SQL pairs. Few-shot examples teach shape better than instructions alone.

Guardrails

Generated SQL is untrusted input. The app accepts only statements starting with SELECT / WITH / EXPLAIN and containing no INSERT, UPDATE, DELETE, DROP, ALTER, CREATE, REPLACE, TRUNCATE, or ATTACH. Anything else is shown but not run. And the database is in-memory — reloading resets it — so a mistake can't touch your files.

Failure modes and fixes

Try these in the Ask tab

• How many employees are there?
• List the top 3 salaries with full names.
• Which department has the highest average salary?
• Show female employees earning more than 70,000.
• What is the pay range for a Sr. Architect?

Watch the generated SQL appear above each answer — that's the model showing its work.

Try each in the Write SQL tab. Every answer is a variation of Part 1.

1. List every employee's full name and salary, cheapest first.
2. How many people work in the Software Group?
3. Show the highest-paid person in each department.
4. Which job titles pay more than 90,000 at the top?
5. Find employees hired before 2001 (hint: JOB_HISTORY.START_DATE is YYYY-MM-DD text — string comparison sorts correctly).
6. Count how many distinct departments appear in JOB_HISTORY.

Two paths, one engine. Direct SQL reaches SQLite straight. Ask goes through the model first, then the same engine. If Ollama is down, Direct mode still works. Full flow diagrams and a line-by-line code map are in help.html.

Static site — GitHub Pages serves it with no build step. Settings → Pages → Source: Deploy from a branch → main / / (root).