Home
back

MCP Client 作成 , Vercel AI SDK

id: 191, 2025-05-23

### 音声概要

・AIで生成された 音声概要になります。

Vercel AI SDK で、 MCP Client 的な CLI作成

  • Vercel AI SDK の例になります。
  • toolに対応しているようです。
  • LLM = gemini の構成になります。

### 関連の記事

### 書いたコード

  • tool 追加
  • mcp-cli-3/src/tools/getNumber.ts
  • MCP Serverの、tool設定に、似ています。
  • parameters: プロンプトから、LLM抽出した パラメータ
  • execute: 成功した時の、実行関数

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-cli-3/src/tools/getNumber.ts

  • mcp-cli-3/src/index.ts
  • CLI - main:
  • generateText を使用します。
  • tools : 複数のtool設定し、LLMに送信できるようです。
async function executeMcp(input: string) {
  const result = await generateText({
    model: google(MODEL_NAME),
    tools: {
      getNumber, addTodo,
    },
    maxSteps: 5,
    messages: [{ role: "user", content: input }],
  });
  console.log("artifact", result.text);
}

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-cli-3/src/index.ts

  • 補足: 別toolですが。tool内関数で。外部連携で、TODO登録する。
  • d1 databaseに、登録します。

Electron + Vercel AI SDK で、 MCP Client 画面作成

  • 前回同様、Vercel AI SDK の例になります。
  • LLM = gemini の構成になります。

### 書いたコード

  • home
  • mcp-client-ui-3/src/client/home.tsx

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-client-ui-3/src/client/home.tsx

  • tool
  • mcp-client-ui-3/src/tools/getNumber.cjs

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-client-ui-3/src/tools/getNumber.cjs

  • プロンプト参考
サイコロを振ってください。1から6までの整数を返してください。

  • 補足:

  • 別 toolですが。tool内関数で。外部連携APIで、消費品の金額登録する。

  • d1 databaseに、登録します。

  • プロンプト参考

addItemPrice を使って、 カフェラテの普通サイズ , 198 JPY を送信して欲しい。
  • 登録時の動画
  • 登録完了まで、2,3秒 (ローカルLLM は、30秒前後)

@tweet

作業時間の登録、一覧表示 , Vercel AI SDK + MCPクライアント　作例

  • 前回同様、Vercel AI SDK の例になります。
  • LLM = gemini の構成になります。
  • 表示は、MD形式表示です。

### 書いたコード

  • .env
  • 設定: Google の、API_KEY設定
  • API_URL: 外部連携APIサービス
GOOGLE_GENERATIVE_AI_API_KEY="api-key"
API_URL=http://localhost:8787
  • home
  • mcp-client-ui-3/src/client/home.tsx

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-client-ui-3/src/client/home.tsx

  • tool　, 登録
  • mcp-client-ui-3/src/tools/saveWorkHour.cjs

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-client-ui-3/src/tools/saveWorkHour.cjs

  • tool　, 表示
  • mcp-client-ui-3/src/tools/getWorkList.cjs

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-client-ui-3/src/tools/getWorkList.cjs

  • プロンプト参考
  • 作業時間、登録
saveWorkHourを使って、 本日の作業開始 8:30 作業終了 17:00 を送信して。
  • 作業時間、表示
getWorkListを使って、作業一覧を、markdown記法の表形式で表示して欲しい。
  • 動画、 登録＆　表示

https://x.com/k_nakashima/status/1915900370754453839