画面とマイクを利用した AI エージェントを作成する方法

スクリーンパイプ: 24 時間年中無休の画面とマイクの録音、OCR、文字起こし、AI 統合のための CLI/アプリ

Screenpipe は、画面とマイクのアクティビティを継続的に記録し、光学式文字認識 (OCR) データを抽出し、文字起こしを生成し、このデータを AI モデルに供給するプロセスを簡素化するコマンドライン インターフェイス (CLI) アプリケーションです。 柔軟なパイプ システムにより、キャプチャされた画面やオーディオ情報と対話する強力なプラグインを作成できます。この例では、Ollama を活用して画面アクティビティを分析する単純なパイプを構築する方法を示します。

前提条件:

• スクリーンパイプがインストールされ、実行されています。
• パンがインストールされました (npm install -g bun)。
• モデルとともにインストールされた Ollama (この例では DeepSeek-r1:1.5b が使用されています)。

1.パイプの作成:

CLI を使用して新しいスクリーンパイプ パイプを作成します。

<code class="language-bash">bunx @screenpipe/create-pipe@latest</code>

プロンプトに従ってパイプに名前を付け (例: 「my-activity-analyzer」)、ディレクトリを選択します。

2.プロジェクトのセットアップ:

好みのエディター (カーソル、VS コードなど) でプロジェクトを開きます。

<code class="language-bash">cursor my-activity-analyzer</code>

初期のプロジェクト構造には複数のファイルが含まれます。 この例では、不要なファイルを削除します:

<code class="language-bash">rm -rf src/app/api/intelligence src/components/obsidian-settings.tsx src/components/file-suggest-textarea.tsx</code>

3.分析 Cron ジョブの実装:

次のコードで src/app/api/analyze/route.ts を作成します:

<code class="language-typescript">import { NextResponse } from "next/server";
import { pipe } from "@screenpipe/js";
import { streamText } from "ai";
import { ollama } from "ollama-ai-provider";

export async function POST(request: Request) {
  try {
    const { messages, model } = await request.json();
    console.log("model:", model);

    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000).toISOString();
    const results = await pipe.queryScreenpipe({
      startTime: fiveMinutesAgo,
      limit: 10,
      contentType: "all",
    });

    const provider = ollama(model);
    const result = streamText({
      model: provider,
      messages: [
        ...messages,
        {
          role: "user",
          content: `Analyze this activity data and summarize what I've been doing: ${JSON.stringify(results)}`,
        },
      ],
    });

    return result.toDataStreamResponse();
  } catch (error) {
    console.error("error:", error);
    return NextResponse.json({ error: "Failed to analyze activity" }, { status: 500 });
  }
}</code>

4. pipe.json スケジュール設定:

pipe.json を作成または変更して cron ジョブを含めます:

<code class="language-json">{
  "crons": [
    {
      "path": "/api/analyze",
      "schedule": "*/5 * * * *" // Runs every 5 minutes
    }
  ]
}</code>

5.メインページの更新 (src/app/page.tsx):

<code class="language-typescript">"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { OllamaModelsList } from "@/components/ollama-models-list";
import { Label } from "@/components/ui/label";
import { useChat } from "ai/react";

export default function Home() {
  const [selectedModel, setSelectedModel] = useState("deepseek-r1:1.5b");
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    body: { model: selectedModel },
    api: "/api/analyze",
  });

  return (
    <main className="p-4 max-w-2xl mx-auto space-y-4">
      <div className="space-y-2">
        <label htmlFor="model">Ollama Model</label>
        <OllamaModelsList defaultValue={selectedModel} onChange={setSelectedModel} />
      </div>

      <div>
        {messages.map((message) => (
          <div key={message.id}>
            <div>{message.role === "user" ? "User: " : "AI: "}</div>
            <div>{message.content}</div>
          </div>
        ))}
      </div>
    </main>
  );
}</code>

6.ローカルテスト:

パイプをローカルで実行します:

<code class="language-bash">bun i  // or npm install
bun dev</code>

http://localhost:3000 でアプリケーションにアクセスします。

7.スクリーンパイプのインストール:

パイプをスクリーンパイプに取り付けます:

• UI: Screenpipe アプリを開き、「パイプ」セクションに移動して「」をクリックし、パイプへのローカル パスを指定します。
• CLI:

  <code class="language-bash">screenpipe install /path/to/my-activity-analyzer
  screenpipe enable my-activity-analyzer</code>

仕組み:

• データ クエリ: pipe.queryScreenpipe() は、最近の画面および音声データを取得します。
• AI 処理: Ollama はプロンプトを使用してデータを分析します。
• UI: シンプルなインターフェースに分析結果が表示されます。
• スケジュール: Screenpipe の cron ジョブは 5 分ごとに分析を実行します。

次のステップ:

• 構成オプションを追加します。
• 外部サービスと統合します。
• より洗練された UI コンポーネントを実装します。

参考文献:

• スクリーンパイプのドキュメント。
• スクリーンパイプ パイプの例。
• スクリーンパイプ SDK リファレンス

以上が画面とマイクを利用した AI エージェントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。