Text2SQL.ai logo
Published on

Introducing Our Open-Source API Chat Demo: Build AI-Powered SQL Tools in Minutes

We're excited to announce the release of our open-source API chat demo, a complete reference implementation showing how to integrate Text2SQL.ai's public API into your applications. Whether you're building an internal data tool, customer-facing analytics feature, or AI-powered database interface, this demo gives you everything you need to get started.

View the Demo on GitHub →

What Is This Demo?

The Text2SQL.ai API Chat Demo is a Next.js application that showcases how to build a conversational interface for SQL generation using our public API. It demonstrates real-world implementation patterns, best practices, and a production-ready UI that you can adapt for your own projects.

Key Features

Conversational SQL Generation

  • Natural language to SQL conversion through a chat interface
  • Support for both one-shot and conversational modes
  • Context-aware responses using conversation IDs

Database-Aware Queries

  • Integration with your Text2SQL.ai database connections
  • Access to your table schemas and metadata
  • Accurate SQL generation based on your actual database structure

Flexible Result Handling

  • Optional query execution with customizable row limits
  • Beautiful table rendering with expandable views
  • One-click CSV download for query results
  • Syntax-highlighted SQL output

Modern Tech Stack

  • Built with Next.js 15 for optimal performance
  • shadcn/ui components for a polished interface
  • Zustand for lightweight state management
  • Fully typed with TypeScript

Understanding the API

The demo centers around our Generate SQL endpoint, which takes several parameters to customize the behavior:

Core Parameters:

  • prompt - The natural language query from your user
  • connectionId - ID of your database connection (from Text2SQL.ai)
  • runQuery - Whether to execute the query and return results
  • limit - Maximum number of rows to return
  • conversationId - For maintaining context across multiple messages
  • mode - Either oneshot for direct SQL generation or conversational for interactive responses

Read the Full API Documentation →

How It Works: A Quick Walkthrough

1. The User Interface

The demo provides a clean chat interface where users can type natural language questions about their data. The UI includes:

  • A message input with send button
  • Configurable settings for result limits and conversation mode
  • Message history with loading states
  • Quick access links to docs and GitHub

2. The Backend Route

To keep your API keys secure, the demo implements a Next.js API route that acts as a proxy.

This pattern ensures your credentials never reach the client-side code.

3. State Management

The demo uses Zustand for managing chat state:

  • Adding and updating messages
  • Handling loading states
  • Managing conversation flow
  • Error handling

4. Result Visualization

When queries are executed, the demo showcases a sophisticated results table component that includes:

  • Dynamic column rendering
  • Expandable view for large result sets
  • CSV export functionality
  • Clear indication of applied limits
  • Database type badges

Code Highlights

Custom Hook for API Integration

The useTextToSQL hook encapsulates all the API logic:

  • Type-safe parameter handling
  • Error management
  • Response formatting
  • Easy integration into any React component

SQL Formatting and Highlighting

The demo includes utilities for making SQL readable:

  • Multi-line formatting using sql-formatter
  • Syntax highlighting with Prism
  • Database-specific highlighting based on the connection type

Reusable Components

All UI components are built with shadcn/ui and can be easily customized:

  • MessageList - Displays conversation history
  • QueryResultsTable - Renders SQL results with full features
  • ChatMessage - Individual message component with actions

Getting Started

  1. Clone the repository

    git clone https://github.com/text2sql-ai/text2sql-ai-api-chat-demo
cd text2sql-ai-api-chat-demo

  2. Install dependencies

    npm install

  3. Set up environment variables

    Note: You will need to set up an account to generate your API key and configure your database connection.

    # Add your Text2SQL.ai API key and connection ID
NEXT_PUBLIC_TEXT2SQL_API_KEY=your_api_key
TEXT2SQL_CONNECTION_ID=your_connection_id

  4. Run the development server

    npm run dev

Use Cases

This demo is perfect for:

Internal Tools

  • Build data exploration interfaces for your team
  • Create business intelligence chat assistants
  • Enable non-technical users to query databases

Product Features

  • Add natural language querying to your SaaS platform
  • Build customer-facing analytics features
  • Create AI-powered data assistants

Learning and Prototyping

  • Understand how to integrate AI SQL generation
  • Prototype new features quickly
  • Learn best practices for API integration

What's Included

The repository contains everything you need:

  • Complete Next.js application code
  • Backend API route with authentication handling
  • Custom React hooks for Text2SQL integration
  • Reusable UI components (chat, tables, formatting)
  • TypeScript types and interfaces
  • Example configuration
  • Detailed README with setup instructions

Why Open Source?

We believe in making AI-powered SQL generation accessible to everyone. By open-sourcing this demo, we want to:

  • Help developers integrate our API faster
  • Showcase best practices for conversational AI interfaces
  • Provide production-ready code you can build upon
  • Foster a community around AI-powered data tools

Next Steps

Ready to build your own AI-powered SQL interface?

  1. Explore the Demo: Visit the GitHub repository
  2. Get API Access: Sign up for Text2SQL.ai
  3. Read the Docs: Check out our API documentation
  4. Join the Community: Star the repo and share your implementations

What's Coming Next

We're constantly improving our API and examples. Future updates may include:

  • Additional language examples (Python, Ruby, Go)
  • More UI variations and themes
  • Advanced features like schema visualization
  • Integration examples with popular frameworks
  • Database migration and optimization tools

Have questions or suggestions? Reach out to our team: support@text2sql.ai