دمج Gemini 3.6 Flash مع TypeScript: بناء وكلاء ذكاء اصطناعي بالتفكير المتوازي

pnpm create next-app@latest market-intel --typescript --tailwind --app --no-src-dir
cd market-intel
pnpm add @google/genai zod

GEMINI_API_KEY=your_key_from_ai_studio

// lib/gemini.ts
import { GoogleGenAI } from "@google/genai";
 
if (!process.env.GEMINI_API_KEY) {
  throw new Error("GEMINI_API_KEY is not set in .env.local");
}
 
export const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
 
export const MODEL = "gemini-3.6-flash";

// scripts/test-connection.ts
import { ai, MODEL } from "../lib/gemini";
 
const response = await ai.models.generateContent({
  model: MODEL,
  contents: "Reply with: Gemini 3.6 Flash is online.",
});
 
console.log(response.text);

npx tsx scripts/test-connection.ts

// lib/thinking.ts
export type ThinkingTier = "low" | "medium" | "high" | "disabled";
 
export function thinkingConfig(tier: ThinkingTier) {
  const budgets: Record<ThinkingTier, number> = {
    low: 1024,
    medium: 8192,
    high: -1,
    disabled: 0,
  };
  return { thinkingBudget: budgets[tier] };
}

// lib/stream-agent.ts
import { ai, MODEL } from "./gemini";
import { thinkingConfig } from "./thinking";
 
export type StreamChunk =
  | { type: "thinking"; text: string }
  | { type: "response"; text: string };
 
export async function* streamWithThinking(
  prompt: string,
  tier: "low" | "medium" | "high" = "medium"
): AsyncGenerator<StreamChunk> {
  const stream = await ai.models.generateContentStream({
    model: MODEL,
    contents: prompt,
    config: {
      thinkingConfig: thinkingConfig(tier),
    },
  });
 
  for await (const chunk of stream) {
    const parts = chunk.candidates?.[0]?.content?.parts ?? [];
    for (const part of parts) {
      if (part.thought && part.text) {
        yield { type: "thinking", text: part.text };
      } else if (part.text) {
        yield { type: "response", text: part.text };
      }
    }
  }
}

// scripts/test-thinking.ts
import { streamWithThinking } from "../lib/stream-agent";
 
for await (const chunk of streamWithThinking(
  "قارن PostgreSQL وSQLite لتطبيق يُعطي الأولوية للهاتف المحمول.",
  "medium"
)) {
  if (chunk.type === "thinking") process.stdout.write("[T] " + chunk.text);
  else process.stdout.write("[R] " + chunk.text);
}

// lib/tools.ts
import type { FunctionDeclaration } from "@google/genai";
 
export const researchTools: FunctionDeclaration[] = [
  {
    name: "get_stock_quote",
    description:
      "Get the current stock price, market cap, and key financial ratios for a ticker symbol.",
    parameters: {
      type: "object",
      properties: {
        symbol: {
          type: "string",
          description: "Stock ticker e.g. NVDA, MSFT, GOOGL",
        },
      },
      required: ["symbol"],
    },
  },
  {
    name: "search_news",
    description: "Search recent news articles for a company or topic.",
    parameters: {
      type: "object",
      properties: {
        query: { type: "string", description: "News search query" },
        days: {
          type: "integer",
          description: "Number of past days to search. Default is 7.",
        },
      },
      required: ["query"],
    },
  },
  {
    name: "get_competitors",
    description:
      "Return a list of direct competitors and approximate market share for a company.",
    parameters: {
      type: "object",
      properties: {
        company: {
          type: "string",
          description: "Company name or ticker symbol",
        },
      },
      required: ["company"],
    },
  },
];

// lib/tool-handlers.ts
export async function executeToolCall(
  name: string,
  args: Record<string, unknown>
): Promise<unknown> {
  switch (name) {
    case "get_stock_quote":
      return getStockQuote(args.symbol as string);
    case "search_news":
      return searchNews(args.query as string, (args.days as number) ?? 7);
    case "get_competitors":
      return getCompetitors(args.company as string);
    default:
      throw new Error(`Unknown tool: ${name}`);
  }
}
 
function getStockQuote(symbol: string) {
  const data: Record<string, object> = {
    NVDA: { price: 1247.5, change: "+3.2%", marketCap: "3.1T", peRatio: 48.2 },
    MSFT: { price: 512.3, change: "+0.8%", marketCap: "3.8T", peRatio: 35.1 },
    GOOGL: { price: 198.45, change: "+1.5%", marketCap: "2.4T", peRatio: 28.7 },
  };
  return data[symbol.toUpperCase()] ?? { error: `Symbol ${symbol} not found` };
}
 
function searchNews(query: string, days: number) {
  return {
    articles: [
      {
        title: `${query}: Key Developments`,
        summary: "AI infrastructure spending continues to accelerate...",
        source: "Reuters",
        publishedAt: new Date().toISOString(),
      },
    ],
    totalResults: 1,
    daysSearched: days,
  };
}
 
function getCompetitors(company: string) {
  return {
    company,
    competitors: [
      { name: "AMD", marketShare: "18%", focus: "GPU, CPU" },
      { name: "Intel", marketShare: "12%", focus: "CPU, GPU" },
      { name: "Qualcomm", marketShare: "8%", focus: "Edge AI, Mobile" },
    ],
  };
}

// lib/agent-loop.ts
import type { Content, FunctionCall, Part } from "@google/genai";
import { ai, MODEL } from "./gemini";
import { thinkingConfig } from "./thinking";
import { researchTools } from "./tools";
import { executeToolCall } from "./tool-handlers";
 
export interface AgentResult {
  thoughts: string[];
  answer: string;
  toolCalls: Array<{ name: string; args: Record<string, unknown> }>;
}
 
export async function runResearchAgent(query: string): Promise<AgentResult> {
  const history: Content[] = [
    { role: "user", parts: [{ text: query }] },
  ];
  const thoughts: string[] = [];
  const toolCalls: AgentResult["toolCalls"] = [];
 
  for (let turn = 0; turn < 6; turn++) {
    const response = await ai.models.generateContent({
      model: MODEL,
      contents: history,
      config: {
        tools: [{ functionDeclarations: researchTools }],
        thinkingConfig: thinkingConfig("medium"),
      },
    });
 
    const parts = response.candidates?.[0]?.content?.parts ?? [];
 
    for (const part of parts) {
      if (part.thought && part.text) {
        thoughts.push(part.text);
      }
    }
 
    const fnCalls = parts.filter(
      (p): p is Part & { functionCall: FunctionCall } => !!p.functionCall
    );
 
    if (fnCalls.length === 0) {
      const answer = parts
        .filter((p) => !p.thought && p.text)
        .map((p) => p.text ?? "")
        .join("");
      return { thoughts, answer, toolCalls };
    }
 
    history.push({ role: "model", parts });
 
    for (const { functionCall } of fnCalls) {
      toolCalls.push({
        name: functionCall.name,
        args: (functionCall.args ?? {}) as Record<string, unknown>,
      });
    }
 
    // تنفيذ جميع استدعاءات الأدوات بالتوازي
    const toolResults = await Promise.all(
      fnCalls.map(async ({ functionCall }) => {
        const result = await executeToolCall(
          functionCall.name,
          (functionCall.args ?? {}) as Record<string, unknown>
        );
        return {
          functionResponse: {
            name: functionCall.name,
            response: { output: result },
          },
        };
      })
    );
 
    history.push({ role: "user", parts: toolResults });
  }
 
  return {
    thoughts,
    answer: "اكتمل البحث — تم بلوغ الحد الأقصى للتكرارات.",
    toolCalls,
  };
}

// app/api/research/route.ts
import { NextRequest } from "next/server";
import type { Content, FunctionCall, Part } from "@google/genai";
import { ai, MODEL } from "@/lib/gemini";
import { thinkingConfig } from "@/lib/thinking";
import { researchTools } from "@/lib/tools";
import { executeToolCall } from "@/lib/tool-handlers";
 
export const maxDuration = 120;
 
export async function POST(req: NextRequest) {
  const { query } = await req.json() as { query: string };
  const encoder = new TextEncoder();
 
  const stream = new ReadableStream({
    async start(controller) {
      const send = (data: object) =>
        controller.enqueue(
          encoder.encode(`data: ${JSON.stringify(data)}\n\n`)
        );
 
      const history: Content[] = [
        { role: "user", parts: [{ text: query }] },
      ];
 
      for (let turn = 0; turn < 6; turn++) {
        const response = await ai.models.generateContent({
          model: MODEL,
          contents: history,
          config: {
            tools: [{ functionDeclarations: researchTools }],
            thinkingConfig: thinkingConfig("medium"),
          },
        });
 
        const parts = response.candidates?.[0]?.content?.parts ?? [];
 
        for (const part of parts) {
          if (part.thought && part.text) {
            send({ type: "thinking", text: part.text });
          }
        }
 
        const fnCalls = parts.filter(
          (p): p is Part & { functionCall: FunctionCall } => !!p.functionCall
        );
 
        if (fnCalls.length === 0) {
          const answer = parts
            .filter((p) => !p.thought && p.text)
            .map((p) => p.text ?? "")
            .join("");
          send({ type: "result", text: answer });
          break;
        }
 
        history.push({ role: "model", parts });
        send({ type: "tools_start", names: fnCalls.map((f) => f.functionCall.name) });
 
        const toolResults = await Promise.all(
          fnCalls.map(async ({ functionCall }) => {
            const result = await executeToolCall(
              functionCall.name,
              (functionCall.args ?? {}) as Record<string, unknown>
            );
            send({ type: "tool_done", name: functionCall.name });
            return {
              functionResponse: {
                name: functionCall.name,
                response: { output: result },
              },
            };
          })
        );
 
        history.push({ role: "user", parts: toolResults });
      }
 
      controller.close();
    },
  });
 
  return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

// app/page.tsx
"use client";
 
import { useState } from "react";
 
type Event =
  | { type: "thinking"; text: string }
  | { type: "tools_start"; names: string[] }
  | { type: "tool_done"; name: string }
  | { type: "result"; text: string };
 
export default function ResearchPage() {
  const [query, setQuery] = useState("");
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(false);
 
  async function runResearch() {
    setEvents([]);
    setLoading(true);
 
    const res = await fetch("/api/research", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query }),
    });
 
    const reader = res.body!.getReader();
    const decoder = new TextDecoder();
 
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
 
      for (const line of decoder.decode(value).split("\n")) {
        if (!line.startsWith("data: ")) continue;
        try {
          const event = JSON.parse(line.slice(6)) as Event;
          setEvents((prev) => [...prev, event]);
        } catch {
          // تجاوز الأجزاء غير المكتملة
        }
      }
    }
 
    setLoading(false);
  }
 
  return (
    <main className="max-w-3xl mx-auto p-8 space-y-6" dir="rtl">
      <h1 className="text-2xl font-bold">وكيل استخبارات السوق</h1>
      <p className="text-gray-600 text-sm">
        مدعوم بـ Gemini 3.6 Flash مع وضع التفكير وتنفيذ الأدوات المتوازي.
      </p>
 
      <div className="flex gap-2">
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && !loading && query && runResearch()}
          placeholder="مثال: المشهد التنافسي لـ NVIDIA في رقائق الذكاء الاصطناعي"
          className="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          dir="rtl"
        />
        <button
          onClick={runResearch}
          disabled={loading || !query.trim()}
          className="bg-blue-600 text-white px-5 py-2 rounded-lg disabled:opacity-50 hover:bg-blue-700 transition-colors"
        >
          {loading ? "جارٍ البحث…" : "ابحث"}
        </button>
      </div>
 
      <div className="space-y-2">
        {events.map((event, i) => (
          <div
            key={i}
            className={`rounded-lg p-3 text-sm ${
              event.type === "thinking"
                ? "bg-amber-50 border border-amber-200 text-amber-900 font-mono text-xs"
                : event.type === "tools_start"
                ? "bg-blue-50 border border-blue-200 text-blue-800"
                : event.type === "tool_done"
                ? "bg-emerald-50 border border-emerald-200 text-emerald-800"
                : "bg-white border shadow-sm whitespace-pre-wrap"
            }`}
          >
            {event.type === "thinking" && (
              <span><span className="font-semibold">تفكير: </span>{event.text}</span>
            )}
            {event.type === "tools_start" && (
              <span><span className="font-semibold">استدعاء بالتوازي: </span>{event.names.join(", ")}</span>
            )}
            {event.type === "tool_done" && (
              <span><span className="font-semibold">انتهى: </span>{event.name}</span>
            )}
            {event.type === "result" && (
              <div>
                <p className="font-semibold mb-2">التحليل:</p>
                {event.text}
              </div>
            )}
          </div>
        ))}
      </div>
    </main>
  );
}