Question to SQLPro

A question turned into SQL you can read, edit and run, with table chips that light up where the query uses them, edit tracking with revert, errors that underline the token and offer the fix, and a result grid.

Markdown

On this page

ProThe agent writes a carrier query with a wrong column; the error underlines it, Apply fix corrects it, Run returns six carriers.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/nl-to-sql

Usage

tsx

import { NlToSql } from "@/components/ui/chatcn/pro/nl-to-sql"

<NlToSql
  question={question}
  sql={sql}
  onSqlChange={setSql}
  generatedSql={agentSql}
  state={state}
  tables={schema}
  result={result}
  error={error}
  onRun={run}
/>

Pass state="generating" while the agent streams the query. Tables come from the query (tablesInSql) and pick up row counts and columns from tables when you pass them. Errors take the database's 1-based position to underline the token, a hint in words and an optional fix with corrected SQL that Apply puts in the editor.

Examples

States

ProWriting, ran with results, edited by hand, no rows and running.

Props

Prop	Type	Notes
`question`	`string`	What the person asked
`sql`, `defaultSql`, `onSqlChange`	`string`	The editor, controlled or not
`generatedSql`	`string`	Shows Edited and Revert when the editor differs
`state`	`generating \| ready \| running \| done \| error`	Default `ready`
`tables`	`NlToSqlTable[]`	`{ name, rows?, columns?, description? }`
`result`	`{ columns, rows, rowCount?, durationMs? }`	Shown when `done`
`error`	`string \| { message, position?, hint?, fix? }`	Shown when `error`
`onRun`, `onCancel`, `onRegenerate`	callbacks	Run, cancel, write again
`dialect`, `explanation`, `maxHeight`, `disabled`		Header label, one line summary, result height

Keyboard

Key	Action
⌘ Enter or Ctrl Enter	Runs the query
Tab in the editor	Inserts two spaces; Shift Tab leaves the editor
Enter on a table chip	Opens its columns

Accessibility

The editor is a real textarea named after the question; highlighting sits behind it and never reaches the accessibility tree.
The error is an alert with its line and column in words.
Results announce their row count once.

Motion

The query streams in with the caret, then nothing moves. Table chips press at 0.97. Popovers open from their chip over 180 ms, instantly from the keyboard.