AI Research Platform with Search Grounding & TTS

Full-stack application integrating Gemini API, Google Search Grounding, and multi-speaker text-to-speech generation

Gemini APIReact 19TypeScriptViteTTSSearch Grounding

Overview

Built a production AI research platform that generates comprehensive, citation-backed content with audio output. The system uses Google's Gemini API with Search Grounding for factual accuracy and multi-speaker TTS for natural audio generation.

The Problem

Research workflows often require synthesizing information from multiple sources, verifying accuracy, and producing output in various formats. Manual research is time-consuming and prone to missing important sources. Existing AI tools either hallucinate facts or lack proper citation.

Architecture Decisions

Why Gemini over Claude for this project?

Google Search Grounding provides real-time web access with automatic citation. Native TTS integration means single API for text and audio. Cost-effective for high-volume content generation.

Why React 19 with Vite instead of Next.js?

Client-side only application (no SSR needed). Faster development iteration with Vite's HMR. Simpler deployment as static site.

Key Features

Search Grounding: Every claim backed by real-time web sources with clickable citations
Multi-Speaker TTS: Natural dialogue-style audio with two distinct voices
Content Templates: Pre-built formats for research reports, explanations, and discussions
Export Options: Markdown, PDF, and audio file outputs

Challenges & Solutions

Challenge	Solution
Citation accuracy	Implemented source verification layer that cross-references grounding metadata
TTS natural flow	Developed paragraph-level voice switching with prosody markers
Rate limiting	Built request queue with exponential backoff

Results

✓Generates 5,000+ word researched articles in under 60 seconds
✓100% citation rate on factual claims
✓Audio output with natural conversation flow

Code Sample - Search Grounding Integration

typescript

async function generateResearchContent(topic: string) {
  const prompt = `Research and explain: ${topic}

  Requirements:
  - Use Google Search to verify all facts
  - Include inline citations for every claim
  - Structure with clear headings
  - Minimum 2000 words`;

  const result = await model.generateContent({
    contents: [{ role: "user", parts: [{ text: prompt }] }],
    generationConfig: {
      temperature: 0.7,
      maxOutputTokens: 8192,
    }
  });

  // Extract grounding metadata for citations
  const groundingMetadata = result.response.candidates[0].groundingMetadata;
  const citations = groundingMetadata?.groundingChunks?.map(chunk => ({
    title: chunk.web.title,
    uri: chunk.web.uri
  }));

  return {
    content: result.response.text(),
    citations
  };
}

What I'd Do Differently

→Add caching layer for repeated queries
→Implement streaming for faster perceived performance
→Build citation management system for organizing sources