Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Text to SQL Helper AI Block for Vue

Write a question in words, pick a sample, generate SQL, edit it in a monospace field with columns inserted from a three-table schema browser, and run it for typed rows, with a note counting the lines you changed.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people turn a question into SQL they can read and change, with this query helper for Vue with Ark UI. Joinloft, a SQL helper, starts with a Textarea for the question and four sample chips, and the Shine Button Generate SQL writes the query for it. A schema browser, an Accordion of three tables with their columns and types, inserts a column's name into the SQL at the cursor when you press it. At the end the SQL is an editable monospace field; Run shows a Table of typed rows. Edit the query and the note counts how many lines differ from the generated one, and the rows say they were typed for the generated query. For analytics tools, admin consoles and any product that writes queries for people.

FAQ

What stays in the page, and how do I make it real?

The queries and the rows are typed for four sample questions, and Generate SQL matches the words in your question to one of them (anything else says that only the four samples get SQL). The line count, the cursor insert and the editing are real. Nothing is run. To wire it for real, send the question and the schema where generate runs, and the SQL to a read-only connection where run runs.

How does the column insert work?

Pressing a column reads the cursor (or the selection) from the SQL field, puts the column's name there and moves the cursor to just after it, then focuses the field again. If you have not clicked in the field yet, the name goes to the end.

How is

Line by line against the generated query: a line counts when its text differs, and added or removed lines count too. Undoing your edit brings the count back to zero and the note reads "As generated".

Is it safe to run what people write?

Here nothing runs. In a real product send the SQL to a read-only account with a row limit and a timeout, show the error text when it fails, and keep the generated query next to the edited one so people can go back.

How does it work from the keyboard?

The schema is an accordion: Enter opens a table and each column is a button. The question, the SQL and the buttons are ordinary controls, and the status line says what each action did.

How does it look on a phone?

The question and the schema come first, the SQL and the rows under them. The schema is an accordion, so it takes one line per table until you open it, and the rows scroll inside a box of the same height.

All 100 ai blocks