┌─────────────────────────────────────────────────────────────────┐
│                        CROP-front                                │
├─────────────────────────────────────────────────────────────────┤
│  app/page.tsx                                                    │
│  └── useAiChat (hooks/use-ai-chat.ts)                           │
│       └── sendMessageStream (services/ai-chat/client.ts)        │
│            └── /api/ai/query (Next.js proxy)                    │
│                 └── Cloud Run vLLM (LLaMA 3.1 8B)               │
├─────────────────────────────────────────────────────────────────┤
│  NEW: app/api/chat/route.ts (Vercel AI SDK)                     │
│       └── lib/ai/provider.ts                                     │
│            └── @ai-sdk/gateway → Claude/GPT-4                   │
└─────────────────────────────────────────────────────────────────┘

// app/page.tsx - still uses legacy hook
const { messages, isLoading, error, sendMessage } = useAiChat({
  streaming: true,
  skipAuth: true,
});

// services/ai-chat/client.ts:190-206
export async function* sendMessageStream(...) {
  const response = await sendMessage(...); // Wait for FULL response
  const content = response.content;
  for (let i = 0; i < content.length; i += chunkSize) {
    yield { type: "content", content: content.slice(i, i + chunkSize) };
    await new Promise((resolve) => setTimeout(resolve, 10)); // Fake delay!
  }
}

// lib/ai/provider.ts:84
export function getGatewayProviderOptions(): Record<string, unknown> | undefined
// But streamText expects: SharedV3ProviderOptions | undefined

// services/ai-chat/types.ts
interface ChatMessage {
  id: string;
  role: "user" | "assistant" | "system";
  content: string;
  createdAt: string;
  metadata?: ChatMessageMetadata;
}

// @ai-sdk/react UIMessage
interface UIMessage {
  id: string;
  role: "user" | "assistant" | "system";
  parts: MessagePart[];
  // Different structure!
}

// lib/ai/provider.ts - Remove unused function
// getGatewayProviderOptions() is incompatible, Gateway handles fallback internally

// hooks/use-vercel-chat.ts
"use client";

import { useChat } from "@ai-sdk/react";

export function useVercelChat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error, stop, reload } =
    useChat({
      api: "/api/chat",
      onError: (err) => console.error("Chat error:", err),
    });

  return {
    messages,
    input,
    setInput: (value: string) => handleInputChange({ target: { value } } as any),
    sendMessage: handleSubmit,
    isLoading,
    error,
    stop,
    regenerate: reload,
  };
}

// app/page.tsx
import { useVercelChat } from "@/hooks/use-vercel-chat";
import { useAiChat } from "@/hooks/use-ai-chat";

const useChat = process.env.NEXT_PUBLIC_USE_VERCEL_AI === "true"
  ? useVercelChat
  : useAiChat;

# Provider selection
AI_PROVIDER="gateway"  # or "openai", "anthropic", "vllm"

# Feature flag for frontend
NEXT_PUBLIC_USE_VERCEL_AI="true"

# API keys (for non-gateway providers)
OPENAI_API_KEY="sk-..."
ANTHROPIC_API_KEY="sk-ant-..."

lib/
├── ai/
│   ├── provider.ts          # Server-side provider config
│   └── index.ts             # Re-exports
hooks/
├── use-ai-chat.ts           # Legacy vLLM hook
├── use-vercel-chat.ts       # NEW: Vercel AI SDK hook
└── use-chat.ts              # NEW: Unified hook with feature flag
app/
├── api/
│   ├── ai/query/route.ts    # Legacy vLLM proxy
│   └── chat/route.ts        # Vercel AI streaming
└── page.tsx                  # Uses unified hook

// lib/ai/tools.ts exports:
export const cropAiTools = {
  searchParts,      // Search parts catalog with filters
  getPartDetails,   // Get detailed part information
  autocomplete,     // Get search suggestions
  checkAvailability // Check stock status for part numbers
};

// app/api/chat/route.ts
import { stepCountIs, streamText } from "ai";
import { cropAiTools } from "@/lib/ai/tools";

const result = streamText({
  model,
  system: getSystemPrompt(),
  messages: await convertToModelMessages(messages),
  tools: cropAiTools,
  stopWhen: stepCountIs(5), // Allow up to 5 sequential tool calls
});