Riatix Azure NL-to-SQL UI - Microsoft Azure Product Discovery Tool

Not Microsoft-affiliated. This is a front-end UI for exploring Microsoft Azure products and regions with natural-language questions powered by an NL-to-SQL backend API Project. Ask a question, pick a model provider, and see:

• Tabular results and charts for supported patterns (List, Difference, Ranking)
• The exact SQL generated and executed
• An intent translation (JSON) and clarifications
• A fast, filterable "Product Availability by Region" matrix

Tech stack

• Vue 3 + TypeScript + Vite
• Tailwind CSS v4 (via @tailwindcss/postcss)
• AG Grid (Community)
• ECharts (vue-echarts)
• lucide icons

Features

• Natural-language query bar with model selection (providers fetched from backend)
• Optional "Generate Summary" that sends top results to the LLM for summarization. When sending results to LLM, anonymization techniques can be utilized if the data is deemed sensitive.
• Results view shows rows, SQL, summary, clarifications, and the intent JSON
• Pattern-aware renderers for List, Difference, and Ranking
• Region Matrix: browse Azure product availability by geography/region with status legend (GA / Preview / Retiring)
• Local history with re-run, persisted in localStorage
• Correctness Samples overlay + Mini Suite Runner to batch-run sample prompts
• Light/dark friendly UI (respects OS theme)

Screenshots

Riatix NL->SQL UI

Landing Page

The landing page shows

• listing all Azure Products across all geographies and regions
• the quick samples section
• the query history section
• the query control box with correctness samples and model selector.

Quick Samples

The quick samples has a set of assorted sample queries that helps users to quickly test and see the product in action.

Query History

The executed user queries are locally stored in the browser cache (localCache) and allows for analyzing query performance and reviews.

Provides real-world examples showing how each model handled various intent invariants across test queries.

Getting started

Prerequisites:

• Built with node --version (v22.12.0)

Install dependencies and start the dev server:

# from the repo root
npm install
npm run dev

By default, the app will be served by Vite (typically on http://localhost:5173). While running on localhost, the UI calls the backend at http://localhost:5294/api.

If your backend runs elsewhere, see Configuration below.

Configuration

This UI talks to a backend service through src/utils/ApiConfig.ts. The base URL is chosen based on the current page hostname:

• localhost/127.0.0.1 -> http://localhost:5294/api
• *.jagadishkrishnan.com -> https://nl2sqlapi.jagadishkrishnan.com/api
• fallback -> https://api.jagadishkrishnan.com/api

To target a different backend in development, you have a few options:

1. Change src/utils/ApiConfig.ts to point to your backend.

2. Serve the app under a hostname that matches one of the rules above.

3. Add a Vite dev proxy (optional): you can configure a proxy in vite.config.ts to forward /api to your backend, then simplify ApiConfig if desired.

Development scripts

# start Vite dev server
npm run dev

# type-check and build for production
npm run build

# locally preview the production build
npm run preview

API contract (expected backend)

The UI expects these endpoints (paths assume the configured base URL):

• GET /Query/providers -> ModelOption[]
  • Example item: { name: "OpenAI", model: "gpt-5-mini" }
• POST /Query/ask -> QueryResponse
  • Body: { userQuery: string, model: string, generateSummary: boolean }
  • Returns: { intent, intentJson, naturalLanguageSummary, clarifications, resultSets, sql }
• GET /Query/productmatrix/action -> { DataAction: "fetch" | "nofetch" }
  • Instructs the UI whether to refresh product data
• GET /Query/productmatrix -> ProductInfo[]
  • Raw Azure product availability rows (used by Region Matrix)

Types referenced above live in src/types.ts.

Project structure (high level)

index.html
package.json
vite.config.ts
tailwind.config.js
src/
	App.vue                # page layout, data orchestration
	main.ts                # app bootstrap, AG Grid + ECharts registration
	types.ts               # shared TS types for responses
	utils/
		ApiConfig.ts         # base URL selection and endpoint helper
		AzureProductMatrix.ts# data fetch + caching with backend-directed refresh
	components/
		AskPanel.vue         # query bar, model dropdown, correctness overlay
		AzureRegionMatrix.vue# region/product availability matrix (AG Grid)
		ResultsView.vue      # results + SQL + intent + summary
		HistoryPanel.vue     # local history sidebar
		Intro.vue            # About overlay
		patterns/            # List, Difference, Ranking renderers

Build and deploy

Build the production bundle:

npm run build

Artifacts are emitted by Vite with a stable entry name (riatix_nl2sql.js) and relative asset paths (base: "./"). You can host the dist/ folder on any static host (Azure Static Web Apps, Azure Storage Static Website, GitHub Pages, etc.).

Make sure your deployed hostname maps to the correct API base URL (see Configuration). If it doesn't, adjust ApiConfig.ts accordingly.

Troubleshooting

• Empty model list or queries fail: verify backend is reachable at the configured base URL and CORS is allowed.
• Region Matrix blank/partial: product matrix endpoints may be down. The UI will fall back to cached data when possible.
• Summary doesn't appear: ensure generateSummary is honored by the backend and your selected model supports it.

Contributing

Issues and PRs are welcome.

License

The Unlicense