An open source React toolkit for human + agent collaborative analytics apps
To create a new project from the minimal example, run:
npx degit sqlrooms/examples/minimal my-minimal-app/
cd my-minimal-app
npm install
npm run devSet up a simple room that loads and queries a single data table:
import {
createRoomShellSlice,
createRoomStore,
RoomShellSliceState,
RoomShell,
} from '@sqlrooms/room-shell';
import {useSql} from '@sqlrooms/duckdb';
type RoomState = RoomShellSliceState;
const {roomStore, useRoomStore} = createRoomStore<RoomState>(
(set, get, store) => ({
...createRoomShellSlice({
config: {
dataSources: [
{
type: 'url',
tableName: 'earthquakes',
url: 'https://.../earthquakes.parquet',
},
],
},
})(set, get, store),
}),
);
export const MyRoom = () => (
<RoomShell roomStore={roomStore}>
<MyComponent />
</RoomShell>
);
function MyComponent() {
const isTableReady = useRoomStore((state) =>
Boolean(state.db.findTableByName('earthquakes')),
);
const queryResult = useSql<{maxMagnitude: number}>({
query: `SELECT max(Magnitude) AS maxMagnitude FROM earthquakes`,
enabled: isTableReady,
});
if (!isTableReady) return 'Loading…';
const row = queryResult.data?.toArray()[0];
return `Max earthquake magnitude: ${row?.maxMagnitude}`;
}That's it! You've just built an app with a flexible store and UI that can be extended with various analytics, visualization and AI modules — all powered by client-side DuckDB with no backend required.
For a more comprehensive guide, see Key Concepts and the Getting Started page.
