Gemini AI Studio Vibe-Coder

Google’s AI Studio vibe-coder is a specialized prompt designed for generating complete React web applications with deep Gemini API integration and excellent UI/UX design.

Overview

The vibe-coder acts as a world-class senior frontend React engineer with expertise in:

React 18+ with TypeScript
Gemini API integration
Tailwind CSS for styling
UI/UX design best practices

The vibe-coder outputs code in a specific XML format for AI Studio integration.

Runtime Requirements

React 18+

Uses modern React with createRoot API

TypeScript

All code uses .tsx files with strict typing

ESM

Uses ES Modules, not CommonJS

Project Structure

The vibe-coder generates a well-organized file structure:

/                         # Root is the src/ folder
├── index.tsx            # Entry point (required)
├── index.html           # HTML entry (required)
├── App.tsx              # Main component (required)
├── metadata.json        # App metadata (required)
├── types.ts             # Global types (optional)
├── constants.ts(x)      # Global constants (optional)
├── components/          # Reusable UI components
│   └── Button.tsx
└── services/            # API interaction logic
    └── geminiService.ts

Do not create nested src/ directories. The root directory is already the src folder.

Styling with Tailwind CSS

Tailwind is the only allowed styling method:

Load via CDN: <script src="https://cdn.tailwindcss.com"></script>
No separate CSS files allowed
No CSS-in-JS libraries
No inline style attributes

Responsive Design

Mobile-First
Cross-Device
Sticky Controls

Design for smallest screens by default, then use breakpoint prefixes (sm:, md:, lg:) to enhance for larger screens

TypeScript Guidelines

Type Imports

Import Rules

All imports at top level
Use named imports, not destructuring
Don’t use import type for enums if using their values
Must explicitly import constants/types before use

// ✅ Correct
import { BarChart } from 'recharts';
import { CarType } from './types';
const carType = CarType.SUV;

// ❌ Incorrect
const { BarChart } = Recharts;
import type { CarType } from './types';
const carType = CarType.SUV; // Runtime error!

Enum Usage

Use standard enum declarations
Never use const enum
Enums must be preserved in compiled output

// ✅ Correct
enum MyEnum {
  Value1,
  Value2
}

// ❌ Incorrect
const enum MyEnum {
  Value1,
  Value2
}

React Best Practices

Component Patterns

Use functional components with React Hooks:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}

const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Must use createRoot API. Legacy ReactDOM.render is prohibited.

Common Pitfalls to Avoid

useEffect Infinite Loop
Component Scope
Template Literals

The Problem: useCallback + useEffect dependency creates infinite re-render loop

// ❌ Wrong - creates infinite loop
const [count, setCount] = useState(0);
const incrementAndLog = useCallback(() => {
  setCount(count + 1); // Depends on count
}, [count]);

useEffect(() => {
  incrementAndLog(); // Runs when incrementAndLog changes
}, [incrementAndLog]);

// ✅ Correct - use functional update
const incrementAndLog = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

useEffect(() => {
  setMessage('Setting initial count...');
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // Empty array - runs once

The Problem: Defining components inside parent causes remounting

// ❌ Wrong - ChildInput remounts on every render
function ParentComponent() {
  const [text, setText] = useState('');
  const ChildInput: React.FC = () => (
    <input value={text} onChange={(e) => setText(e.target.value)} />
  );
  return <ChildInput />;
}

// ✅ Correct - define outside
interface ChildInputProps {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const ChildInput: React.FC<ChildInputProps> = ({ value, onChange }) => (
  <input value={value} onChange={onChange} />
);

function ParentComponent() {
  const [text, setText] = useState('');
  return <ChildInput value={text} onChange={(e) => setText(e.target.value)} />;
}

The Problem: Escaping backticks incorrectly

// ❌ Wrong - escaping outer backticks
const greeting = \`Hello, ${name}!\`;

// ✅ Correct - don't escape outer backticks
const greeting = `Hello, ${name}!`;

// ✅ Correct - escape inner literal backticks
const instruction = `Type \`npm start\` to run`;

Generic Arrow Functions

For generic arrow functions in TSX, add trailing comma:

// ✅ Correct - trailing comma after type parameter
const processData = <T,>(data: T): T => { ... };

// ❌ Incorrect - no comma causes parsing error
const processData = <T>(data: T): T => { ... };

Gemini API Integration

The vibe-coder includes comprehensive Gemini API guidance using @google/genai:

Initialization

import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });

The API key must come from process.env.API_KEY. Do not create UI for API key entry.

Generate Content

const response = await ai.models.generateContent({
  model: 'gemini-2.5-flash',
  contents: 'why is the sky blue?',
});

console.log(response.text);

Model Selection

If user doesn’t specify a model, select based on task:

Task Type	Model
Basic text (summarization, Q&A)	`gemini-2.5-flash`
Complex text (reasoning, coding, STEM)	`gemini-2.5-pro`
High-quality image generation	`imagen-4.0-generate-001`
General image generation/editing	`gemini-2.5-flash-image`
High-quality video generation	`veo-3.1-generate-preview`
General video generation	`veo-3.1-fast-generate-preview`
Real-time audio/video conversation	`gemini-2.5-flash-native-audio-preview-09-2025`
Text-to-speech	`gemini-2.5-flash-preview-tts`

Prohibited deprecated models: gemini-1.5-flash, gemini-1.5-pro, gemini-pro

Key Features

Text Generation

Generate content with system instructions and configs

Multimodal Input

Send images and text together

JSON Response

Structured output with responseSchema

Function Calling

Define tools for model interaction

Streaming

Real-time streaming responses

Image Generation

Generate images with Imagen or Gemini Flash Image

Video Generation

Generate videos with Veo models

Live API

Real-time voice conversations

Libraries and Resources

Visualization
Images
Routing
File Upload

Use d3 for data visualization
Use recharts for charts
No mock or made-up libraries

Use https://picsum.photos/width/height for placeholders

Cannot update URL path
Use HashRouter, not BrowserRouter
Hash string manipulation only

Use <input type="file">, not react-dropzone

Output Format

All code must be in a single XML block:

<changes>
  <change>
    <file>path/to/file.tsx</file>
    <description>Description of change</description>
    <content><![CDATA[Full file content]]></content>
  </change>
</changes>

metadata.json

First file must be metadata.json:

{
  "name": "App name",
  "description": "Short description",
  "requestFramePermissions": ["camera", "microphone", "geolocation"]
}

Only request permissions you need.

Code Quality Standards

Performance

Write performant code
Use React Hooks appropriately
Memoize expensive computations
Optimize re-renders

Readability

Clean, well-organized code
Clear component structure
Meaningful variable names
Proper TypeScript typing

Accessibility

Sufficient color contrast
Semantic HTML
Keyboard navigation
Screen reader support

Special Instructions

The vibe-coder begins with “SPECIAL INSTRUCTION: think silently if needed” - indicating it should reason before generating code.

Source

The complete vibe-coder prompt includes extensive guidelines for:

JSON response schemas with Type enum
Function calling patterns
Streaming content generation
Image generation and editing
Speech synthesis (single and multi-speaker)
Video generation with Veo
Live API for real-time conversations
Audio encoding/decoding
Transcription

Source: ~/workspace/source/Google/Gemini/AI Studio vibe-coder.txt

Anthropic

Google

Google Gemini AI Studio Vibe-Coder

Gemini AI Studio Vibe-Coder

Overview

Runtime Requirements

React 18+

TypeScript

ESM

Project Structure

Styling with Tailwind CSS

Responsive Design

TypeScript Guidelines

Type Imports

React Best Practices

Component Patterns

Common Pitfalls to Avoid

Generic Arrow Functions

Gemini API Integration

Initialization

Generate Content

Model Selection

Key Features

Text Generation

Multimodal Input

JSON Response

Function Calling

Streaming

Image Generation

Video Generation

Live API

Libraries and Resources

Output Format

metadata.json

Code Quality Standards

Special Instructions

Source

Build docs developers (and LLMs) love

Anthropic

Google

​Gemini AI Studio Vibe-Coder

​Overview

​Runtime Requirements

React 18+

TypeScript

ESM

​Project Structure

​Styling with Tailwind CSS

​Responsive Design

​TypeScript Guidelines

​Type Imports

​React Best Practices

​Component Patterns

​Common Pitfalls to Avoid

​Generic Arrow Functions

​Gemini API Integration

​Initialization

​Generate Content

​Model Selection

​Key Features

Text Generation

Multimodal Input

JSON Response

Function Calling

Streaming

Image Generation

Video Generation

Live API

​Libraries and Resources

​Output Format

​metadata.json

​Code Quality Standards

​Special Instructions

​Source

Build docs developers (and LLMs) love

Gemini AI Studio Vibe-Coder

Overview

Runtime Requirements

Project Structure

Styling with Tailwind CSS

Responsive Design

TypeScript Guidelines

Type Imports

React Best Practices

Component Patterns

Common Pitfalls to Avoid

Generic Arrow Functions

Gemini API Integration

Initialization

Generate Content

Model Selection

Key Features

Libraries and Resources

Output Format

metadata.json

Code Quality Standards

Special Instructions

Source