Build a Text-to-SQL Chat in Next.js with Text2SQL.ai API (Open-Source Repo Walkthrough)

Описание: Learn how to turn plain English into production-ready SQL using the Text2SQL.ai Public API. In this short demo, we cover the Generate SQL endpoint, walk through a lightweight Next.js chat app, and tour the open-source repository so you can plug text-to-SQL into your own product fast.

What you’ll see:

API basics: prompt, connectionId, runQuery, limit, conversationId, and mode (one-shot vs conversational)
Demo app UI: chat input, loading state, SQL preview, database type detection, results table with CSV export
Code tour: clean API proxy route (hide keys), useText2SQL hook, Zustand store, ShadCN UI, SQL formatting/highlight, reusable results table component

Chapters:

0:00 Intro & what we’ll cover
0:49 API endpoint overview (Generate SQL)
2:17 Chat demo walkthrough (limit & conversational mode)
4:12 Open-source repo tour
5:20 Chat interface architecture (Zustand, API proxy)
7:18 Results table component (expand, CSV, multi-column)
7:50 Wrap-up & next steps

Links:

Open-Source Repo: https://github.com/text2sql-ai/text2s...
API Docs: https://www.text2sql.ai/docs/api-inte...
Text2SQL.ai: https://www.text2sql.ai/

Use this as a starting point for your own integration to ship self-serve analytics and ad-hoc reporting in your product without reinventing SQL UIs

Tech stack:
Next.js, TypeScript, Zustand, ShadCN/UI, SQL format & highlight

Try it on your own data!
Create a connection in Text2SQL.ai, grab the connectionId, and call the Generate SQL endpoint with runQuery + limit for safe, paginated results.

#text2sql #Text2SQLai #Nextjs #SQL #OpenSource #APIs #DataTools #AIforDevelopers #ShadCN #TypeScript

💬 Questions? Drop them in the comments. We're happy to help you wire this into your stack.