Files
controls-web/ai_agents/db_agent/ui
2026-02-17 09:29:34 -06:00
..
2026-02-17 09:29:34 -06:00
2026-02-17 09:29:34 -06:00
2026-02-17 09:29:34 -06:00

SQL Agent Web UI

A lightweight FastAPI + vanilla JS frontend for interacting with the SugarScale SQL agent.

Backend

Located at db_agent/ui/backend/main.py. It exposes:

  • POST /api/query wraps the existing agent pipeline (LLM + optional SQL execution + logging).
  • GET /health health probe.
  • Serves the static frontend and index page.

Run locally

# Activate your virtual environment first
uvicorn db_agent.ui.backend.main:app --reload --host 0.0.0.0 --port 8000

The UI will be available at http://localhost:8000/. Adjust the host/port as needed.

Frontend

Files under db_agent/ui/frontend/:

  • index.html main page with the question form, quick-reference card, and results display.
  • static/app.js handles form submission, fetches /api/query, renders results, and powers CSV/HTML exports plus reset logic.
  • static/styles.css modern styling.

Configuration Notes

  • The backend reuses environment variables (DB_SERVER, DB_DATABASE, etc.) for SQL execution, so ensure they are set before starting the FastAPI server. Dot-source db_agent/scripts/Set-DbEnv.ps1 to populate them in one step and supply -Password (Read-Host -AsSecureString) if you prefer an inline prompt.
  • The backend expects the LLM endpoint configured in db_agent/client.LlmConfig.base_url (defaults to http://192.168.0.30:8080). Update if your TGI server runs elsewhere.
  • Interaction logs still append to db_agent/logs/query_log.jsonl by default.
  • Set UI_BASIC_USER and UI_BASIC_PASSWORD to enable HTTP Basic auth for the web UI/API. When present, every route except /health requires those credentials; omit both variables to leave the UI open (useful for local dev).

UI Tips

  • The form defaults to executing SQL and pre-populates table hints with dbo.SugarLoadData; use the Reset button to restore these defaults while clearing previous results.
  • After running a query, download the result grid as CSV via Export CSV or grab a formatted HTML report with Download Report for sharing.
  • The quick-reference panel beside the form lists common companies/destinations—update it as real-world values change so operators have fresh context.

Next Ideas

  • Add user authentication or API keys.
  • Save favorite queries or table presets.
  • Stream results for large datasets.