The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Build the dashboard by keeping query credentials and tenant authorization in a Node.js backend, then connect React to that backend using either a prebuilt dashboard embed or custom components. QueryPanel’s React and Node SDK documentation provides one concrete implementation path; it is an example, not a provider comparison.
Choose an embedded dashboard or a custom React interface
| Approach | What you build | Best fit |
|---|---|---|
| Embedded dashboard | Render QuerypanelEmbedded with a dashboard ID, API base URL, and server-minted token. |
Use when a ready-made analytics workspace is acceptable and you want less dashboard UI to construct. |
| Custom React UI | Wrap the interface with QueryPanelProvider and compose components such as QueryInput, QueryResult, VegaChart, and DataTable. |
Use when your product needs its own layout, interaction flow, or explicit loading, empty, and error states. |
The React SDK reference documents both approaches and describes embed customization options such as customer customization, themes, and branding. Review the React SDK documentation to choose the interface path that fits your product.
Keep credentials and tenant authorization in Node.js
The browser must not receive the workspace private key. QueryPanel’s embed documentation says the private key stays on the server while the browser receives a short-lived tenant JWT. Configure the Node SDK with the hosted API URL, private key, and workspace or organization ID using server-side environment configuration, then create the token in an authenticated Node.js route. The React SDK uses a Bearer token for API requests.
Derive the tenant ID from the authenticated user’s server-side context; do not accept a tenant ID supplied only by browser input as proof of access. Pass the authorized tenant context through the token or query flow and configure the database’s tenant field and isolation behavior accordingly. Tenant filtering is a data boundary, not a visual filter. The vendor’s configuration examples are not an independent security audit, so verify that users cannot read another tenant’s data in your own authorization and security tests.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
For the embed flow and token-handling details, see QueryPanel’s React embed documentation.
Connect a supported database and sync its schema
The documented Node package is @querypanel/node-sdk, with Node.js 18+ listed among its supported runtimes. Its reference demonstrates PostgreSQL and ClickHouse adapter patterns. Set up the adapter with the database connection and the tenant-isolation configuration required by your data model.
Sync schema metadata when connecting or setting up the database, and repeat the sync after relevant table or column changes. Schema sync introspects table and column information; it belongs in setup or deployment work, not on every user request. Consult the Node SDK reference for the current adapter and configuration examples.
Ask a question and render the result
In the custom UI flow, call the SDK’s ask() method with the natural-language question, authenticated tenant ID, and database name. The documented response can include generated SQL, parameters, result rows, and a Vega-Lite chart specification. Treat returned query information and data according to your application’s authorization and display requirements; render a chart or table using the React SDK components rather than assuming every answer has the same shape.
For a prebuilt workspace, render the embed with its dashboard ID, API base URL, and short-lived token instead of building the query-and-results layout yourself. The React SDK docs describe the provider and component flow for custom interfaces as well as the embed path.
Save and reload dashboard charts
For persistent dashboard tiles, save charts and pin the ones that should appear as active charts. The Node SDK reference documents loading active charts with tenant context and using withData: true to load chart data. Use listAllActiveCharts() when the application should retrieve all pinned charts without paging; otherwise, use the applicable paged retrieval flow.
Make loading and failures visible
Represent request states explicitly so a failed query cannot be mistaken for a successful query with no matching rows. In a custom UI, use the provider’s loading, empty, and error states. For the embed, handle callbacks such as onLoad and onError. The Node SDK surfaces HTTP failures as errors with a status and optional details; map those errors to a useful user-facing message while retaining appropriate server-side diagnostics.
Implementation checklist
- Choose
QuerypanelEmbeddedfor a ready-made workspace, or the provider and components for a custom dashboard layout. - Configure the Node SDK on the server with the hosted API URL, private key, and workspace or organization ID.
- Authenticate the user, resolve the tenant ID on the server, and mint a short-lived tenant JWT for the browser where the embed or API flow requires it.
- Connect the database, configure tenant isolation, and sync schema metadata during setup and after schema changes.
- Call
ask()with the question, tenant, and database context; render the returned rows or chart specification in React. - Save and pin charts that should persist, then load active charts with the correct tenant context.
- Exercise cross-tenant authorization boundaries and test loading, empty, and error behavior before release.
The documentation describes an implementation using QueryPanel; it does not establish comparative provider quality, pricing, plan limits, or service availability. Check current provider terms and availability before selecting a hosted service.
Recommended Free Tools
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
