An interactive Next.js app showcasing 19 Gemini API features with live, runnable demos. Bring your own API key — no backend auth required.
Built for developers who want to understand what the Gemini API can do, with real working code they can inspect and copy.
| Feature | What it demonstrates |
|---|---|
| Chat | Streaming multi-turn conversation with generateContentStream |
| Thinking | Extended thinking / reasoning with thinkingConfig |
| Stateful Chat | Server-side session persistence via ai.interactions.create |
| Feature | What it demonstrates |
|---|---|
| Vision | Image understanding — describe or ask questions about uploaded images |
| Document | PDF analysis via the Files API with inline page references |
| Audio | Audio transcription and Q&A with uploaded audio files |
| URL Context | Ground responses in live web pages using the urlContext tool |
| Feature | What it demonstrates |
|---|---|
| Code Execution | Run Python in a sandboxed interpreter; returns stdout + result |
| Structured Output | JSON schema enforcement with responseSchema |
| Function Calling | Multi-turn tool use (calculator, weather stub, unit converter) |
| Token Count | Count tokens in a prompt before sending it |
| Feature | What it demonstrates |
|---|---|
| Google Search | Real-time grounding with Google Search via googleSearch tool |
| Deep Research | Multi-step research agent using googleSearch + extended thinking |
| Embeddings | Semantic vector embeddings + cosine similarity for text comparison |
| File Search | Managed RAG — upload a doc, query it with fileSearch tool |
| Feature | What it demonstrates |
|---|---|
| Image Generation | Text-to-image with gemini-2.0-flash-preview-image-generation |
| Context Caching | Cache large system prompts to reduce cost + latency |
| Batch | Asynchronous batch inference with ai.batches.create |
| Computer Use | (Under Construction) Vision-based browser automation with the computerUse tool — requires gemini-2.5-computer-use-preview access |
- Node.js 18+
- A Google Gemini API key
git clone https://github.com/robcost/gemini-features-app.git
cd gemini-features-app
npm install
npm run devOpen http://localhost:3000 and paste your API key into the header. All API calls go through server-side Next.js route handlers — your key is never stored.
app/
├── page.tsx # Main feature grid
└── api/
├── chat/route.ts # Streaming SSE responses
├── thinking/route.ts
├── stateful-chat/route.ts
├── vision/route.ts
├── document/route.ts
├── audio/route.ts
├── url-context/route.ts
├── code-execution/route.ts
├── structured/route.ts
├── function-calling/route.ts
├── token-count/route.ts
├── search/route.ts
├── deep-research/route.ts
├── embeddings/route.ts
├── file-search/route.ts
├── image-gen/route.ts
├── caching/route.ts
├── batch/route.ts
└── computer-use/route.ts
components/
├── features/ # One component per feature
├── api-key-provider.tsx # Context for API key (session only)
├── feature-card.tsx # Shared card wrapper
└── markdown.tsx # Markdown renderer for responses
Each feature is self-contained: one API route + one React component. No global state, no shared service layer — easy to copy individual features into your own project.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 + ShadCN/UI |
| AI SDK | @google/genai v1.43+ |
| React | React 19 |
| Model | Features |
|---|---|
gemini-2.5-flash-preview-05-20 |
Chat, Thinking, Vision, Document, Audio, URL Context, Search, Structured, Function Calling, Token Count |
gemini-2.5-flash-preview-05-20 (Deep Research config) |
Deep Research |
gemini-3-flash-preview |
Stateful Chat, File Search |
gemini-2.0-flash-preview-image-generation |
Image Generation |
text-embedding-004 |
Embeddings |
gemini-2.5-computer-use-preview-10-2025 |
Computer Use (requires special access) |
This project is intentionally kept simple:
- No auth layer — API key is passed per-request in the
x-api-keyheader. For production apps, use server-side environment variables. - No persistent storage — all state is in-memory React state. Files uploaded via the Files API are temporary (48h expiry, except File Search stores).
- No test suite — this is a learning reference, not a production codebase.
- No abstraction layers — each route handler directly calls the SDK. The goal is clarity, not reusability.
The computerUse feature requires access to gemini-2.5-computer-use-preview-10-2025. If you have access, remove the disabled props from the buttons in components/features/computer-use.tsx.
MIT — see LICENSE