Repository navigation
Expand file tree
/
Copy pathexamples.html
More file actions
74 lines (72 loc) · 98 KB
/
Copy pathexamples.html
File metadata and controls
74 lines (72 loc) · 98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Example Applications | SQLRooms</title>
<meta name="description" content="An open source React toolkit for human + agent collaborative analytics apps">
<meta name="generator" content="VitePress v2.0.0-alpha.19">
<link rel="preload stylesheet" href="/assets/style.GttFTkQB.css" as="style">
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
<script type="module" src="/assets/chunks/metadata.fe281f1a.js"></script>
<script type="module" src="/assets/app.BQlhqzmk.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.BOE8-mWI.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/theme.Dgecjb1A.js">
<link rel="modulepreload" href="/assets/chunks/framework.DPaNRfRs.js">
<link rel="modulepreload" href="/assets/examples.md.D0iXCYVQ.lean.js">
<link rel="icon" href="/logo.svg" type="image/svg+xml">
<meta name="google-site-verification" content="x-FE_DDWM1BS8Eu4JOG0el7pL1gWJgIM-fwFl2EG4OU">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
<link rel="canonical" href="https://sqlrooms.org/examples.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Example Applications">
<meta property="og:description" content="An open source React toolkit for human + agent collaborative analytics apps">
<meta property="og:image" content="https://sqlrooms.org/sqlrooms-og.webp">
<meta property="og:url" content="https://sqlrooms.org/examples.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Example Applications">
<meta name="twitter:description" content="An open source React toolkit for human + agent collaborative analytics apps">
<meta name="twitter:image" content="https://sqlrooms.org/sqlrooms-og.webp">
</head>
<body>
<div id="app"><div class="" data-v-2fad8a9b><!----><div class="Layout" data-v-2fad8a9b data-v-53f480f5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-e2663537></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-e2663537>Skip to content</a><!--]--><!----><header class="VPNav" data-v-53f480f5 data-v-14cf5896><div class="VPNavBar has-sidebar top" data-v-14cf5896 data-v-9f3e8058><div class="wrapper" data-v-9f3e8058><div class="container" data-v-9f3e8058><div class="title" data-v-9f3e8058><div class="VPNavBarTitle has-sidebar" data-v-9f3e8058 data-v-eaa76576><a class="title" href="/" data-v-eaa76576><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-0fb946b3><!--]--><span data-v-eaa76576>SQLRooms</span><!--[--><!--]--></a></div></div><div class="content" data-v-9f3e8058><div class="content-body" data-v-9f3e8058><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9f3e8058 data-v-df279f03><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-df279f03 data-v-1f7fc8f9><span class="vpi-search" aria-hidden="true" data-v-1f7fc8f9></span><span class="text" data-v-1f7fc8f9>Search</span><span class="keys" aria-hidden="true" data-v-1f7fc8f9><kbd class="key-cmd" data-v-1f7fc8f9>⌘</kbd><kbd class="key-ctrl" data-v-1f7fc8f9>Ctrl</kbd><kbd data-v-1f7fc8f9>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9f3e8058 data-v-43773075><span id="main-nav-aria-label" class="visually-hidden" data-v-43773075> Main Navigation </span><ul class="list" data-v-43773075><!--[--><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Home</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/overview.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Overview</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink active" href="/examples.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Examples</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/case-studies.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Case Studies</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/getting-started.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>Get started</span><!--]--></a></li><li data-v-43773075><a class="VPLink link VPNavBarMenuLink" href="/packages.html" tabindex="0" data-v-43773075 data-v-9b2756db><!--[--><span data-v-9b2756db>API v0.29.0</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavBarAppearance appearance" data-v-9f3e8058 data-v-e48ead08><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-e48ead08 data-v-3c5fcb97 data-v-ebc28de1><span class="check" data-v-ebc28de1><span class="icon" data-v-ebc28de1><!--[--><span class="vpi-sun sun" data-v-3c5fcb97></span><span class="vpi-moon moon" data-v-3c5fcb97></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9f3e8058 data-v-e6cbc484 data-v-f70cf198><!--[--><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="/join-slack" aria-label="slack" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-slack"></span></a></li><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="https://github.com/sqlrooms/sqlrooms" aria-label="github" target="_blank" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-github"></span></a></li><!--]--></ul><div class="VPFlyout VPNavBarExtra extra" data-v-9f3e8058 data-v-95a6d757 data-v-7363103e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-7363103e><span class="vpi-more-horizontal icon" data-v-7363103e></span></button><div class="menu" data-v-7363103e><div class="VPMenu" data-v-7363103e data-v-35a39913><!----><!--[--><!--[--><!----><div class="group" data-v-95a6d757><div class="item appearance" data-v-95a6d757><p class="label" data-v-95a6d757>Appearance</p><div class="appearance-action" data-v-95a6d757><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-95a6d757 data-v-3c5fcb97 data-v-ebc28de1><span class="check" data-v-ebc28de1><span class="icon" data-v-ebc28de1><!--[--><span class="vpi-sun sun" data-v-3c5fcb97></span><span class="vpi-moon moon" data-v-3c5fcb97></span><!--]--></span></span></button></div></div></div><div class="group" data-v-95a6d757><div class="item social-links" data-v-95a6d757><ul class="VPSocialLinks social-links-list" data-v-95a6d757 data-v-f70cf198><!--[--><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="/join-slack" aria-label="slack" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-slack"></span></a></li><li class="item" data-v-f70cf198><a class="VPSocialLink no-icon" href="https://github.com/sqlrooms/sqlrooms" aria-label="github" target="_blank" rel="me noopener" data-v-f70cf198 data-v-3615a943><span class="vpi-social-github"></span></a></li><!--]--></ul></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9f3e8058 data-v-2a5ed0cd><span class="container" data-v-2a5ed0cd><span class="top" data-v-2a5ed0cd></span><span class="middle" data-v-2a5ed0cd></span><span class="bottom" data-v-2a5ed0cd></span></span></button></div></div></div></div><div class="divider" data-v-9f3e8058><div class="divider-line" data-v-9f3e8058></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-53f480f5 data-v-02d225e3><div class="container" data-v-02d225e3><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-02d225e3><span class="vpi-align-left menu-icon" data-v-02d225e3></span><span class="menu-text" data-v-02d225e3>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-02d225e3 data-v-f6433228><button data-v-f6433228>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-53f480f5 data-v-95f45de3><div class="curtain" data-v-95f45de3></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-95f45de3><span class="visually-hidden" id="sidebar-aria-label" data-v-95f45de3> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Introduction</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/overview.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Overview</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/key-concepts.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Key Concepts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/modular-architecture.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Modular Architecture</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/deployment-scenarios.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Deployment Scenarios</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/whats-new.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>What's New</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/upgrade-guide.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Upgrade Guide</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Developer Guide</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/getting-started.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/state-management.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>State Management</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/layout.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/persistence.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Persistence</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/artifacts.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Artifacts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/blocks-and-documents.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Blocks and Block Documents</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/commands.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Commands</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/query-cancellation.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Query Cancellation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/theming.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Theming</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/offline-use.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Offline Use</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Examples</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/examples.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Example Apps</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/case-studies.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Case Studies</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-f2c1a4d1><section class="VPSidebarItem level-0" data-v-f2c1a4d1 data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h2 class="text" data-v-8a83fa84>Reference</h2><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/packages.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Package Reference</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Core Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/artifacts/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>artifacts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/blocks/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>blocks</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/db/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>db</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/duckdb/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>duckdb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/duckdb-core/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>duckdb-core</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/layout/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/room-shell/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>room-shell</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/room-store/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>room-store</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ui/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ui</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>AI Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai-core/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai-core</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai-settings/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai-settings</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Feature Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/codemirror/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>codemirror</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/color-scales/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>color-scales</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/cosmos/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>cosmos</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/data-table/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>data-table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/deck/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>deck</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/documents/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>documents</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/dropzone/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>dropzone</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/kepler/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>kepler</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/monaco-editor/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>monaco-editor</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/mosaic/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>mosaic</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/motherduck/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>motherduck</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/recharts/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>recharts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/schema-tree/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>schema-tree</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/sql-editor/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>sql-editor</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/vega/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>vega</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Experimental Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/ai-rag/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>ai-rag</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/app-runtime/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>app-runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/canvas/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>canvas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/cells/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>cells</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/crdt/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>crdt</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/db-settings/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>db-settings</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/discuss/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>discuss</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/duckdb-node/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>duckdb-node</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/notebook/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>notebook</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/pivot/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/python/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>python</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/s3-browser/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>s3-browser</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/webcontainer/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>webcontainer</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><section class="VPSidebarItem level-1" data-v-8a83fa84><div class="item" role="button" tabindex="0" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><h3 class="text" data-v-8a83fa84>Utility Packages</h3><!----></div><ul class="items" data-v-8a83fa84><li data-v-8a83fa84><!--[--><div class="VPSidebarItem level-2 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/api/utils/" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>utils</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section><div class="VPSidebarItem level-1 is-link" data-v-8a83fa84><div class="item" data-v-8a83fa84><div class="indicator" data-v-8a83fa84></div><a class="VPLink link link" href="/llms.html" data-v-8a83fa84><!--[--><p class="text" data-v-8a83fa84>Docs for LLMs</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-53f480f5 data-v-cb9c851e><div class="VPDoc has-sidebar has-aside" data-v-cb9c851e data-v-58e6fef3><!--[--><!--]--><div class="container" data-v-58e6fef3><div class="aside" data-v-58e6fef3><div class="aside-curtain" data-v-58e6fef3></div><div class="aside-container" data-v-58e6fef3><div class="aside-content" data-v-58e6fef3><div class="VPDocAside" data-v-58e6fef3 data-v-c18230bb><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-c18230bb data-v-2c76e3c3><div class="content" data-v-2c76e3c3><div class="outline-marker" data-v-2c76e3c3></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-2c76e3c3>On this page</div><ul class="VPDocOutlineItem root" data-v-2c76e3c3 data-v-b23a9181><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-c18230bb></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-58e6fef3><div class="content-container" data-v-58e6fef3><!--[--><!--]--><main class="main" data-v-58e6fef3><div style="position:relative;" class="vp-doc _examples" data-v-58e6fef3><div><div style="display:none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /examples.md for this page in Markdown format</div><h1 id="example-applications" tabindex="-1">Example Applications <a class="header-anchor" href="#example-applications" aria-label="Permalink to “Example Applications”"></a></h1><p>All example applications are available in our <a href="https://github.com/sqlrooms/examples" target="_blank" rel="noreferrer">Examples Repository</a>. Here's a list of featured examples:</p><h2 id="basic-examples" tabindex="-1">Basic examples <a class="header-anchor" href="#basic-examples" aria-label="Permalink to “Basic examples”"></a></h2><h3 id="getting-started" tabindex="-1"><a href="https://github.com/sqlrooms/examples/tree/main/get-started" target="_blank" rel="noreferrer">Getting Started</a> <a class="header-anchor" href="#getting-started" aria-label="Permalink to “Getting Started”"></a></h3><p><a href="https://github.com/sqlrooms/examples/tree/main/get-started" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/get-started?embed=1" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p>A minimal Vite application demonstrating the basic usage of SQLRooms. Features include:</p><ul><li>Sets up an app store and a single main panel using SQLRooms' project builder utilities</li><li>Loads a CSV file of California earthquakes as a data source</li><li>Runs a SQL query in the browser (DuckDB WASM) to show summary statistics</li><li>Simple UI with loading, error, and result states</li></ul><p>To create a new project from the get-started example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/get-started</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h3 id="sql-query-editor" tabindex="-1"><a href="https://query.sqlrooms.org/" target="_blank" rel="noreferrer">SQL Query Editor</a> <a class="header-anchor" href="#sql-query-editor" aria-label="Permalink to “SQL Query Editor”"></a></h3><p><a href="https://query.sqlrooms.org/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/query" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/query?embed=1" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-query/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/779ab00f-9f8f-4c12-92d2-a75426ac0315/deploy-status" alt="Netlify Status"></a></p><a href="https://query.sqlrooms.org/" target="_blank"><img src="https://sqlrooms.org/media/examples/sqlrooms-query.webp" alt="SQLRooms SQL Query workbench example" width="450"></a><p>A comprehensive SQL query editor demonstrating SQLRooms' DuckDB integration. Features include:</p><ul><li>Interactive SQL editor with syntax highlighting</li><li>File dropzone for adding data tables to DuckDB</li><li>Schema tree for browsing database tables and columns</li><li>Tabbed interface for working with multiple queries</li><li>Query execution with results data table</li><li>Support for query cancellation</li><li>There is a <a href="https://github.com/sqlrooms/examples/tree/main/query-pwa" target="_blank" rel="noreferrer">version of the example with offline functionality</a> which supports Progressive Web App (PWA) features, persistent database storage with OPFS, and state persistence via local storage</li></ul><p>To create a new project from the query example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/query</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h3 id="layout" tabindex="-1"><a href="https://github.com/sqlrooms/examples/tree/main/layout" target="_blank" rel="noreferrer">Layout</a> <a class="header-anchor" href="#layout" aria-label="Permalink to “Layout”"></a></h3><p>An app demonstrating collapsible panels, custom tab strips, and dynamically created dock and grid dashboards. Start with the <a href="/layout.html">Layout developer guide</a> for configuration examples and links to the layout APIs.</p><h3 id="multi-room" tabindex="-1">Multi-Room <a class="header-anchor" href="#multi-room" aria-label="Permalink to “Multi-Room”"></a></h3><p><a href="https://sqlrooms-multi-room.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/sqlrooms/tree/main/examples/multi-room" target="_blank" rel="noreferrer">GitHub repo</a></p><p><video src="https://sqlrooms.org/media/examples/multi-room.mp4" alt="SQLRooms Multi-Room example" width="450" controls loop muted></video></p><p>A multi-room application demonstrating how to manage multiple independent data workspaces with proper room store lifecycle management and the powerful new Sidebar component pattern. Features include:</p><ul><li>TanStack Router with room list (<code>/</code>) and room detail (<code>/room/:id</code>) pages</li><li>Team-style room switcher in the Sidebar header with icon-collapsible navigation</li><li>Sidebar groups for platform navigation and live table schema tree exploration</li><li>Pre-seeded with two sample rooms: Earthquakes and BIXI bike locations</li><li>Paginated data table preview using <code>QueryDataTable</code></li><li>Persistent storage for room configs in local storage</li><li>Room CRUD operations (create, rename, delete)</li><li>Proper store initialization and destruction on room navigation</li></ul><p>To create a new project from the query example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/multi-room</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-1" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-1" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="ai-assistant" tabindex="-1">AI Assistant <a class="header-anchor" href="#ai-assistant" aria-label="Permalink to “AI Assistant”"></a></h2><h3 id="ai-powered-analytics" tabindex="-1"><a href="https://ai.sqlrooms.org/" target="_blank" rel="noreferrer">AI-Powered Analytics</a> <a class="header-anchor" href="#ai-powered-analytics" aria-label="Permalink to “AI-Powered Analytics”"></a></h3><p><a href="https://ai.sqlrooms.org/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/ai" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/ai?embed=1&file=components/app-shell.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-ai/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/031f0d4f-c2a3-44f8-adf1-6429164bb0c7/deploy-status" alt="Netlify Status"></a></p><p><video src="https://sqlrooms.org/media/examples/ai-example-light.mp4" alt="SQLRooms AI example app" width="450" controls loop muted></video></p><p>An advanced example showing how to build an AI-powered analytics application with SQLRooms. Features include:</p><ul><li>Natural language data exploration</li><li>AI-driven data analysis</li><li>Integration with <a href="/api/ai/">SQLRooms AI assistant</a></li><li>Custom visualization components</li><li>Room state persistence</li></ul><p>To create a new project from the AI example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/ai</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-2" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-2" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h3 id="ai-app-builder" tabindex="-1"><a href="https://sqlrooms-ai.netlify.app/" target="_blank" rel="noreferrer">AI App Builder</a> <a class="header-anchor" href="#ai-app-builder" aria-label="Permalink to “AI App Builder”"></a></h3><p><a href="https://github.com/sqlrooms/examples/tree/main/app-builder" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/app-builder?embed=1&file=src/main.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><video src="https://sqlrooms.org/media/examples/sqlrooms-ai-app-builder-2x.mp4" alt="SQLRooms AI App builder" width="450" controls loop muted></video></p><p>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 <a href="https://github.com/stackblitz/webcontainer-core" target="_blank" rel="noreferrer">StackBlitz WebContainer</a>.</p><p>Features:</p><ul><li>AI-assisted app generation via <a href="/api/ai/">SQLRooms AI assistant</a></li><li>Live code editing with instant preview</li><li>In-browser compilation and execution (no server required, except for the model)</li><li>Recursive bootstrapping pattern</li></ul><p>To create a new project from this example:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/app-builder</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-3" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-3" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="geospatial" tabindex="-1">Geospatial <a class="header-anchor" href="#geospatial" aria-label="Permalink to “Geospatial”"></a></h2><h3 id="deck-gl-mosaic" tabindex="-1"><a href="https://sqlrooms-deckgl-mosaic.netlify.app/" target="_blank" rel="noreferrer">Deck.gl + Mosaic</a> <a class="header-anchor" href="#deck-gl-mosaic" aria-label="Permalink to “Deck.gl + Mosaic”"></a></h3><p><a href="https://sqlrooms-deckgl-mosaic.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/deckgl-mosaic" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/deckgl-mosaic?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-deckgl-mosaic/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/e4571f95-9e51-4d4a-8e68-98d6f7c99980/deploy-status" alt="Netlify Status"></a></p><p>This example is based on the <a href="https://github.com/dzole0311/deckgl-duckdb-geoarrow" target="_blank" rel="noreferrer">original demo app</a> by <a href="https://github.com/dzole0311" target="_blank" rel="noreferrer">Gjore Milevski</a>.</p><p><video src="https://sqlrooms.org/media/examples/sqlrooms-deckgl-mosaic-1500px.mp4" alt="SQLRooms Deck.gl+Mosaic example app" width="450" controls loop muted></video></p><p>An example showcasing integration with <a href="https://deck.gl/" target="_blank" rel="noreferrer">deck.gl</a> and the <a href="https://github.com/uwdata/mosaic" target="_blank" rel="noreferrer">UWData Mosaic</a> package for performant cross-filtering, now routed through <a href="./../packages/deck/README.html"><code>@sqlrooms/deck</code></a>.</p><p>The architecture uses Mosaic’s global Coordinator to manage state between linked views using SQL predicates. The map spec stays separate from the data, the current Mosaic-filtered Arrow result is passed into <code>DeckJsonMap</code>, and multiple JSON layers reuse that same prepared dataset instead of maintaining a local GeoArrow bridge utility.</p><p>To create a new project from the deckgl-mosaic example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/deckgl-mosaic</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-4" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-4" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h3 id="mosaic-datafusion-wasm-zarr" tabindex="-1"><a href="https://sqlrooms-deckgl-mosaic-datafusion.netlify.app/" target="_blank" rel="noreferrer">Mosaic + DataFusion-WASM + Zarr</a> <a class="header-anchor" href="#mosaic-datafusion-wasm-zarr" aria-label="Permalink to “Mosaic + DataFusion-WASM + Zarr”"></a></h3><p><a href="https://sqlrooms-deckgl-mosaic-datafusion.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/sqlrooms/tree/main/examples/deckgl-mosaic-datafusion" target="_blank" rel="noreferrer">GitHub repo</a></p><p><video src="https://sqlrooms.org/media/examples/sqlrooms-deckgl-mosaic-datafusion-example.mp4" aria-label="SQLRooms Deck.gl, Mosaic, and DataFusion example app preview" width="450" controls loop muted>Preview of the SQLRooms Deck.gl, Mosaic, and DataFusion example app.</video></p><p>This example ports <a href="https://github.com/dzole0311" target="_blank" rel="noreferrer">Gjore Milevski</a>'s <a href="https://github.com/dzole0311/mosaic-datafusion-zarr-deckgl" target="_blank" rel="noreferrer">mosaic-datafusion-zarr-deckgl</a> experiment (read the <a href="https://gjoremilevski.com/posts/mosaic-datafusion-zarr-deckgl/" target="_blank" rel="noreferrer">original write-up</a>) into the SQLRooms shell, alongside the <a href="https://github.com/sqlrooms/examples/tree/main/deckgl-mosaic" target="_blank" rel="noreferrer">Deck.gl + Mosaic example</a> it is structurally closest to.</p><p>ECMWF IFS ENS temperature is streamed client-side from a public Zarr store (<a href="https://dynamical.org" target="_blank" rel="noreferrer">dynamical.org</a>) with zarrita, queried with <a href="https://github.com/apache/datafusion" target="_blank" rel="noreferrer">DataFusion compiled to WASM</a> through a Mosaic crossfilter, and rendered with <a href="https://github.com/developmentseed/deck.gl-raster" target="_blank" rel="noreferrer">@developmentseed/deck.gl-zarr</a>.</p><p>This room is hand-composed from the base room, layout, Mosaic, and forecast slices. It does not include SQLRooms' DuckDB slice, so loading the example does not initialize or download DuckDB-WASM. Its full query path is:</p><div class="language-text"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>Mosaic clients → supplied Mosaic Coordinator → DataFusion connector → DataFusion-WASM</span></span></code></pre></div><p>The DataFusion-WASM wrapper's <code>query({type, sql})</code> method already matches Mosaic's <code>Connector</code> interface. It returns <a href="https://github.com/uwdata/flechette" target="_blank" rel="noreferrer">flechette</a> tables directly because that is what DataFusion's Arrow IPC output decodes into, so the wrapper is handed to the supplied <code>Coordinator</code> as-is. Room shell chrome (sidebar, theme, layout panels), the map, the raster shaders, and the crossfilter hooks are otherwise unchanged from the source app.</p><p>Because the Coordinator can only be built once the DataFusion tables exist (which needs the first streamed Zarr chunk), the room store here is not a static module export like other examples' <code>store.ts</code>; it's built by <code>createForecastRoomStore(lab)</code> once boot finishes, see <code>src/App.tsx</code>.</p><p>The DataFusion-WASM bindings ship with <code>execute_ipc</code>, <code>register_ipc</code> and <code>materialize_table</code>, which the published upstream package doesn't have, so this example depends on <a href="https://www.npmjs.com/package/@dzole0311/datafusion-wasm" target="_blank" rel="noreferrer"><code>@dzole0311/datafusion-wasm</code></a>, a patched build published from <a href="https://github.com/dzole0311/datafusion-wasm-bindings" target="_blank" rel="noreferrer">dzole0311/datafusion-wasm-bindings</a> (a fork of <a href="https://github.com/datafusion-contrib/datafusion-wasm-bindings" target="_blank" rel="noreferrer">datafusion-contrib/datafusion-wasm-bindings</a>).</p><h4 id="running-locally-5" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-5" aria-label="Permalink to “Running locally”"></a></h4><p>Build the workspace packages first, then run this example:</p><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> deckgl-mosaic-datafusion-example</span></span></code></pre></div><h3 id="kepler-gl-geospatial-visualization" tabindex="-1"><a href="https://kepler.sqlrooms.org/" target="_blank" rel="noreferrer">Kepler.gl Geospatial Visualization</a> <a class="header-anchor" href="#kepler-gl-geospatial-visualization" aria-label="Permalink to “Kepler.gl Geospatial Visualization”"></a></h3><p><a href="https://kepler.sqlrooms.org/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/kepler" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/kepler?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-kepler/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/888420a3-33e4-4142-a3b5-03a61c44e09a/deploy-status" alt="Netlify Status"></a></p><a href="https://kepler.sqlrooms.org/" target="_blank"><img src="https://sqlrooms.org/media/examples/kepler.webp" alt="SQLRooms Kepler.gl geospatial visualization example" width="450"></a><p>An example demonstrating <a href="https://kepler.gl/" target="_blank" rel="noreferrer">Kepler.gl</a> integration for geospatial data visualization. Features include:</p><ul><li>Load earthquakes dataset into DuckDB</li><li>Add data as a Kepler layer for map visualization</li><li>Interactive map controls and filtering</li><li>Rich styling options for geospatial layers</li></ul><p>To create a new project from the kepler example run this:</p><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/kepler</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-6" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-6" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h3 id="deck-gl-geospatial-visualization" tabindex="-1"><a href="https://sqlrooms-deckgl.netlify.app/" target="_blank" rel="noreferrer">Deck.gl Geospatial Visualization</a> <a class="header-anchor" href="#deck-gl-geospatial-visualization" aria-label="Permalink to “Deck.gl Geospatial Visualization”"></a></h3><p><a href="https://sqlrooms-deckgl.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/deckgl" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/deckgl?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-deckgl/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/b507fcea-e5ec-4822-988d-77857944cf48/deploy-status" alt="Netlify Status"></a></p><a href="https://sqlrooms-deckgl.netlify.app/" target="_blank"><img src="https://sqlrooms.org/media/examples/deckgl.webp" alt="SQLRooms Deck.gl geospatial visualization example" width="450"></a><p>An example demonstrating <a href="https://deck.gl/" target="_blank" rel="noreferrer">deck.gl</a> integration for geospatial data visualization through <a href="./../packages/deck/README.html"><code>@sqlrooms/deck</code></a>. It renders ~48k Overture Maps building footprints for the Zurich city centre (currently 48,451 rows), extruded in 3D and colored by height using a sequential color scale.</p><p>Features:</p><ul><li>Query a Hugging Face-hosted Parquet file with DuckDB WASM via <code>httpfs</code></li><li>Load airports data file into DuckDB</li><li>Define a serializable deck.gl JSON layer spec separately from the data</li><li>Bind multiple named DuckDB-backed datasets into one map</li><li>Visualize airport locations on an interactive map with GeoArrow-backed point layers</li><li>WKB geometry decoded directly to GeoArrow — no GeoJSON intermediate</li><li>3D extruded <code>GeoArrowPolygonLayer</code> with height-based color scale</li><li>Legend title includes units (<code>Height (m)</code>) with domain matching loaded data min/max</li><li>Tooltip with building name, class, and height</li><li>Toggle between airports and Zurich buildings in the same map UI</li></ul><p>To create a new project from the deckgl example run this:</p><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/deckgl</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-7" tabindex="-1">Running Locally <a class="header-anchor" href="#running-locally-7" aria-label="Permalink to “Running Locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> deckgl-example</span></span></code></pre></div><h4 id="regenerating-the-dataset" tabindex="-1">Regenerating the dataset <a class="header-anchor" href="#regenerating-the-dataset" aria-label="Permalink to “Regenerating the dataset”"></a></h4><p>The Zurich buildings dataset is hosted at <a href="https://huggingface.co/datasets/sqlrooms/buildings" target="_blank" rel="noreferrer"><code>sqlrooms/buildings</code></a> on Hugging Face. It was generated from <a href="https://overturemaps.org/" target="_blank" rel="noreferrer">Overture Maps</a> using DuckDB. Run in the DuckDB CLI or any SQL client with <code>httpfs</code> and <code>spatial</code> extensions:</p><div class="language-sql"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sql</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">INSTALL httpfs; </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">LOAD</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> httpfs;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">INSTALL </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">spatial</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">LOAD</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> spatial</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">SET</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> s3_region </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'us-west-2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">COPY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> SELECT</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> names</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">primary</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> AS</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> COALESCE</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(height, num_floors </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">AS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ST_AsWKB(</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">geometry</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">AS</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> geometry</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> FROM</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> read_parquet(</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 's3://overturemaps-us-west-2/release/2026-04-15.0/theme=buildings/type=building/*.zstd.parquet'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> hive_partitioning </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> WHERE</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bbox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">xmin</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> BETWEEN</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">47</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> AND</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">59</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> AND</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bbox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">ymin</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> BETWEEN</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 47</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">335</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> AND</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 47</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">415</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> LIMIT</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 50000</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">TO</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'zurich_buildings.parquet'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>Adjust the bounding box or the release date to target a different area or a newer Overture snapshot, then upload the resulting Parquet file to the Hugging Face dataset.</p><h3 id="deck-gl-commenting-annotation" tabindex="-1"><a href="https://sqlrooms-deckgl-discuss.netlify.app/" target="_blank" rel="noreferrer">Deck.gl + Commenting & Annotation</a> <a class="header-anchor" href="#deck-gl-commenting-annotation" aria-label="Permalink to “Deck.gl + Commenting & Annotation”"></a></h3><p><a href="https://sqlrooms-deckgl-discuss.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/deckgl-discuss" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/deckgl-discuss?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-deckgl-discuss/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/9c32bdac-f2b1-4cf3-b48b-fa197e0986e3/deploy-status" alt="Netlify Status"></a></p><a href="https://sqlrooms-deckgl-discuss.netlify.app/" target="_blank"><img src="https://sqlrooms.org/media/examples/deckgl-discuss.webp" alt="SQLRooms Deck.gl with commenting and annotation example" width="450"></a><p>An example showcasing integration with <a href="https://deck.gl/" target="_blank" rel="noreferrer">deck.gl</a> for geospatial data visualization combined with the <a href="/api/discuss.html">@sqlrooms/discuss</a> module for collaborative features. Features include:</p><ul><li>High-performance WebGL-based geospatial visualizations</li><li>Real-time commenting and annotation system</li><li>Contextual discussions tied to specific data points</li></ul><p>To create a new project from the deckgl-discuss example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/deckgl-discuss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-8" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-8" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="graph-and-embedding-visualization" tabindex="-1">Graph and embedding visualization <a class="header-anchor" href="#graph-and-embedding-visualization" aria-label="Permalink to “Graph and embedding visualization”"></a></h2><h3 id="cosmos-–-graph-visualization" tabindex="-1"><a href="http://sqlrooms-cosmos.netlify.app/" target="_blank" rel="noreferrer">Cosmos – Graph Visualization</a> <a class="header-anchor" href="#cosmos-–-graph-visualization" aria-label="Permalink to “Cosmos – Graph Visualization”"></a></h3><p><a href="http://sqlrooms-cosmos.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/cosmos" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/cosmos?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-cosmos/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/9e7cb117-0355-406d-88f8-54bf6d9050a0/deploy-status" alt="Netlify Status"></a></p><a href="http://sqlrooms-cosmos.netlify.app/" target="_blank"><img src="https://sqlrooms.org/media/examples/cosmos-graph.webp" alt="SQLRooms Graph example showing network visualization" width="450"></a><p>An example demonstrating integration with the <a href="https://github.com/cosmograph-org/cosmos" target="_blank" rel="noreferrer">Cosmos</a> GPU-accelerated graph visualization library. Features include:</p><ul><li>WebGL-based force-directed layout computation</li><li>High-performance rendering of large networks</li><li>Real-time interaction and filtering capabilities</li><li>Customizable visual attributes and physics parameters</li><li>Event handling for node/edge interactions</li></ul><p>To create a new project from the cosmos example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/cosmos</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-9" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-9" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h3 id="cosmos-–-2d-embedding-visualization" tabindex="-1"><a href="http://sqlrooms-cosmos-embedding.netlify.app/" target="_blank" rel="noreferrer">Cosmos – 2D Embedding Visualization</a> <a class="header-anchor" href="#cosmos-–-2d-embedding-visualization" aria-label="Permalink to “Cosmos – 2D Embedding Visualization”"></a></h3><p><a href="http://sqlrooms-cosmos-embedding.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/cosmos-embedding" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/cosmos-embedding?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-cosmos-embedding/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/da9fa044-3770-40c1-80cb-224db20de6d4/deploy-status" alt="Netlify Status"></a></p><a href="http://sqlrooms-cosmos-embedding.netlify.app/" target="_blank"><img src="https://sqlrooms.org/media/examples/cosmos-embedding.webp" alt="SQLRooms 2D Embedding visualization using Cosmos" width="450"></a><p>An example showcasing integration with Cosmos for visualizing high-dimensional data in 2D space. Features include:</p><ul><li>WebGL-powered rendering of 2D embeddings</li><li>GPU-accelerated positioning and transitions</li><li>Dynamic mapping of data attributes to visual properties</li><li>Efficient handling of large-scale embedding datasets</li><li>Interactive exploration with pan, zoom, and filtering</li></ul><p>To create a new project from the cosmos-embedding example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/cosmos-embedding</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-10" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-10" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="charts" tabindex="-1">Charts <a class="header-anchor" href="#charts" aria-label="Permalink to “Charts”"></a></h2><h3 id="next-js-recharts-example" tabindex="-1"><a href="https://sqlrooms-nextjs.netlify.app/" target="_blank" rel="noreferrer">Next.js + Recharts Example</a> <a class="header-anchor" href="#next-js-recharts-example" aria-label="Permalink to “Next.js + Recharts Example”"></a></h3><p><a href="https://sqlrooms-nextjs.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/nextjs" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/nextjs?embed=1" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-nextjs/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/3b7e32f9-b8f0-4da1-8ae7-6fa7c0fd9589/deploy-status" alt="Netlify Status"></a></p><a href="http://sqlrooms-nextjs.netlify.app/" target="_blank"><img src="https://sqlrooms.org/media/examples/nextjs.webp" alt="SQLRooms Next.js example" width="450"></a><p>A minimalistic <a href="https://nextjs.org/" target="_blank" rel="noreferrer">Next.js</a> app example featuring:</p><ul><li><a href="/api/recharts.html">Recharts module</a> for data visualization</li><li><a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank" rel="noreferrer">Tailwind 4</a> for styling</li></ul><p>To create a new project from the Next.js example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/nextjs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-11" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-11" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h3 id="mosaic-interactive-visualization-example" tabindex="-1"><a href="https://sqlrooms-mosaic.netlify.app/" target="_blank" rel="noreferrer">Mosaic Interactive Visualization Example</a> <a class="header-anchor" href="#mosaic-interactive-visualization-example" aria-label="Permalink to “Mosaic Interactive Visualization Example”"></a></h3><p><a href="https://sqlrooms-mosaic.netlify.app/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/mosaic" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/mosaic?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-mosaic/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/e67a893c-87ac-409d-ac54-3d31e431bb0b/deploy-status" alt="Netlify Status"></a></p><a href="https://sqlrooms-mosaic.netlify.app/" target="_blank"><img src="https://sqlrooms.org/media/examples/mosaic.webp" alt="SQLRooms Mosaic example Vite app" width="400"></a><p>An example demonstrating integration with <a href="https://idl.uw.edu/mosaic/" target="_blank" rel="noreferrer">Mosaic</a>, a powerful interactive visualization framework utilizing DuckDB and high-performance cross-filtering.</p><p>Features include:</p><ul><li>Complete project setup using Vite and TypeScript</li><li>Comprehensive data source management and configuration</li><li>Seamless integration with Mosaic for interactive visualizations</li><li>Real-time cross-filtering capabilities across multiple views</li><li>Example dashboards with common visualization types</li></ul><p>To create a new project from the mosaic example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/mosaic</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="running-locally-12" tabindex="-1">Running locally <a class="header-anchor" href="#running-locally-12" aria-label="Permalink to “Running locally”"></a></h4><div class="language-sh"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="other-examples" tabindex="-1">Other examples <a class="header-anchor" href="#other-examples" aria-label="Permalink to “Other examples”"></a></h2><h3 id="motherduck-cloud-query-editor" tabindex="-1"><a href="https://motherduck.sqlrooms.org/" target="_blank" rel="noreferrer">MotherDuck Cloud Query Editor</a> <a class="header-anchor" href="#motherduck-cloud-query-editor" aria-label="Permalink to “MotherDuck Cloud Query Editor”"></a></h3><p><a href="https://motherduck.sqlrooms.org/" target="_blank" rel="noreferrer">Try live</a> | <a href="https://github.com/sqlrooms/examples/tree/main/query-motherduck" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/query-motherduck?embed=1" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><p><a href="https://app.netlify.com/projects/sqlrooms-motherduck/deploys" target="_blank" rel="noreferrer"><img src="https://api.netlify.com/api/v1/badges/92d69716-a7b3-4051-9b31-2016584d4d5e/deploy-status" alt="Netlify Status"></a></p><a href="https://motherduck.sqlrooms.org/" target="_blank"><img src="https://sqlrooms.org/media/examples/motherduck-example.webp" alt="SQLRooms MotherDuck Cloud Query example" width="450"></a><p>A browser-based SQL query editor that connects directly to MotherDuck's cloud-hosted DuckDB using the WASM connector. Features include:</p><ul><li>Example of using the <code>WasmMotherDuckDbConnector</code> from <a href="./api/motherduck.html"><code>@sqlrooms/motherduck</code></a></li><li>Connect to MotherDuck from the browser using DuckDB WASM</li><li>Run SQL queries against local and cloud datasets</li><li>Attach and query <a href="https://motherduck.com/docs/integrations/file-formats/ducklake/" target="_blank" rel="noreferrer">DuckLake data lake and catalog</a></li></ul><p>To create a new project from the query-motherduck example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/query-motherduck</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h3 id="ai-rag-example-retrieval-augmented-generation" tabindex="-1">AI RAG Example (Retrieval Augmented Generation) <a class="header-anchor" href="#ai-rag-example-retrieval-augmented-generation" aria-label="Permalink to “AI RAG Example (Retrieval Augmented Generation)”"></a></h3><p><a href="https://github.com/sqlrooms/examples/tree/main/ai-rag" target="_blank" rel="noreferrer">GitHub repo</a> | <a href="https://stackblitz.com/github/sqlrooms/examples/tree/main/ai-rag?embed=1&file=src/app.tsx" target="_blank" rel="noreferrer">Open in StackBlitz</a></p><img src="https://sqlrooms.org/media/examples/rag.webp" alt="SQLRooms AI RAG example" width="450"><p>An example demonstrating Retrieval Augmented Generation (RAG) using SQLRooms and DuckDB for vector search. Features include:</p><ul><li>AI chat with RAG: ask questions and get answers based on relevant documentation</li><li>Direct RAG search UI to query embedded documentation</li><li>Vector embeddings stored in DuckDB with native vector similarity search</li><li>Integration with OpenAI for embeddings and chat responses</li></ul><p>To create a new project from the ai-rag example run this:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:sqlrooms/examples/ai-rag</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-new-app/</span></span></code></pre></div><h4 id="setup" tabindex="-1">Setup <a class="header-anchor" href="#setup" aria-label="Permalink to “Setup”"></a></h4><h5 id="_1-generate-duckdb-documentation-embeddings" tabindex="-1">1. Generate DuckDB Documentation Embeddings <a class="header-anchor" href="#_1-generate-duckdb-documentation-embeddings" aria-label="Permalink to “1. Generate DuckDB Documentation Embeddings”"></a></h5><p>First, generate vector embeddings of the DuckDB documentation using the <a href="https://pypi.org/project/sqlrooms-rag/" target="_blank" rel="noreferrer">sqlrooms-rag</a> package:</p><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"># Download DuckDB docs</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> giget</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> gh:duckdb/duckdb-web/docs</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./duckdb-docs</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"># Generate embeddings with OpenAI (requires OPENAI_API_KEY env var)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">OPENAI_API_KEY</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">your-key</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> uvx</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> sqlrooms-rag</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> prepare-embeddings</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./duckdb-docs</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -o</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> public/rag/duckdb_docs.duckdb</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --provider</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> openai</span></span></code></pre></div><p>This will process all markdown files and create a DuckDB database with 1536-dim OpenAI embeddings at <code>public/rag/duckdb_docs.duckdb</code>.</p><h5 id="_2-set-your-openai-api-key" tabindex="-1">2. Set Your OpenAI API Key <a class="header-anchor" href="#_2-set-your-openai-api-key" aria-label="Permalink to “2. Set Your OpenAI API Key”"></a></h5><p>The app requires an OpenAI API key for:</p><ul><li>Generating embeddings for your search queries (on the fly)</li><li>Powering the AI chat responses</li></ul><p>You'll be prompted to enter your API key when you start the app, or you can set it in the settings.</p><h4 id="running-locally-13" tabindex="-1">Running Locally <a class="header-anchor" href="#running-locally-13" aria-label="Permalink to “Running Locally”"></a></h4><div class="language-bash"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>Then open the app and:</p><ol><li>Enter your OpenAI API key in the settings</li><li>Click the search icon to test RAG search directly</li><li>Use the AI chat to ask questions about DuckDB</li></ol><h2 id="looking-for-more" tabindex="-1">Looking for More? <a class="header-anchor" href="#looking-for-more" aria-label="Permalink to “Looking for More?”"></a></h2><p>You can find even more example applications in our <a href="https://github.com/sqlrooms/examples" target="_blank" rel="noreferrer">Examples Repository</a>.</p><p>Also, check out our <a href="/case-studies.html">Case Studies</a> page for real-world applications using SQLRooms.</p></div></div></main><footer class="VPDocFooter" data-v-58e6fef3 data-v-d2daf589><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d2daf589><span class="visually-hidden" id="doc-footer-aria-label" data-v-d2daf589>Pager</span><div class="pager" data-v-d2daf589><a class="VPLink link pager-link prev" href="/offline-use.html" data-v-d2daf589><!--[--><span class="desc" data-v-d2daf589>Previous page</span><span class="title" data-v-d2daf589>Offline Use</span><!--]--></a></div><div class="pager" data-v-d2daf589><a class="VPLink link pager-link next" href="/case-studies.html" data-v-d2daf589><!--[--><span class="desc" data-v-d2daf589>Next page</span><span class="title" data-v-d2daf589>Case Studies</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!----><div class="site-footer" data-v-2fad8a9b><div class="sponsors-footer" data-v-2fad8a9b><div class="sponsor-item" data-v-2fad8a9b><a href="https://www.openvisualization.org/" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img width="132" height="40" src="/openvis.svg" alt="Open Visualization Logo" decoding="async" class="openvis-logo openvis-light" data-v-2fad8a9b><img width="132" height="40" src="/openvis-white.svg" alt="Open Visualization Logo" decoding="async" class="openvis-logo openvis-dark" data-v-2fad8a9b></a></div><div class="sponsor-item" data-v-2fad8a9b><a href="https://openjsf.org" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img width="126" height="40" src="/openjsf-logo.svg" alt="OpenJS Foundation Logo" decoding="async" class="openjsf-logo openjsf-light" data-v-2fad8a9b><img width="127" height="40" src="/openjs-foundation-logo-horizontal-white.svg" alt="OpenJS Foundation Logo" decoding="async" class="openjsf-logo openjsf-dark" data-v-2fad8a9b></a></div><div class="sponsor-item" data-v-2fad8a9b><a href="https://vis.gl/" target="_blank" rel="noopener noreferrer" class="visgl-link" data-v-2fad8a9b><img width="117" height="30" src="/visgl-logo-color.svg" alt="VIS.GL Logo" decoding="async" class="visgl-logo visgl-light" data-v-2fad8a9b><img width="117" height="30" src="/visgl-logo-color-dark_background.svg" alt="VIS.GL Logo" decoding="async" class="visgl-logo visgl-dark" data-v-2fad8a9b></a></div><div class="sponsor-item" data-v-2fad8a9b> Supported by <a href="https://location.foursquare.com" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img width="100" height="32" src="/foursquare-logo.svg" alt="Foursquare Logo" decoding="async" class="foursquare-logo" data-v-2fad8a9b></a></div><div class="sponsor-item horizontal" data-v-2fad8a9b> Deploys by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer" data-v-2fad8a9b><img src="https://www.netlify.com/assets/badges/netlify-badge-light.svg" alt="Deploys by Netlify" class="netlify-logo netlify-light" data-v-2fad8a9b><img src="https://www.netlify.com/assets/badges/netlify-badge-dark.svg" alt="Deploys by Netlify" class="netlify-logo netlify-dark" data-v-2fad8a9b></a></div></div><div class="footer__copyright" data-v-2fad8a9b><div class="footer-copy" data-v-2fad8a9b> Copyright <a href="https://openjsf.org" data-v-2fad8a9b>OpenJS Foundation</a> and vis.gl contributors. All rights reserved. The <a href="https://openjsf.org" data-v-2fad8a9b>OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org" data-v-2fad8a9b>OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org" data-v-2fad8a9b>Trademark Policy</a> and <a href="https://trademark-list.openjsf.org" data-v-2fad8a9b>Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org" data-v-2fad8a9b>list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.<br data-v-2fad8a9b><br data-v-2fad8a9b><a href="https://openjsf.org" data-v-2fad8a9b>The OpenJS Foundation</a> | <a href="https://terms-of-use.openjsf.org" data-v-2fad8a9b>Terms of Use</a> | <a href="https://privacy-policy.openjsf.org" data-v-2fad8a9b>Privacy Policy</a> | <a href="https://bylaws.openjsf.org" data-v-2fad8a9b>Bylaws</a> | <a href="https://code-of-conduct.openjsf.org" data-v-2fad8a9b>Code of Conduct</a> | <a href="https://trademark-policy.openjsf.org" data-v-2fad8a9b>Trademark Policy</a> | <a href="https://trademark-list.openjsf.org" data-v-2fad8a9b>Trademark List</a> | <a href="https://www.linuxfoundation.org/cookies" data-v-2fad8a9b>Cookie Policy</a></div></div></div><!--]--></div></div></div>
</body>
</html>