reflex-dev · tgberkeley · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/blog/build-dashboard-google-auth.md b/blog/build-dashboard-google-auth.md
diff --git a/blog/build-dashboard-intercom.md b/blog/build-dashboard-intercom.md
diff --git a/blog/build-dashboard-mongodb.md b/blog/build-dashboard-mongodb.md
diff --git a/blog/build-dashboard-openai.md b/blog/build-dashboard-openai.md
diff --git a/blog/build-dashboard-resend-python.md b/blog/build-dashboard-resend-python.md
diff --git a/blog/build-dashboard-salesforce.md b/blog/build-dashboard-salesforce.md
diff --git a/blog/build-dashboard-servicenow.md b/blog/build-dashboard-servicenow.md
diff --git a/blog/build-dashboard-twilio-python.md b/blog/build-dashboard-twilio-python.md
diff --git a/blog/build-dashboard-with-anthropic.md b/blog/build-dashboard-with-anthropic.md
diff --git a/blog/build-dashboard-with-auth0.md b/blog/build-dashboard-with-auth0.md
diff --git a/blog/build-dashboard-with-database.md b/blog/build-dashboard-with-database.md
diff --git a/blog/build-dashboard-with-gemini.md b/blog/build-dashboard-with-gemini.md
@@ -0,0 +1,142 @@
+---
+author: Tom Gotsman
+date: 2026-04-06
+title: "How to Build a Dashboard With Gemini in 2026"
+title_tag: "Build Gemini Dashboard April 2026"
+description: "Learn how to build production-ready dashboards with Gemini 3.1 Pro using Python. Complete guide with streaming APIs and deployment tips for April 2026."
+show_in_cards: false
+tag: Builder
+meta: [
+  {
+    "name": "keywords",
+    "content": "Gemini dashboard Python, Google Gemini dashboard, Gemini API metrics, AI dashboard Python, Gemini analytics"
+  }
+]
+faq: [
+    {"question": "Can I build a Gemini dashboard without JavaScript?", "answer": "Yes. Reflex lets you build full Gemini dashboards in pure Python, from API integration to streaming UI updates. You handle Gemini 3.1 Pro requests, state management, and real-time response rendering through Python classes your team already knows how to debug."},
+    {"question": "Gemini 3.1 Pro vs Gemini 3 Flash for dashboards?", "answer": "Gemini 3.1 Pro handles deep reasoning tasks like financial modeling or multi-source aggregation where accuracy matters more than speed. Gemini 3 Flash is better for high-frequency dashboard queries where low latency and cost matter most—think real-time KPI updates or rapid iteration on layout generation."},
+    {"question": "How do I stream Gemini responses to my dashboard in real time?", "answer": "Use Gemini's `streamGenerateContent` with Reflex's WebSocket-based state sync. Each response chunk from Gemini gets pushed to the UI as it's generated, without custom polling infrastructure. The pattern works the same whether you're streaming text, processing function calls, or handling multimodal inputs."},
+    {"question": "What's the fastest way to deploy a Gemini dashboard to production in 2026?", "answer": "Run `reflex deploy` to package your entire Gemini dashboard into a single artifact with no separate frontend and backend pipelines. For teams that need self-hosted infrastructure due to data sovereignty requirements, Reflex provides Helm charts for Kubernetes orchestration."},
+    {"question": "How does Reflex handle concurrent Gemini API requests better than Streamlit?", "answer": "Reflex uses an async server architecture that handles multiple simultaneous Gemini 3.1 Pro requests without performance degradation, while Streamlit struggles under concurrent load due to full script re-execution on every interaction. This makes Reflex more suitable for production dashboards with multiple users."},
+    {"question": "Can Gemini dashboards process image inputs along with text?", "answer": "Yes. Gemini supports multimodal inputs that combine text prompts with uploaded images or documents, enabling use cases like document review, medical imaging interfaces, or satellite monitoring within your dashboard."},
+    {"question": "What's the advantage of project-level API credential configuration in Reflex?", "answer": "Instead of adding Gemini API credentials to each dashboard app separately, you define them once at the project level and every app inherits them automatically. This simplifies credential management, reduces duplication, and makes API key rotation much easier across multiple dashboards."},
+    {"question": "How much does it cost to run Gemini 3.1 Pro in a production dashboard?", "answer": "Gemini 3.1 Pro costs $2-$4 per 1M input tokens and $12-$18 per 1M output tokens as of early 2026. For cost-sensitive applications with high query volumes, Gemini 3 Flash offers a more economical alternative while maintaining good performance."},
+    {"question": "What is Gemini's function calling capability and why does it matter for dashboards?", "answer": "Function calling lets Gemini query databases or external APIs and return structured results that your Reflex state can act on directly. This enables real-time data retrieval workflows where the dashboard can dynamically pull information based on user queries."},
+    {"question": "Can I self-host a Gemini dashboard if I can't use cloud APIs?", "answer": "Yes. Reflex provides self-hosted infrastructure options with Helm charts for Kubernetes orchestration when data sovereignty requirements rule out cloud API calls. You maintain full control over where your dashboard and data reside."},
+    {"question": "What's the difference between Flex Inference and Priority Inference for Gemini dashboards?", "answer": "Flex Inference uses dynamic resource allocation to reduce costs for non-urgent workloads, while Priority Inference ensures faster response times when latency matters. Choose based on whether your dashboard prioritizes cost optimization or real-time responsiveness."},
+    {"question": "How does Reflex push real-time updates without polling?", "answer": "Reflex uses WebSocket-based state synchronization to push updated state to every connected client instantly when new Gemini responses arrive. This eliminates the need for custom polling infrastructure and keeps dashboards responsive during streaming operations."},
+    {"question": "What components does Reflex provide for displaying Gemini-generated data?", "answer": "Reflex offers 60+ built-in components including streaming text displays, data tables (including AG Grid wrappers), Plotly and Recharts visualizations, stat cards, and chat interfaces. These cover the most common dashboard patterns for Gemini data without requiring custom UI code."},
+    {"question": "How do I track and manage Gemini API costs in production?", "answer": "Reflex Cloud provides a Token Economics Dashboard that lets you track token consumption and catch cost spikes before they compound. Store API keys as environment variables and monitor usage patterns to optimize which model (Pro vs Flash) you use for different query types."}
+]
+---
+
+```python exec
+import reflex as rx
+from pcweb.components.image_zoom import image_zoom
+```
+
+**TLDR:**
+
+- Gemini 3.1 Pro builds agentic dashboards that query databases and stream visualizations in real time
+
+- Reflex handles Gemini's streaming API through Python state classes without JavaScript bottlenecks
+
+- Deploy production-ready Gemini dashboards with `reflex deploy` and project-level API credential sharing
+
+- Reflex is a Python framework that lets you build full-stack web apps without learning JavaScript
+
+## What You Can Build: Gemini Dashboard Overview
+
+Building a dashboard with Gemini goes well beyond dropping a chart on a page. With Gemini 3.1 Pro, you get a frontier reasoning model capable of synthesizing complex, multi-source data into live interfaces. Google's own testing showed the model [building a live aerospace dashboard](https://deepmind.google/models/gemini/pro/) by configuring a public telemetry stream to visualize the International Space Station's orbit, generating animated SVGs and interactive components entirely through code output.
+
+That gives you a sense of the range. On the simpler end, teams wire Gemini to query results and surface KPIs in a clean layout. On the more capable end, you get agentic workflows: a user types a question, Gemini queries a database, generates a visualization, and streams the result back without a page refresh.
+
+Here are a few categories of dashboards that Gemini handles well:
+
+- Multimodal analysis tools that accept both text and image inputs, opening up use cases like document review, medical imaging interfaces, or satellite monitoring.
+
+- Real-time KPI dashboards where Gemini 3 Flash handles high-frequency data calls at low latency.
+
+- Complex reasoning interfaces where Gemini 3.1 Pro takes over for tasks where accuracy outweighs speed, such as [financial modeling or multi-source aggregation](https://reflex.dev/blog/top-10-data-visualization-libraries/).
+
+The model you reach for depends on what your dashboard needs to do. Fast, frequent queries go to Gemini 3 Flash. Deep, multi-step reasoning tasks belong to Gemini 3.1 Pro.
+
+## Why Python Developers Choose Reflex for Gemini Dashboards
+
+Python data teams building Gemini dashboards face a real decision: keep everything in Python, or introduce a JavaScript frontend that splits your logic across two languages and two skill sets. For most teams, that split creates a bottleneck where domain experts can't touch the frontend code they need to modify most.
+
+Reflex keeps the entire stack in Python. State management, Gemini API calls, and UI updates all live in the same Python classes your team already reads and debugs. Gemini's `streamGenerateContent` streams response chunks as they're generated, and Reflex's WebSocket-based state sync pushes those chunks to the UI in real time without custom polling infrastructure. [Gemini's Live API](https://ai.google.dev/gemini-api/docs/live-api) extends this further, allowing low-latency, continuous audio and vision streams that Reflex handles through the same event-driven model.
+
+Where frameworks like Streamlit struggle under concurrent load due to full script re-execution on every interaction, Reflex's async server architecture handles multiple simultaneous Gemini 3.1 Pro requests without degrading. You get 60 built-in components covering charts, tables, and inputs, plus the ability to [wrap any React library](https://reflex.dev/blog/custom-components/) when you need something more specific.
+
+> 
+
+"It's like Streamlit for adults. It's fast, it looks good, and we don't need to throw it away after prototyping." - Delta Global Head of Quant
+
+That's the core tradeoff covered in our [Reflex vs Streamlit](https://reflex.dev/blog/reflex-streamlit/) comparison: prototype speed with production staying power.
+
+## Connecting Gemini to Your Reflex App
+
+Getting Gemini connected is straightforward because Reflex treats it like any other Python dependency. There's no separate API layer to configure, no proxy service to stand up. The `google-genai` package installs via pip and slots directly into your Reflex state classes, where event handlers call the API, process responses, and update state all in one place.
+
+Gemini 3.1 Pro is Google's most capable reasoning model, [priced at $2-$18 per 1M tokens](https://www.metacto.com/blogs/the-true-cost-of-google-gemini-a-guide-to-api-pricing-and-integration) as of early 2026. For high-frequency dashboard queries where cost and latency matter more than reasoning depth, Gemini 3 Flash is the practical choice.
+
+One feature worth knowing about is Reflex's project-level integration configuration. Instead of adding your Gemini API credentials to each dashboard app separately, you define them once at the project level and every app within that project inherits them. That matters when you're managing multiple dashboards against Google AI Studio or Vertex AI, since it cuts down on credential duplication and simplifies rotation.
+
+From there, the patterns you'd reach for most often are:
+
+- Streaming responses using `streamGenerateContent`, where Reflex's WebSocket sync pushes each chunk to the UI as Gemini generates it, keeping the dashboard feeling responsive even during longer queries.
+
+- Function calling for real-time data retrieval, letting Gemini query a database or external API and return structured results your state can act on directly.
+
+- Multimodal inputs that combine text prompts with uploaded images or documents, opening up richer analysis workflows beyond what text-only queries can handle.
+
+## Key Dashboard Components for Gemini Data
+
+Most Gemini dashboards surface four recurring patterns: streaming text, structured data tables, charts, and stat cards. Reflex's component library maps directly to each one, so you're composing known primitives instead of wiring custom UI from scratch.
+
+Gemini 3 Flash is particularly well-suited here. Its tool calling and structured output support lets it [assemble dashboards via rapid iteration](https://www.datacamp.com/tutorial/building-with-gemini-3-1-pro-coding-agent-tutorial), functioning almost like a UI studio that generates layout specs your Reflex state can act on immediately.
+
+| Component Type | Reflex Implementation | Gemini Use Case |
+|---|---|---|
+| Streaming Text | rx.text with yield updates | Display token-by-token LLM responses |
+| Data Tables | rx.data_table, AG Grid wrapper | Show structured function call results |
+| Charts | Plotly/Recharts components | Visualize Gemini-generated analytics |
+| Stat Cards | rx.stat, rx.card | Surface extracted metrics from queries |
+| Chat Interface | rx.text_area with message history | Conversational dashboard queries |
+
+The glue holding these together is Reflex's state layer. Computed vars process raw Gemini API responses into calculated metrics, filtered lists, or aggregated totals before they ever reach the UI. When a new Gemini response arrives, WebSocket synchronization pushes updated state to every connected client instantly, no polling required.
+
+## Deploying Your Gemini Dashboard to Production
+
+Once your dashboard is ready, getting it live is straightforward. Run ``[reflex deploy](https://reflex.dev/hosting/) and Reflex packages your entire Gemini dashboard, streaming infrastructure included, into a single artifact with no separate frontend and backend pipelines to manage. You can follow the deploy quick start or go with [self-hosted infrastructure](https://reflex.dev/blog/self-hosting-reflex-with-docker/) when data sovereignty rules out cloud API calls, with Helm charts handling Kubernetes orchestration either way.
+
+A few production considerations worth locking in early:
+
+- Store Gemini API keys as environment variables, not in code, to avoid accidental exposure in version control.
+
+- Use [Flex Inference for non-urgent workloads](https://www.aibucket.io/post/gemini-api-updates-boost-google-ai-efficiency) to cut costs through flexible resource allocation, and switch to Priority Inference when response latency matters.
+
+- Wire GitHub Actions or GitLab CI to trigger deploys on commit so releases stay repeatable and auditable.
+
+- Track token consumption through Reflex Cloud's Token Economics Dashboard to catch cost spikes before they compound.
+
+Vertex AI credentials, database connections, and [auth providers](https://reflex.dev/blog/implementing-sign-in-with-google/) are all configurable once at the project level, so every dashboard you ship inherits them automatically.
+
+## FAQ
+
+### Can I build a Gemini dashboard without JavaScript?
+
+Yes. Reflex lets you build full Gemini dashboards in pure Python, from API integration to streaming UI updates. You handle Gemini 3.1 Pro requests, state management, and real-time response display through Python classes your team already knows how to debug.
+
+### Gemini 3.1 Pro vs Gemini 3 Flash for dashboards?
+
+Gemini 3.1 Pro handles deep reasoning tasks like financial modeling or multi-source aggregation where accuracy matters more than speed. Gemini 3 Flash is better for high-frequency dashboard queries where low latency and cost matter most-think real-time KPI updates or rapid iteration on layout generation.
+
+### How do I stream Gemini responses to my dashboard in real time?
+
+Use Gemini's `streamGenerateContent` with Reflex's WebSocket-based state sync. Each response chunk from Gemini gets pushed to the UI as it's generated, without custom polling infrastructure. The pattern works the same whether you're streaming text, processing function calls, or handling multimodal inputs.
+
+### What's the fastest way to deploy a Gemini dashboard to production in 2026?
+
+Run `reflex deploy` to package your entire Gemini dashboard into a single artifact with no separate frontend and backend pipelines. For teams that need self-hosted infrastructure due to data sovereignty requirements, Reflex provides Helm charts for Kubernetes orchestration.