Development
Playground — Gemini API
Challenge: Engineers lack a standard pattern to ship model output into real pages safely
Impact: Pilots never reach production >> no ROI story >> budget pressure, feature gap versus competitors
Goal: Demonstrate browser-to-server-to-model flows security and product leads can sign.
Solution: Server routes own credentials and limits; UI covers text, charts, tables, and media patterns.
Tech: Astro server routes, React, Gemini API, Veo (optional), Tailwind.
Potential Applications: Reporting copilots, training assistants, customer self-serve flows, internal ops tools that need structured output—not just paragraphs.
👇 Click buttons below to navigate.
Smoke Test
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API
- Gemini returns text
- We render it below
Text Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API
- Gemini returns text
- We render it below
Image Output
- Click runs a fixed species choice on Astro server
- Astro server calls Gemini API (image)
- Gemini returns image data
- We render it below
Chart Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API
- Gemini returns chart JSON
- We parse and render the chart below
Math Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, and LaTeX strings
- We render with KaTeX below
Table Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns columns and rows
- We render a sortable table below
Video Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns a veoPrompt string; Veo generates the video
- We poll and play the clip below
Animation Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, motionType, and label
- We map motionType to CSS animation below
Diagram Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, nodes, and edges
- We render an SVG diagram below
Timeline Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, and dated events
- We render a vertical timeline below
Map Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, bounds, and marker coordinates
- We render an SVG map below
Code Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, language, and code
- We render the snippet below
Markdown Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title and Markdown body
- We render simplified Markdown below
Quiz Output
- Click runs a fixed prompt on Astro server
- Astro server calls Gemini API (JSON mode)
- Gemini returns title, intro, and multiple-choice questions
- We render the quiz below
Dynamic Text Output
- Send runs your prompt on Astro server (max ~12k characters)
- Astro server calls Gemini API
- Gemini returns text
- We render it below
Ideas
Possible extensions—each described from the user’s steps, not the plumbing.
Single-function extensions
One focused job per idea—upload, paste, or describe; get one kind of result back.
-
Image-to-structured data
You photograph or upload an image—a receipt, a product label, a sketch, or similar. You pick a template (or describe the fields you need). The app fills in a structured JSON object you can copy, export, or send to another system.
-
Video summarization & search
You upload a file or paste a link to a video (up to about 90 minutes). You choose what you want back—a transcript, a short summary, or a list of key moments—and the app uses both what you see and what you hear in the clip to answer.
-
Dynamic data visualizer
You paste CSV rows, earnings text, or a small table. You say what you want to see (trend, comparison, distribution). The app proposes a chart type and generates the plotting code; you run or preview the result and tweak with another sentence.
-
Real-time voice assistants
You start a voice session (mic on). You speak and listen; the assistant keeps latency low for back-and-forth—tutoring, game characters, or quick support—without typing each turn.
-
Generative UI chatbot
You chat in natural language. When the answer needs more than text, the thread renders live UI—maps, lists, cards, or small widgets—inline so you can read, click, and iterate without leaving the conversation.
Potential Applications
Broader workflows that combine research, content, and iteration.
-
Marketing campaign creator
You describe a product or upload a rough sketch. You optionally add tone, audience, or channel. The app returns taglines, message angles, and a simple campaign outline you can refine in follow-up turns.
-
Automated market research agent
You enter an industry, region, or question (e.g. “EV charging in the Midwest”). You set depth or time range. The app pulls current web-grounded notes and delivers a readable report; you can ask for charts or export-friendly tables in the same flow.
-
Long-document intelligence
You upload a large PDF set, paste a repo link, or drop many files at once. You ask in plain language—compare contracts, find contradictions, summarize by section, or trace a theme across thousands of pages—and read answers with pointers back to where they came from.
-
Personalized learning mentor
You attach or select textbook chapters (or syllabus topics). You choose a quiz length or difficulty. The app generates questions, scores your answers, and explains mistakes with references to the material, optionally with simple interactive drills.