mcpField
U
uploadkit

uploadkit

本地服务
uploadkit.dev开发工具31 天前更新
代码仓库访问官网

关于 uploadkit

UploadKit MCP 为 AI 编码助手提供 UploadKit SDK 文档、组件信息和配置脚手架，面向在 Next.js 项目中集成 UploadKit 的开发者。它可搜索组件资料，并提供 BYOS 配置指引。

主要功能

  1. 01浏览和搜索 40 多种组件
  2. 02获取组件元数据与示例
  3. 03生成 Next.js 路由处理器脚手架
  4. 04生成 Provider 配置片段
  5. 05配置 S3、R2、GCS 和 B2 的 BYOS
  6. 06提供安装命令与快速入门

适用场景

  1. 01查找合适的 UploadKit 组件
  2. 02搭建 Next.js 路由处理器
  3. 03将 UploadKit 接入 BYOS 存储
  4. 04编码时查询 SDK 配置方法

MCP 相关

MCP 服务提供组件发现、安装、脚手架和 BYOS 配置工具，以及目录和快速入门资源。它可通过 npx 本地运行，也提供只读的远程 Streamable HTTP 端点。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "drumst0ck-uploadkit": {
      "command": "npx",
      "args": [
        "-y",
        "@uploadkitdev/mcp"
      ]
    }
  }
}
启动命令npx -y @uploadkitdev/mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@uploadkitdev/mcp0.3.1

工具

11

收录的工具列表 · 更新于 3 周前

参数类型必填说明
categoryenum否可选筛选条件。classic | dropzone | button | progress | motion | specialty | gallery

详细介绍

@uploadkitdev/mcp

npm version Glama MCP score Awesome MCP Servers Official MCP Registry

适用于 UploadKit 的 Model Context Protocol 服务，让 AI 编码助手（Claude Code、Cursor、Windsurf、Zed）全面了解 UploadKit SDK。

现在，你的 AI 知道：

  • UploadKit 的 40 多个 React 组件（名称、类别、灵感来源、用法）
  • 如何搭建 Next.js 路由处理程序
  • 如何将 <UploadKitProvider> 接入根布局
  • 如何为 S3、R2、GCS 或 Backblaze B2 配置 BYOS（自带存储）
  • 如何为你的包管理器选择安装命令

无需配置。无需 API 密钥。通过 npx 在本地运行。

远程 MCP

对于无法启动 npx 的客户端（ChatGPT 自定义连接器、Claude.ai 网页版、Smithery），UploadKit 还提供了一个 Streamable HTTP 端点：

https://api.uploadkit.dev/api/v1/mcp

提供相同的 11 个工具，只读，无需身份验证。完整设置说明：https://docs.uploadkit.dev/docs/guides/mcp#remote-mcp

安装

将以下内容添加到你的 MCP 客户端配置中。

Claude Code
{
  "mcpServers": {
    "uploadkit": {
      "command": "npx",
      "args": ["-y", "@uploadkitdev/mcp"]
    }
  }
}

……或运行：claude mcp add uploadkit -- npx -y @uploadkitdev/mcp

Cursor

Settings → Features → Model Context Protocol → Add new MCP server：

Name:     uploadkit
Command:  npx -y @uploadkitdev/mcp
Windsurf / Zed / Continue

按照你的编辑器的 MCP 文档操作。命令始终为 npx -y @uploadkitdev/mcp。

工具

工具功能
list_components列出所有 UploadKit 组件，可按类别筛选
get_component获取单个组件的完整元数据和用法示例
search_components按关键词搜索名称、描述和灵感来源
get_install_command返回适用于你的包管理器的安装命令
scaffold_route_handler生成 app/api/uploadkit/[...uploadkit]/route.ts
scaffold_provider提供将 <UploadKitProvider> 接入 layout.tsx 的代码片段
get_byos_config提供 S3 / R2 / GCS / B2 的环境变量和处理程序
get_quickstart提供端到端的 Next.js 快速入门指南

资源

  • uploadkit://catalog — 包含所有组件的 JSON
  • uploadkit://quickstart — Next.js 设置指南

安装后可尝试的提示词

“为此页面添加 Apple 风格的动画拖放区。”

“使用 Cloudflare R2 BYOS 模式设置 UploadKit。”

“UploadProgressRadial 和 UploadProgressOrbit 有什么区别？”

“创建一个路由处理程序，每次最多接收 4 张图片，每张 8MB。”

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

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

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