skills.rest
Lathika-laa
Lathika-laaCOMMUNITY
Explore all skills by this author →
GitHub

building-data-apps

Build data dashboards and interactive reports with React, Vite, or Streamlit connected to BigQuery.

Updated Aug 26, 2026
Search Tags:#data visualization#react#dashboard#gemini#streamlit#bigquery#chat interface
One-click install
npx skills add https://github.com/Lathika-laa/Recipe_Box --skill building-data-apps-lathika-laa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-data-apps
Source: https://github.com/Lathika-laa/Recipe_Box/tree/main/.github/.gemini/skills/building-data-apps
Command: npx skills add https://github.com/Lathika-laa/Recipe_Box --skill building-data-apps-lathika-laa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires express, cors, @google-cloud/geminidataanalytics, dotenv, fastapi, pydantic, and includes references (resource) components.

What problem does it solve? Building data-centric web applications that query and visualize GCP data sources requires choosing the right framework, applying consistent design standards, and optionally integrating a natural-language chat interface, all of which involve many decisions and boilerplate work. ## Core Features & Use Cases - Framework Selection Guidance: Chooses between React + Vite (for web developers needing custom interactivity) and Streamlit (for Python data scientists needing single-script deployment) based on the user's existing stack and requirements. - Unified Design System: Enforces a zinc-palette, card-based, dark/light theme design system with DM Sans and JetBrains Mono typography across both frameworks, including KPI cards, data tables, and ECharts or Plotly visualizations. - Gemini Data Analytics Chat Integration: Provides reference implementations for a streaming "chat with your data" interface using Server-Sent Events, with FastAPI or Express backends and a React chat panel supporting multi-turn conversations, thoughts, and suggestions. - Use Case: A user asks for a fraud-monitoring dashboard backed by BigQuery; the Skill scaffolds a React + Vite app with KPI cards, a filterable data table, and an optional Gemini-powered chat panel for natural language queries. ## Quick Start Ask the assistant to build a data dashboard that queries a BigQuery table and visualizes the results, optionally with a Gemini-powered chat interface.

Frequently Asked Questions about building-data-apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a data dashboard connected to BigQuery?▼

Choose React + Vite for production web apps with custom interactivity, or Streamlit for Python-based single-script dashboards. The dashboard queries BigQuery through a backend API and renders KPI cards, tables, and charts following a shared design system.

Should I use Streamlit or React for a data dashboard?▼

Use Streamlit if you are a Python data scientist needing heavy Pandas processing and single-file deployment. Use React + Vite if you need complex client-side state, custom branding, drag-and-drop, or integration into a larger web ecosystem.

How do I add a chat with your data feature to a web app?▼

Use the Gemini Data Analytics chat API with a streaming backend in FastAPI or Express that emits Server-Sent Events. The React frontend parses the stream, separating thoughts from final responses and rendering markdown with react-markdown.

Why does the Gemini Data Analytics API return 400 REFERENCES_NOT_SET?▼

This error occurs when datasource_references is missing from inline_context in the chat request. The API requires at least one BigQuery table reference, and BigLake or Iceberg tables are not supported.

When should I not use this dashboard-building approach?▼

Do not use it for backend-only services, simple CLI scripts, or web applications that are not data-centric. It is designed specifically for apps that query and visualize data from GCP sources like BigQuery.

Related Skills

Explore More Data & Analytics Skills→
lightning-rod-labslightning-rod-labs
57

bigquery-seeds

Creates BigQuery-backed seed datasets from publicly queryable tables for forecasting and training.

Official
Intermediate
serenorgserenorg

seren-cloud

Publish and manage hosted skills in Seren Cloud via REST endpoints.

Official
Advanced
supercent-iosupercent-io

looker-studio-bigquery

Connect BigQuery data sources to Looker Studio dashboards.

Official
Intermediate
delta-and-betadelta-and-beta

analyst-business-intelligence

Configure BI dashboards and reporting pipelines using Braze data exports.

Community
Intermediate