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. 01获取 Lorem Picsum 随机图片
  2. 02返回 MCP 图片块
  3. 03提供单一 `get_random_image` 工具
  4. 04使用 TypeScript 实现

适用场景

  1. 01研究 MCP 中的图片块响应
  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 服务示例

概述

一个示例 MCP 服务，可从 Lorem Picsum API 返回随机图像。这只是一个示例，用于展示 MCP 服务如何返回图像块。

另请参阅：模型上下文协议规范中的图像内容

用法

在 VS Code 中使用

将以下内容添加到你的 settings 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 检查器试用此服务：

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

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。