Gemini Live API で画面共有しながら音声で対話する『AI ペアプログラマー』を TypeScript で構築する

mkdir gemini-pair && cd gemini-pair
npm init -y
npm install @google/genai ws zod
npm install -D typescript @types/node @types/ws tsx
npx tsc --init

echo "GEMINI_API_KEY=YOUR_API_KEY" > .env

// src/client/capture.ts
type Sender = (data: ArrayBuffer | string) => void;
 
export async function startCapture(send: Sender) {
  // 画面共有（ユーザー選択ダイアログが出る）
  const screen = await navigator.mediaDevices.getDisplayMedia({
    video: { frameRate: 1, width: 1280 },
    audio: false,
  });
 
  // マイク音声
  const mic = await navigator.mediaDevices.getUserMedia({
    audio: { echoCancellation: true, noiseSuppression: true },
    video: false,
  });
 
  // 1 fps で画面をサンプリングし JPEG に変換して送信
  const video = document.createElement("video");
  video.srcObject = screen;
  await video.play();
  const canvas = new OffscreenCanvas(1280, 720);
  const ctx = canvas.getContext("2d")!;
 
  const frameTimer = setInterval(async () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0);
    const blob = await canvas.convertToBlob({ type: "image/jpeg", quality: 0.6 });
    const buf = await blob.arrayBuffer();
    send(JSON.stringify({ kind: "frame" }));
    send(buf);
  }, 1000);
 
  // 音声を 16kHz PCM に変換しながらストリーム
  const audioCtx = new AudioContext({ sampleRate: 16000 });
  await audioCtx.audioWorklet.addModule("/pcm-worklet.js");
  const source = audioCtx.createMediaStreamSource(mic);
  const node = new AudioWorkletNode(audioCtx, "pcm-worklet");
  node.port.onmessage = (e) => {
    send(JSON.stringify({ kind: "audio" }));
    send(e.data as ArrayBuffer);
  };
  source.connect(node);
 
  // 停止ハンドル
  return () => {
    clearInterval(frameTimer);
    screen.getTracks().forEach((t) => t.stop());
    mic.getTracks().forEach((t) => t.stop());
    audioCtx.close();
  };
}

// public/pcm-worklet.js
class PCMWorklet extends AudioWorkletProcessor {
  process(inputs) {
    const input = inputs[0];
    if (!input || !input[0]) return true;
    const f32 = input[0];
    const i16 = new Int16Array(f32.length);
    for (let i = 0; i < f32.length; i++) {
      const s = Math.max(-1, Math.min(1, f32[i]));
      i16[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
    }
    this.port.postMessage(i16.buffer, [i16.buffer]);
    return true;
  }
}
registerProcessor("pcm-worklet", PCMWorklet);

// src/server/bridge.ts
import { WebSocketServer, WebSocket } from "ws";
import { GoogleGenAI, Modality } from "@google/genai";
 
const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY! });
const wss = new WebSocketServer({ port: 8787 });
 
wss.on("connection", async (browser) => {
  const session = await ai.live.connect({
    model: "gemini-2.5-flash-preview-native-audio-dialog",
    config: {
      responseModalities: [Modality.AUDIO],
      systemInstruction: PAIR_PROMPT,
      tools: [{ functionDeclarations: PAIR_TOOLS }],
    },
    callbacks: {
      onmessage: (msg) => handleGeminiMessage(browser, msg),
      onerror: (e) => console.error("[gemini]", e),
      onclose: () => browser.close(),
    },
  });
 
  // ブラウザからのメッセージを Gemini へ
  let nextKind: "frame" | "audio" | null = null;
  browser.on("message", (data, isBinary) => {
    if (!isBinary) {
      const ev = JSON.parse(data.toString());
      if (ev.kind === "frame" || ev.kind === "audio") nextKind = ev.kind;
      if (ev.kind === "text") session.sendClientContent({
        turns: [{ role: "user", parts: [{ text: ev.text }] }],
      });
      return;
    }
    if (nextKind === "frame") {
      session.sendRealtimeInput({
        media: { mimeType: "image/jpeg", data: Buffer.from(data as Buffer).toString("base64") },
      });
    } else if (nextKind === "audio") {
      session.sendRealtimeInput({
        media: { mimeType: "audio/pcm;rate=16000", data: Buffer.from(data as Buffer).toString("base64") },
      });
    }
    nextKind = null;
  });
 
  browser.on("close", () => session.close());
});

async function handleGeminiMessage(browser: WebSocket, msg: any) {
  if (msg.serverContent?.modelTurn?.parts) {
    for (const part of msg.serverContent.modelTurn.parts) {
      if (part.inlineData?.mimeType?.startsWith("audio/")) {
        const buf = Buffer.from(part.inlineData.data, "base64");
        browser.send(JSON.stringify({ kind: "audio_response" }));
        browser.send(buf);
      }
      if (part.text) {
        browser.send(JSON.stringify({ kind: "text", text: part.text }));
      }
    }
  }
  if (msg.toolCall?.functionCalls) {
    const responses = [];
    for (const call of msg.toolCall.functionCalls) {
      const result = await runTool(call.name, call.args);
      responses.push({ id: call.id, name: call.name, response: { result } });
    }
    // 例外パターンに備え、空配列でもセッションを進めるように送る
  }
}

const PAIR_PROMPT = `あなたは画面を肩越しに見ているシニア開発者です。守るべき行動原則は次の通り。
 
- ユーザーは画面を共有しています。文字が読み取れる範囲は信用し、推測はしない
- 短く話す。一回の応答は 2〜3 文に留め、続きは相手の反応を待つ
- 画面の状態が変化したと感じたら、変化点だけ短く言葉にして良い
- コードや関数名を口にするときは、英語の発音記号ではなく自然な読みで
- 推測や仮定を述べる場合は「たぶん」「画面からは読み切れませんが」と前置きする
- ユーザーが「メモしておいて」「あとで見返したい」と言ったら save_note ツールを使う
- ユーザーが「公式ドキュメントを見せて」と言ったら open_docs ツールを使う
 
ユーザーの集中を妨げないことが最優先です。沈黙は問題ではなく、安心です。`;

const PAIR_TOOLS = [
  {
    name: "save_note",
    description: "現在の議論の要点を Markdown としてローカルファイルに保存する",
    parameters: {
      type: "object",
      properties: {
        title: { type: "string", description: "ノートのタイトル" },
        body: { type: "string", description: "Markdown 本文" },
      },
      required: ["title", "body"],
    },
  },
  {
    name: "open_docs",
    description: "公式ドキュメントの URL を開く",
    parameters: {
      type: "object",
      properties: {
        product: { type: "string" },
        topic: { type: "string" },
      },
      required: ["product", "topic"],
    },
  },
];
 
async function runTool(name: string, args: any) {
  if (name === "save_note") {
    const fs = await import("node:fs/promises");
    const path = `./notes/${Date.now()}-${args.title.replace(/[^\w\-]/g, "_")}.md`;
    await fs.mkdir("./notes", { recursive: true });
    await fs.writeFile(path, `# ${args.title}\n\n${args.body}\n`);
    return { saved: path };
  }
  if (name === "open_docs") {
    const url = `https://www.google.com/search?q=${encodeURIComponent(args.product + " " + args.topic + " docs")}`;
    return { url };
  }
  return { error: "unknown tool" };
}