mcpField
E
Example MCP Server with image blocks

Example MCP Server with image blocks

ローカル
github.com/larryhudsonメディア・デザイン179 週間前に更新
リポジトリ

Example MCP Server with image blocks について

Lorem Picsum APIからランダム画像を取得するサンプルMCPサーバーです。MCPサーバーが画像ブロックを返す方法を示し、MCPを学ぶ開発者を対象としています。

主な機能

  1. 01Lorem Picsumのランダム画像を取得
  2. 02MCP画像ブロックを返却
  3. 03単一の`get_random_image`ツール
  4. 04TypeScriptによる実装

活用シーン

  1. 01MCPの画像ブロック応答を調べる
  2. 02画像対応MCPクライアントをテスト

MCP 対応

MCPクライアントに`get_random_image`を提供し、取得した画像を画像ブロックとして返します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "example-image-block": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/inspector"
      ]
    }
  }
}
起動コマンドnpx -y @modelcontextprotocol/inspector

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@modelcontextprotocol/inspector

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

画像ブロックを含む MCP サーバーの例

概要

Lorem Picsum API からランダムな画像を返す MCP サーバーの例です。MCP サーバーが画像ブロックを返す方法を示すためのサンプルです。

こちらもご覧ください：Model Context Protocol 仕様の画像コンテンツ

使用方法

VS Code で使用する

設定 JSON ファイルに以下を追加します。

{
  "mcp": {
    "servers": {
      "random_image": {
        "command": "npx",
        "args": [
          "-y",
          "@larryhudson/mcp-server-example-image-block"
        ],
      }
    }
  }
}
Claude またはその他の MCP 互換アプリケーションで使用する

MCP 設定 JSON ファイルに以下を追加します。

{
  "mcpServers": {
    "random_image": {
      "command": "npx",
      "args": ["-y", "@larryhudson/mcp-server-example-image-block"],
    }
  }
}

利用可能なツール

  • get_random_image - Lorem Picsum API を使用してランダムな画像を取得します。

技術的な詳細

以下を使用して構築されています。

  • Model Context Protocol（MCP）：AI アシスタントが外部ツールと連携できるようにするフレームワーク
  • TypeScript：型安全性と、より優れた開発者エクスペリエンスを実現します

開発

Model Context Protocol Inspector を使用して、サーバーを試すことができます。

npx @modelcontextprotocol/inspector npx tsx src/index.ts

ライセンス

MIT

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。