Home
back

MCP Client 作成 作例

id: 192, 2025-05-23

### 音声概要

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

タスク管理の登録, 表示 Vercel AI SDK + MCPクライアント　作例

  • 前回同様、Vercel AI SDK の例になります。
  • LLM = gemini の構成になります。
  • d1 databaseに、データ保存します.。

### 構成

  • Vercel AI SDK
  • LLM gemini
  • Vercel AI SDK
  • electron
  • React
  • d1 + CF-workers

### 書いたコード

  • .env
  • 設定: gemini の、API_KEY設定
  • TASK_API_URL: タスク管理の外部連携APIサービス
  • TASK_API_KEY: タスク管理の認証鍵
GOOGLE_GENERATIVE_AI_API_KEY="api-key"
TASK_API_URL="API_URL=http://localhost:8787"
TASK_API_KEY="123"
  • tool　, 登録
  • mcp-client-ui-3/src/tools/addTask.cjs

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

  • プロンプト参考
addTaskを使って、プロジェクトID 24 , タイトル テスト工程-1 , 開始日 2025-04-18 , 終了日 2025-04-22 を送信して。
  • 表示は、外部webアプリで表示
  • 動画、 登録＆　表示

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

Express + Vercel AI SDK + MCP作例

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

### 構成

  • Vercel AI SDK
  • LLM gemini
  • Vercel AI SDK
  • express
  • React
  • node20
  • d1 + CF-workers

### 書いたコード

  • .env
  • 設定: gemini の、API_KEY設定
  • ユーザー名、パスワード
GOOGLE_GENERATIVE_AI_API_KEY="api-key"
USER_NAME="user1@example.com"
PASSWORD="123"
  • 参考: vercelデプロイで、env変数の設定
  • Settings > Environment Variables
  • Git push時に、 .envファイルをアップしなくて楽でした。
  • プロンプト参考
サイコロを振ってください。1から6までの整数を返してください。
  • tree
  • src/tools : tool配置
$ tree .
.
├── nodemon.json
├── package.json
├── public
│   ├── empty
├── rolldown.config.js
├── src
│   ├── App.tsx
│   ├── client
│   │   ├── Home.tsx
│   │   ├── Login.tsx
│   │   ├── about.tsx
│   │   └── lib
│   │       ├── HttpCommon.ts
│   │       └── LibConfig.ts
│   ├── components
│   │   └── Head.tsx
│   ├── config.ts
│   ├── entry-client.jsx
│   ├── entry-server.jsx
│   ├── index.ts
│   ├── lib
│   │   ├── Common.ts
│   │   └── LibConfig.ts
│   ├── main.css
│   ├── pages
│   │   └── App.tsx
│   ├── routes
│   │   ├── common.ts
│   │   ├── index.ts
│   │   ├── mcpRouter.ts
│   │   └── user.ts
│   └── tools
│       ├── addItemPrice.ts
│       ├── addTask.ts
│       ├── addTodo.ts
│       ├── getNumber.ts
│       ├── getTodoList.ts
│       ├── getWeatherInfo.ts
│       ├── getWorkList.ts
│       └── saveWorkHour.ts
├── tsconfig.json
└── vite.config.ts

Qwen3 + Ollama 、MCP 作成

  • 前回同様、Ollama 版の例になります。
  • LLM = Qwen3 の構成になります。
  • qwen3:8b を使用　(サイズ 5.2GB)

### 構成

  • LLM qwen3:8b
  • node20

### 書いたコード

  • プロンプト参考
get-random-number を使って、数字を返す。
  • tree
  • src/mcp-servers に、McpServer 配置
$ tree .
.
├── package.json
├── src
│   ├── index.ts
│   ├── libs
│   │   └── direct-transport.ts
│   └── mcp-servers
│       ├── get-random-number.ts
│       └── mcp-2ex-test.ts
└── tsconfig.json
  • McpServerの例
  • mcp-cli-4/src/mcp-servers/get-random-number.ts

https://github.com/kuc-arc-f/mcp_client_1ex/blob/main/mcp-cli-4/src/mcp-servers/get-random-number.ts

  • start
npm run dev