uploadkit

@uploadkitdev/mcp

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（Bring Your Own Storage）を設定する方法
• 使用するパッケージマネージャーに応じたインストールコマンド

設定は不要です。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	1 つのコンポーネントの詳細なメタデータと使用例を取得します
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 の違いは何ですか？」

「8MB の画像を最大 4 枚受け付けるルートハンドラーを作成してください。」

---

ライセンス

MIT