Integrate Google Gemini AI with streaming support and production-ready security

[Copilot]

Adds Google Gemini AI integration to enable intelligent chat, content analysis, and recommendations across the platform. Repository initialized from scratch with Next.js 14 App Router.

Architecture

API Layer (/app/api/gemini/route.ts)

• Server-side only Gemini client instantiation (API keys never exposed to client)
• Dual-mode support: SSE streaming for real-time responses, traditional JSON for batch operations
• Zod-based request validation with conversation history support

React Integration

• useGemini hook: Stateful message management with streaming buffer accumulation
• GeminiChat component: Auto-scrolling chat UI with loading states
• GeminiProvider: Optional context wrapper for global state sharing

Type Safety

interface GeminiRequest {
  prompt: string;
  history?: GeminiMessage[];
  stream?: boolean;
  model?: string;
}

Implementation Examples

Streaming API usage:

const { messages, sendMessage } = useGemini({ stream: true });
await sendMessage("Analyze this ROI calculation...");
// Messages update in real-time as chunks arrive

ROI Calculator integration:

const prompt = `Based on ${data.industry} with ${data.employees} employees...`;
await sendMessage(prompt);
// AI provides contextual recommendations based on calculated metrics

Security

• Environment-based API key management (.env.local gitignored)
• Server-side client instantiation pattern prevents credential exposure
• Input validation: 10K character limit, schema validation via Zod
• CodeQL: 0 alerts

File Structure

/lib/gemini          # Server-side client + types
/app/api/gemini      # API route handler
/hooks               # useGemini hook
/components/ai       # GeminiChat, GeminiProvider
/app/demo            # Chat interface demo
/app/roi-calculator  # Business calculator with AI recommendations

Environment Setup Required

GEMINI_API_KEY=<from https://makersuite.google.com/app/apikey>
NEXT_PUBLIC_GEMINI_MODEL=gemini-pro

Production Considerations

Rate limiting not implemented - recommend @vercel/rate-limit or Redis-based solution before public deployment. Current implementation handles request validation and error boundaries but assumes trusted traffic.

Original prompt

Integrate Google Gemini AI into AIISTECH-Website

Objective

Integrate Google's Gemini AI into the AIISTECH-Website Next.js 14 application for production use. The integration should support the platform's AI-driven automation capabilities and enhance user interactions.

Technical Requirements

1. Setup Gemini AI SDK

• Install the official @google/generative-ai npm package
• Create a configuration file for Gemini API integration
• Set up environment variables for the Gemini API key (.env.local and .env.example)

2. Create API Routes (Next.js App Router)

• Implement a serverless API route at /api/gemini to handle Gemini AI requests
• Support both streaming and non-streaming responses
• Add proper error handling and rate limiting considerations
• Implement request validation using Zod

3. Create React Components

• Build a reusable GeminiChat component for AI interactions
• Create a hook (useGemini) for easy integration throughout the app
• Support conversation history and context management
• Add loading states and error handling

4. Integration Points

Based on the README.md, integrate Gemini AI into:

• Interactive ROI Calculator: Use Gemini to provide intelligent recommendations based on user inputs
• Assessment Forms: Analyze responses and provide personalized automation readiness insights
• Customer Support: Add an AI-powered chat widget for visitor queries
• Content Generation: Assist in generating case study summaries or blog content previews

5. Security & Best Practices

• Keep API keys secure (server-side only, never expose to client)
• Implement rate limiting to prevent abuse
• Add input sanitization and validation
• Include proper TypeScript types
• Add comprehensive error handling

6. Documentation

• Update README.md with Gemini AI integration details
• Add setup instructions for obtaining and configuring Gemini API key
• Include usage examples for developers
• Document the API routes and component props

Implementation Details

File Structure

/app
  /api
    /gemini
      route.ts         # API route handler
/components
  /ai
    GeminiChat.tsx     # Chat component
    GeminiProvider.tsx # Context provider
/lib
  /gemini
    client.ts          # Gemini client configuration
    types.ts           # TypeScript types
/hooks
  useGemini.ts         # Custom React hook
.env.local             # Environment variables (add to .gitignore)
.env.example           # Example environment variables

Environment Variables

GEMINI_API_KEY=your_api_key_here
NEXT_PUBLIC_GEMINI_MODEL=gemini-pro

Models to Use

• gemini-pro: For text-based interactions (chat, recommendations, analysis)
• gemini-pro-vision: If image analysis is needed in the future

Testing Considerations

• Test API routes with various inputs
• Verify error handling for invalid API keys or rate limits
• Ensure streaming responses work correctly
• Test on both development and production environments

Success Criteria

• Gemini AI SDK successfully installed and configured
• API routes functional with proper error handling
• Reusable React components created
• Integration working in at least one feature (e.g., ROI calculator or chat)
• Documentation updated
• Environment variables properly configured
• No API keys exposed in client-side code
• TypeScript types properly defined

Tech Stack Context

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Forms: React Hook Form + Zod
• TypeScript: Ensure full type safety

Notes

• Follow Next.js 14 best practices (App Router, Server Components where appropriate)
• Maintain consistency with existing codebase styling and structure
• Consider the platform's focus on healthcare, manufacturing, BFSI, and professional services
• Ensure HIPAA/SOC 2 compliance considerations for sensitive data handling

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.