skills.rest
jerrylin96
jerrylin96COMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-data-apps

Build data dashboards and interactive reports with React, Vite, or Streamlit on GCP data sources.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires express, cors, @google-cloud/geminidataanalytics, @google-cloud/bigquery, 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 like BigQuery requires choosing the right framework, applying consistent design standards, and optionally integrating a natural-language chat interface—decisions that are easy to get wrong without guidance. ## 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-mode design system with DM Sans and JetBrains Mono typography across both frameworks. - Gemini Data Analytics Chat Integration: Provides reference implementations for a streaming "chat with your data" interface using Server-Sent Events, with separate thought and final-response rendering, multi-turn history, and follow-up suggestions. - Use Case: A fraud analytics team needs a dashboard over BigQuery transaction tables with KPI cards, a filterable data table, and a Gemini-powered chat panel for natural-language queries—this Skill scaffolds the entire app with production-grade styling. ## Quick Start Build a data dashboard app that visualizes my BigQuery sales dataset with KPI cards, charts, and 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. Connect to BigQuery as the default GCP data source, then follow the framework-specific component patterns for KPI cards, tables, and charts.

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

Use Streamlit if you are a Python data scientist needing heavy Pandas/NumPy 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. Always prefer the framework already present in the project.

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

Use the Gemini Data Analytics chat API with a FastAPI or Express backend that streams responses via Server-Sent Events. The backend must include datasource_references pointing to at least one BigQuery table, and the React frontend must buffer the SSE stream to separate thoughts from final responses.

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; BigLake and Iceberg tables are unsupported.

Does the chat interface support follow-up questions?▼

Yes, multi-turn conversations are supported by maintaining a local conversation history array in the frontend and sending it with each request. The backend formats prior user and model messages into the chat request context.

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 specifically designed for UIs that query and visualize data from GCP sources like BigQuery.

Related Skills

Explore More Data & Analytics Skills→
TeamDay-AITeamDay-AI
2

bigquery

Query and manage Google BigQuery datasets via CLI and REST API.

Official
Intermediate
mattstyles333mattstyles333

PostHog Analytics Skill

Query and analyze PostHog analytics data via its REST API.

Community
Intermediate
4asaanAI4asaanAI

write-tests

Write unit, integration, and end-to-end tests with Vitest, Testing Library, and Playwright.

Community
Intermediate
scumunnascumunna
1

marketing-analytics-warehouse-and-dashboards

Design and implement a BigQuery marketing analytics warehouse with Looker Studio dashboards.

Community
Advanced