mcpField
U
uploadkit

uploadkit

Local
uploadkit.devDeveloper Tools3Updated 1d ago
RepositoryVisit website

About uploadkit

UploadKit MCP gives AI coding assistants access to UploadKit SDK documentation, component details, and setup scaffolds. It is intended for developers integrating UploadKit in Next.js projects, with searchable component information and BYOS configuration guidance.

Key features

  1. 01Browse and search 40+ components
  2. 02Retrieve component metadata and examples
  3. 03Scaffold Next.js route handlers
  4. 04Generate provider setup snippets
  5. 05Configure BYOS for S3, R2, GCS, and B2
  6. 06Provide install commands and quickstart

Use cases

  1. 01Find a suitable UploadKit component
  2. 02Set up a Next.js route handler
  3. 03Connect UploadKit to BYOS storage
  4. 04Look up SDK setup while coding

MCP support

The MCP server exposes tools for component discovery, installation, scaffolding, and BYOS configuration, plus catalog and quickstart resources. It can run locally through npx or as a read-only remote Streamable HTTP endpoint.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "drumst0ck-uploadkit": {
      "command": "npx",
      "args": [
        "-y",
        "@uploadkitdev/mcp"
      ]
    }
  }
}
Run commandnpx -y @uploadkitdev/mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@uploadkitdev/mcp0.3.1

Tools

11

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
categoryenumNoOptional filter.classic | dropzone | button | progress | motion | specialty | gallery

Details

From the project README

@uploadkitdev/mcp

npm version Glama MCP score Awesome MCP Servers Official MCP Registry

Model Context Protocol server for UploadKit — gives AI coding assistants (Claude Code, Cursor, Windsurf, Zed) first-class knowledge of the UploadKit SDK.

Your AI now knows:

  • Every one of UploadKit's 40+ React components (name, category, inspiration, usage)
  • How to scaffold the Next.js route handler
  • How to wire <UploadKitProvider> into the root layout
  • How to configure BYOS (Bring Your Own Storage) for S3, R2, GCS, or Backblaze B2
  • Which install command to run for your package manager

No config. No API key. Runs local via npx.

Remote MCP

For clients that cannot spawn npx (ChatGPT custom connectors, Claude.ai web, Smithery), UploadKit also exposes a Streamable HTTP endpoint:

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

Same 11-tool surface, read-only, no auth. Full setup: https://docs.uploadkit.dev/docs/guides/mcp#remote-mcp

Install

Add this to your MCP client config.

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

…or run: 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

Follow your editor's MCP docs. Command is always npx -y @uploadkitdev/mcp.

Tools

ToolWhat it does
list_componentsList all UploadKit components, filterable by category
get_componentFull metadata + usage example for one component
search_componentsKeyword search across names, descriptions, inspirations
get_install_commandReturns the right install command for your package manager
scaffold_route_handlerGenerates app/api/uploadkit/[...uploadkit]/route.ts
scaffold_providerSnippet to wire <UploadKitProvider> into layout.tsx
get_byos_configEnv + handler for S3 / R2 / GCS / B2
get_quickstartEnd-to-end Next.js quickstart

Resources

  • uploadkit://catalog — JSON of every component
  • uploadkit://quickstart — Next.js setup walkthrough

Example prompts once installed

"Add an Apple-style animated dropzone to this page."

"Set up UploadKit with Cloudflare R2 BYOS mode."

"What's the difference between UploadProgressRadial and UploadProgressOrbit?"

"Create a route handler that accepts up to 4 images of 8MB each."

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.