skills.rest
Yashyasik
YashyasikCOMMUNITY
Explore all skills by this author →
GitHub

building-data-apps

Build data dashboards and interactive reports with React, Streamlit, and Gemini chat integration.

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

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 like BigQuery 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 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, including KPI cards, data tables, ECharts/Plotly visualizations, and side panels. - Gemini Data Analytics Chat Integration: Provides reference implementations (FastAPI, Express, React) for a streaming "chat with your data" interface using Server-Sent Events, with thought/response segregation, multi-turn history, and follow-up suggestions. - Use Case: A user asks to build a fraud-monitoring dashboard on BigQuery data; the skill scaffolds a React app with KPI cards, a filterable table, ECharts visualizations, and an optional Gemini-powered chat panel for natural-language queries. ## Quick Start Build a data dashboard that visualizes my BigQuery sales dataset and includes a Gemini-powered chat interface for asking questions about the data.

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 on BigQuery data?▼

Choose React + Vite for production web apps with custom interactivity, or Streamlit for Python-based single-script dashboards. The skill provides design system references, component patterns for KPI cards and tables, and ECharts or Plotly visualization setup for each framework.

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 for production-grade apps requiring 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 buffers the SSE stream, separates THOUGHT messages from FINAL_RESPONSE content, and maintains conversation history for multi-turn follow-up questions.

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 with projectId, datasetId, and tableId; BigLake and Iceberg tables are unsupported.

Does the chat interface support dark mode and follow-up questions?▼

Yes, the chat interface must support both dark and light themes using Tailwind dark: variants, and multi-turn conversations by maintaining a local history array. Follow-up suggestions from the API are rendered as clickable prompt buttons.

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→
2nth-ai2nth-ai
1

tech/google/cloud/data

Query BigQuery, publish to Pub/Sub, and run Dataflow pipelines.

Official
Advanced
serenorgserenorg

seren-cloud

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

Official
Advanced
webrix-aiwebrix-ai
1

dashboard-generation

Create analytics dashboards with KPIs, charts, and automated refresh schedules.

Official
Intermediate
JonathanMitchell1234JonathanMitchell1234

looker-expert

Generate LookML views, models, and dashboards for Looker BI.

Community
Advanced