Example Applications

All example applications are available in our Examples Repository. Here's a list of featured examples:

Basic examples

Getting Started

Github repo | Open in StackBlitz

A minimal Vite application demonstrating the basic usage of SQLRooms. Features include:

• Sets up an app store and a single main panel using SQLRooms' project builder utilities
• Loads a CSV file of California earthquakes as a data source
• Runs a SQL query in the browser (DuckDB WASM) to show summary statistics
• Simple UI with loading, error, and result states

To create a new project from the get-started example run this:

npx degit sqlrooms/examples/get-started my-new-app/

SQL Query Editor

Try live | Github repo | Open in StackBlitz

A comprehensive SQL query editor demonstrating SQLRooms' DuckDB integration. Features include:

• Interactive SQL editor with syntax highlighting
• File dropzone for adding data tables to DuckDB
• Schema tree for browsing database tables and columns
• Tabbed interface for working with multiple queries
• Query execution with results data table
• Support for query cancellation
• There is a version of the example with offline functionality which supports Progressive Web App (PWA) features, persistent database storage with OPFS, and state persistence via local storage

To create a new project from the query example run this:

npx degit sqlrooms/examples/query my-new-app/

Running locally

npm install
npm run dev

AI Assistant

AI-Powered Analytics

Try live | Github repo | Open in StackBlitz

An advanced example showing how to build an AI-powered analytics application with SQLRooms. Features include:

• Natural language data exploration
• AI-driven data analysis
• Integration with SQLRooms AI assistant
• Custom visualization components
• Room state persistence

To create a new project from the AI example run this:

npx degit sqlrooms/examples/ai my-new-app/

Running locally

npm install
npm run dev

AI App Builder

Github repo | Open in StackBlitz

A SQLRooms app that builds SQLRooms apps—demonstrating recursive bootstrapping. The outer app runs an AI assistant on the left and a code editor in the middle, while the right third hosts the inner app which compiles on the fly and executes in a browser-based virtual environment powered by StackBlitz WebContainers.

Features:

• AI-assisted app generation via SQLRooms AI assistant
• Live code editing with instant preview
• In-browser compilation and execution (no server required, except for the model)
• Recursive bootstrapping pattern

To create a new project from this example:

npx degit sqlrooms/examples/app-builder my-new-app/

Running locally

npm install
npm run dev

Geospatial

Deck.gl Geospatial Visualization

Try live | Github repo | Open in StackBlitz

An example demonstrating deck.gl integration for geospatial data visualization. Features include:

• Load airports data file into DuckDB
• Run SQL queries to filter and transform data
• Visualize airport locations on an interactive map
• High-performance WebGL-based rendering

To create a new project from the deckgl example run this:

npx degit sqlrooms/examples/deckgl my-new-app/

Running Locally

npm install
npm run dev

Deck.gl + Commenting & Annotation

Try live | Github repo | Open in StackBlitz

An example showcasing integration with deck.gl for geospatial data visualization combined with the @sqlrooms/discuss module for collaborative features. Features include:

• High-performance WebGL-based geospatial visualizations
• Real-time commenting and annotation system
• Contextual discussions tied to specific data points

To create a new project from the deckgl-discuss example run this:

npx degit sqlrooms/examples/deckgl-discuss my-new-app/

Running locally

npm install
npm run dev

Kepler.gl Geospatial Visualization

Try live | Github repo | Open in StackBlitz

An example demonstrating Kepler.gl integration for geospatial data visualization. Features include:

• Load earthquakes dataset into DuckDB
• Add data as a Kepler layer for map visualization
• Interactive map controls and filtering
• Rich styling options for geospatial layers

To create a new project from the kepler example run this:

npx degit sqlrooms/examples/kepler my-new-app/

Running locally

npm install
npm dev

Graph and embedding visualization

Cosmos – Graph Visualization

Try live | Github repo | Open in StackBlitz

An example demonstrating integration with the Cosmos GPU-accelerated graph visualization library. Features include:

• WebGL-based force-directed layout computation
• High-performance rendering of large networks
• Real-time interaction and filtering capabilities
• Customizable visual attributes and physics parameters
• Event handling for node/edge interactions

To create a new project from the cosmos example run this:

npx degit sqlrooms/examples/cosmos my-new-app/

Running locally

npm install
npm dev

Cosmos – 2D Embedding Visualization

Try live | Github repo | Open in StackBlitz

An example showcasing integration with Cosmos for visualizing high-dimensional data in 2D space. Features include:

• WebGL-powered rendering of 2D embeddings
• GPU-accelerated positioning and transitions
• Dynamic mapping of data attributes to visual properties
• Efficient handling of large-scale embedding datasets
• Interactive exploration with pan, zoom, and filtering

To create a new project from the cosmos-embedding example run this:

npx degit sqlrooms/examples/cosmos-embedding my-new-app/

Running locally

npm install
npm dev

Charts

Next.js + Recharts Example

Try live | Github repo | Open in StackBlitz

A minimalistic Next.js app example featuring:

• Recharts module for data visualization
• Tailwind 4 for styling (experimental)

To create a new project from the Next.js example run this:

npx degit sqlrooms/examples/nextjs my-new-app/

Running locally

npm install
npm dev

Mosaic Interactive Visualization Example

Try live | Github repo | Open in StackBlitz

An example demonstrating integration with Mosaic, a powerful interactive visualization framework utilizing DuckDB and high-performance cross-filtering.

Features include:

• Complete project setup using Vite and TypeScript
• Comprehensive data source management and configuration
• Seamless integration with Mosaic for interactive visualizations
• Real-time cross-filtering capabilities across multiple views
• Example dashboards with common visualization types

To create a new project from the mosaic example run this:

npx degit sqlrooms/examples/mosaic my-new-app/

Running locally

npm install
npm dev

Other examples

MotherDuck Cloud Query Editor

Try live | Github repo | Open in StackBlitz

A browser-based SQL query editor that connects directly to MotherDuck's cloud-hosted DuckDB using the WASM connector. Features include:

• Example of using the WasmMotherDuckDbConnector from @sqlrooms/motherduck
• Connect to MotherDuck from the browser using DuckDB WASM
• Run SQL queries against local and cloud datasets
• Attach and query DuckLake data lake and catalog

To create a new project from the query-motherduck example run this:

npx degit sqlrooms/examples/query-motherduck my-new-app/

AI RAG Example (Retrieval Augmented Generation)

Github repo | Open in StackBlitz

An example demonstrating Retrieval Augmented Generation (RAG) using SQLRooms and DuckDB for vector search. Features include:

• AI chat with RAG: ask questions and get answers based on relevant documentation
• Direct RAG search UI to query embedded documentation
• Vector embeddings stored in DuckDB with native vector similarity search
• Integration with OpenAI for embeddings and chat responses

To create a new project from the ai-rag example run this:

npx degit sqlrooms/examples/ai-rag my-new-app/

Setup

1. Generate DuckDB Documentation Embeddings

First, generate vector embeddings of the DuckDB documentation using the sqlrooms-rag package:

# Download DuckDB docs
npx degit duckdb/duckdb-web/docs ./duckdb-docs

# Generate embeddings with OpenAI (requires OPENAI_API_KEY env var)
OPENAI_API_KEY=your-key uvx --from sqlrooms-rag prepare-embeddings ./duckdb-docs -o public/rag/duckdb_docs.duckdb --provider openai

This will process all markdown files and create a DuckDB database with 1536-dim OpenAI embeddings at public/rag/duckdb_docs.duckdb.

2. Set Your OpenAI API Key

The app requires an OpenAI API key for:

• Generating embeddings for your search queries (on the fly)
• Powering the AI chat responses

You'll be prompted to enter your API key when you start the app, or you can set it in the settings.

Running Locally

npm install
npm run dev

Then open the app and:

1. Enter your OpenAI API key in the settings
2. Click the search icon to test RAG search directly
3. Use the AI chat to ask questions about DuckDB

Looking for More?

You can find even more example applications in our Examples Repository.

Also, check out our Case Studies page for real-world applications using SQLRooms.