# building-data-apps

> Claude/Codex skill by [@googlecloudplatform](https://omgskills.com/library/googlecloudplatform/index.md) · 226 stars · Updated 2026-10-23

Build modern data apps, dashboards, and interactive reports using either React + Vite or Streamlit. Includes optional Gemini Data Analytics chat integration for an AI powered "chat with your data" experience. Relevant when any of the following conditions are true: 1. User explicitly requests to build a data dashboard, data application, or visualization UI, and the UI pulls data from a GCP database (defaulting to BigQuery unless otherwise specified). 2. You need to generate a frontend web application to interact with, query, and visualize data from GCP data sources. 3. User wants to build a "chat with your data" experience or integrate the Gemini Data Analytics chat API into a web interface. Do NOT use when any of the following conditions are true: 1. The request is for building backend-only services. 2. The request is for simple CLI scripts or command-line applications. 3. The web application is not data-centric or does not involve visualizing/querying data from GCP sources.

## Install

```sh
git clone https://github.com/GoogleCloudPlatform/data-agent-kit-plugin /tmp/data-agent-kit-plugin && ln -s /tmp/data-agent-kit-plugin/skills/building-data-apps ~/.claude/skills/building-data-apps
```

## From README

Building Data Applications Architect high-quality data dashboards and interactive reports. You MUST select the appropriate framework before implementation. Step 0: Framework Selection You MUST select the framework based on the user's maintenance requirements and data ecosystem. Choice: Streamlit User Profile: Data Scientists / Python users. Logic Complexity: High Python dependency (Pandas, NumPy, local data processing). Deployment: Single-file Python script. Customization: Standard layout (fast boilerplate). Choice: React + Vite User Profile: Web Developers / Full-stack teams. Logic Complexity: High UI and Interactivity requirements (e.g., drag-and-drop, interactive maps). Deployment: Standalone Frontend + Backend API. Customization: Infinite (Custom CSS, specialized JS libraries).

## Links

- HTML page: https://omgskills.com/library/googlecloudplatform/data-agent-kit-plugin/skills/building-data-apps/
- GitHub: https://github.com/GoogleCloudPlatform/data-agent-kit-plugin
- Author: [@googlecloudplatform](https://omgskills.com/library/googlecloudplatform/index.md)

## More from this repo

- [accidental-data-loss-prevention](https://omgskills.com/library/googlecloudplatform/data-agent-kit-plugin/skills/accidental-data-loss-prevention/index.md) — \*\*STOP AND VERIFY\*\*: Before running any command or tool that results in irreversible data loss, you MUST obtain...
   - [@googlecloudplatform](https://omgskills.com/library/googlecloudplatform/index.md) · 226 stars
- [bigquery-ai-ml](https://omgskills.com/library/googlecloudplatform/data-agent-kit-plugin/skills/bigquery-ai-ml/index.md) — Leverages BigQuery's built-in machine learning and GenAI capabilities for advanced data analytics.
   - [@googlecloudplatform](https://omgskills.com/library/googlecloudplatform/index.md) · 226 stars
- [bigquery-bigframes](https://omgskills.com/library/googlecloudplatform/data-agent-kit-plugin/skills/bigquery-bigframes/index.md) — Generates Python code using BigQuery DataFrames (BigFrames).
   - [@googlecloudplatform](https://omgskills.com/library/googlecloudplatform/index.md) · 226 stars