How do I run the UploadKit MCP server locally?

Run it with the command `npx -y @uploadkitdev/mcp` to start the MCP server for AI assistants.

Which AI coding assistants are compatible with this MCP server?

Compatible clients include Claude Code, Cursor, Windsurf, Zed, ChatGPT, and Claude.ai.

What environment variable is required to authenticate UploadKit API requests?

The `UPLOADKIT_API_KEY` environment variable must be set with your UploadKit API key.

Does UploadKit provide React components for file uploads?

Yes, it offers over 40 premium React upload components covering various UI styles and use cases.

Uploadkit

MCP server providing AI agents detailed knowledge of UploadKit's React upload components, Next.js handlers, BYOS storage, and docs.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "drumst0ck-uploadkit": {
      "command": "npx",
      "args": [
        "-y",
        "uploadkit"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

This MCP server enables AI coding assistants to access comprehensive information about UploadKit, including 40+ React upload components, Next.js route handler scaffolds, and Bring Your Own Storage (BYOS) setups for S3, R2, GCS, and B2. It supports full-text search across extensive documentation and can run locally via an npm package. Use it to integrate AI-assisted code generation and guidance for file upload features in web apps.

Use cases

Generate code for UploadKit React upload components

Scaffold Next.js API route handlers for uploads

Configure BYOS storage with S3, R2, GCS, or B2

Search UploadKit documentation programmatically

Enable AI assistants to assist in upload feature development

Key features

Knowledge of 40+ React upload components

Next.js App Router and Express/Hono handler scaffolds

Support for BYOS with major cloud storage providers

Full-text search across 88+ documentation pages

Local execution via npx @uploadkitdev/mcp

Capabilities & Tool Schemas

Inspect callable tools, capabilities, and parameters exposed to AI agents by Uploadkit.

Extracted Tool Capabilities

Knowledge of 40+ React upload components

Next.js App Router and Express/Hono handler scaffolds

Support for BYOS with major cloud storage providers

Full-text search across 88+ documentation pages

Local execution via npx @uploadkitdev/mcp

Documentation Overview

UploadKit

File uploads for developers. Beautifully.

Open-source TypeScript SDK + 40+ premium React components + managed storage on Cloudflare R2 — with BYOS (Bring Your Own Storage) mode so you can use your own S3, R2, GCS, or Backblaze B2 bucket. 5 GB free forever.

Website · Docs · Dashboard · Changelog

Quickstart — add to an existing project

Most people land here with a Next.js app already running. Three steps:

bash

pnpm add @uploadkitdev/react @uploadkitdev/next

Create app/api/uploadkit/[...uploadkit]/route.ts:

server.ts

import { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';

const router = {
  default: { maxFileSize: '4MB', allowedTypes: ['image/*'] },
} satisfies FileRouter;

export const { GET, POST } = createUploadKitHandler({
  router,
  apiKey: process.env.UPLOADKIT_API_KEY!,
});

Wrap the root layout and drop in a dropzone:

server.ts

// app/layout.tsx
import { UploadKitProvider } from '@uploadkitdev/react';
// <UploadKitProvider endpoint="/api/uploadkit">{children}</UploadKitProvider>

// any page
import { UploadDropzone } from '@uploadkitdev/react';
// <UploadDropzone route="default" />

Set UPLOADKIT_API_KEY=uk_live_... in .env.local and you're done. Full walkthrough: docs.uploadkit.dev/docs/getting-started/quickstart.

Or use the CLI (recommended)

Terminal

npx uploadkit init

Detects your framework, installs deps, creates the route handler, and wraps your layout — all in one command. See the CLI guide for details.

Starting a new project?

Terminal

npx create-uploadkit-app my-app

Templates for Next.js, SvelteKit, Remix, and Vite — see the CLI guide.

Using an AI-assistant IDE?

Install the UploadKit MCP server and let Claude Code, Cursor, Windsurf, or Zed wire the whole thing up for you:

Terminal

npx -y @uploadkitdev/mcp

Packages

Package	Version	Description
`@uploadkitdev/core`		Framework-agnostic upload client (browser, Node, Edge)
`@uploadkitdev/react`		40+ premium React upload components
`@uploadkitdev/next`		Next.js App Router handler + Express/Hono adapters
`@uploadkitdev/mcp`		Official MCP server for AI coding assistants
`create-uploadkit-app`		Scaffolder for new projects (Next, SvelteKit, Remix, Vite)

Component highlights

UploadKit ships 40+ components across 7 categories:

Classics — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview
Premium dropzones — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon
Specialty — UploadAvatar, UploadInlineChat (ChatGPT-style), UploadStepWizard (Stripe Checkout-style), UploadEnvelope (WeTransfer-style)
Motion / Progress — UploadProgressRadial, UploadProgressLiquid, UploadProgressOrbit, UploadCloudRain, UploadBento, UploadParticles, UploadDataStream (Matrix/Warp-style)
Galleries — UploadGalleryGrid, UploadPolaroid, UploadTimeline, UploadKanban, UploadStickyBoard

All are MIT-licensed, dark mode out of the box, themeable via CSS custom properties, and work with or without motion as a peer dep.

BYOS — Bring Your Own Storage

Use the same SDK against your own bucket — zero frontend changes, credentials stay server-side.

server.ts

import { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';
import { createR2Storage } from '@uploadkitdev/next/byos';

const router = {
  media: { maxFileSize: '8MB', maxFileCount: 4, allowedTypes: ['image/*'] },
} satisfies FileRouter;

export const { GET, POST } = createUploadKitHandler({
  router,
  storage: createR2Storage({
    accountId: process.env.CLOUDFLARE_R2_ACCOUNT_ID!,
    accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY!,
    bucket: process.env.CLOUDFLARE_R2_BUCKET!,
  }),
});

Supported providers: AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2.

AI-native — MCP server

UploadKit ships an official Model Context Protocol server so Claude Code, Cursor, Windsurf, Zed, ChatGPT, and Claude.ai can generate UploadKit code with first-class knowledge of every component and scaffold.

Stdio (IDE clients):

Terminal

npx -y @uploadkitdev/mcp

Remote HTTP (ChatGPT / Claude.ai web):

Code

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

Full setup: docs.uploadkit.dev/docs/guides/mcp · Source: packages/mcp · Registry: io.github.drumst0ck/uploadkit

Monorepo layout

Code

apps/
  web         Landing + pricing (uploadkit.dev)
  docs        Fumadocs site (docs.uploadkit.dev)
  dashboard   SaaS dashboard (app.uploadkit.dev)
  api         REST API + MCP remote endpoint (api.uploadkit.dev)
packages/
  core                  @uploadkitdev/core
  react                 @uploadkitdev/react
  next                  @uploadkitdev/next
  mcp                   @uploadkitdev/mcp (stdio MCP server)
  mcp-core              shared MCP tool surface (internal)
  create-uploadkit-app  scaffolder for new projects
  db                    MongoDB models
  emails                React Email templates
  shared                types, errors, utilities
  ui                    dashboard components
  config                shared tsconfig / eslint / tailwind base

Tech stack

Next.js 16 · React 19 · Tailwind CSS v4 · TypeScript 5 · MongoDB + Mongoose · Cloudflare R2 · Auth.js v5 · Stripe · Resend + React Email · Fumadocs · Turborepo · pnpm · Changesets.

Status

Version 1.0 shipped. Actively maintained. Issues and contributions are welcome on GitHub.

License

MIT © Drumst0ck and contributors.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

Package downloads in the last 30 days.

Last commit

2mo ago

Most recent push to the default branch.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Uploadkit

UploadKit supports AWS S3, Cloudflare R2, Google Cloud Storage, and Backblaze B2 for Bring Your Own Storage.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/drumst0ck-uploadkit?style=directory)](https://allmcps.com/mcp/drumst0ck-uploadkit)

HTML Embed

<a href="https://allmcps.com/mcp/drumst0ck-uploadkit"><img src="https://allmcps.com/api/badge/drumst0ck-uploadkit?style=directory" alt="Uploadkit on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

51Quality signal: Good · 51/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools23/30

Adoption & activity5/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 28d ago via OSV.dev · uploadkit (npm)

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Uploadkit →Install in Claude Desktop Install in Cursor Install in VS Code

Uploadkit

MCP server providing AI agents detailed knowledge of UploadKit's React upload components, Next.js handlers, BYOS storage, and docs.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "drumst0ck-uploadkit": {
      "command": "npx",
      "args": [
        "-y",
        "uploadkit"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Overview

Use cases

Generate code for UploadKit React upload components

Scaffold Next.js API route handlers for uploads

Configure BYOS storage with S3, R2, GCS, or B2

Search UploadKit documentation programmatically

Enable AI assistants to assist in upload feature development

Key features

Knowledge of 40+ React upload components

Next.js App Router and Express/Hono handler scaffolds

Support for BYOS with major cloud storage providers

Full-text search across 88+ documentation pages

Local execution via npx @uploadkitdev/mcp

Capabilities & Tool Schemas

Inspect callable tools, capabilities, and parameters exposed to AI agents by Uploadkit.

Extracted Tool Capabilities

Knowledge of 40+ React upload components

Next.js App Router and Express/Hono handler scaffolds

Support for BYOS with major cloud storage providers

Full-text search across 88+ documentation pages

Local execution via npx @uploadkitdev/mcp

Documentation Overview

UploadKit

File uploads for developers. Beautifully.

Website · Docs · Dashboard · Changelog

Quickstart — add to an existing project

Most people land here with a Next.js app already running. Three steps:

bash

pnpm add @uploadkitdev/react @uploadkitdev/next

Create app/api/uploadkit/[...uploadkit]/route.ts:

server.ts

import { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';

const router = {
  default: { maxFileSize: '4MB', allowedTypes: ['image/*'] },
} satisfies FileRouter;

export const { GET, POST } = createUploadKitHandler({
  router,
  apiKey: process.env.UPLOADKIT_API_KEY!,
});

Wrap the root layout and drop in a dropzone:

server.ts

// app/layout.tsx
import { UploadKitProvider } from '@uploadkitdev/react';
// <UploadKitProvider endpoint="/api/uploadkit">{children}</UploadKitProvider>

// any page
import { UploadDropzone } from '@uploadkitdev/react';
// <UploadDropzone route="default" />

Set UPLOADKIT_API_KEY=uk_live_... in .env.local and you're done. Full walkthrough: docs.uploadkit.dev/docs/getting-started/quickstart.

Or use the CLI (recommended)

Terminal

npx uploadkit init

Detects your framework, installs deps, creates the route handler, and wraps your layout — all in one command. See the CLI guide for details.

Starting a new project?

Terminal

npx create-uploadkit-app my-app

Templates for Next.js, SvelteKit, Remix, and Vite — see the CLI guide.

Using an AI-assistant IDE?

Install the UploadKit MCP server and let Claude Code, Cursor, Windsurf, or Zed wire the whole thing up for you:

Terminal

npx -y @uploadkitdev/mcp

Packages

Package	Version	Description
`@uploadkitdev/core`		Framework-agnostic upload client (browser, Node, Edge)
`@uploadkitdev/react`		40+ premium React upload components
`@uploadkitdev/next`		Next.js App Router handler + Express/Hono adapters
`@uploadkitdev/mcp`		Official MCP server for AI coding assistants
`create-uploadkit-app`		Scaffolder for new projects (Next, SvelteKit, Remix, Vite)

Component highlights

UploadKit ships 40+ components across 7 categories:

Classics — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview
Premium dropzones — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon
Specialty — UploadAvatar, UploadInlineChat (ChatGPT-style), UploadStepWizard (Stripe Checkout-style), UploadEnvelope (WeTransfer-style)
Motion / Progress — UploadProgressRadial, UploadProgressLiquid, UploadProgressOrbit, UploadCloudRain, UploadBento, UploadParticles, UploadDataStream (Matrix/Warp-style)
Galleries — UploadGalleryGrid, UploadPolaroid, UploadTimeline, UploadKanban, UploadStickyBoard

All are MIT-licensed, dark mode out of the box, themeable via CSS custom properties, and work with or without motion as a peer dep.

BYOS — Bring Your Own Storage

Use the same SDK against your own bucket — zero frontend changes, credentials stay server-side.

server.ts

import { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';
import { createR2Storage } from '@uploadkitdev/next/byos';

const router = {
  media: { maxFileSize: '8MB', maxFileCount: 4, allowedTypes: ['image/*'] },
} satisfies FileRouter;

export const { GET, POST } = createUploadKitHandler({
  router,
  storage: createR2Storage({
    accountId: process.env.CLOUDFLARE_R2_ACCOUNT_ID!,
    accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY!,
    bucket: process.env.CLOUDFLARE_R2_BUCKET!,
  }),
});

Supported providers: AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2.

AI-native — MCP server

Stdio (IDE clients):

Terminal

npx -y @uploadkitdev/mcp

Remote HTTP (ChatGPT / Claude.ai web):

Code

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

Full setup: docs.uploadkit.dev/docs/guides/mcp · Source: packages/mcp · Registry: io.github.drumst0ck/uploadkit

Monorepo layout

Code

apps/
  web         Landing + pricing (uploadkit.dev)
  docs        Fumadocs site (docs.uploadkit.dev)
  dashboard   SaaS dashboard (app.uploadkit.dev)
  api         REST API + MCP remote endpoint (api.uploadkit.dev)
packages/
  core                  @uploadkitdev/core
  react                 @uploadkitdev/react
  next                  @uploadkitdev/next
  mcp                   @uploadkitdev/mcp (stdio MCP server)
  mcp-core              shared MCP tool surface (internal)
  create-uploadkit-app  scaffolder for new projects
  db                    MongoDB models
  emails                React Email templates
  shared                types, errors, utilities
  ui                    dashboard components
  config                shared tsconfig / eslint / tailwind base

Tech stack

Next.js 16 · React 19 · Tailwind CSS v4 · TypeScript 5 · MongoDB + Mongoose · Cloudflare R2 · Auth.js v5 · Stripe · Resend + React Email · Fumadocs · Turborepo · pnpm · Changesets.

Status

Version 1.0 shipped. Actively maintained. Issues and contributions are welcome on GitHub.

License

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

npm downloads

Package downloads in the last 30 days.

Last commit

2mo ago

Most recent push to the default branch.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Uploadkit

UploadKit supports AWS S3, Cloudflare R2, Google Cloud Storage, and Backblaze B2 for Bring Your Own Storage.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/drumst0ck-uploadkit?style=directory)](https://allmcps.com/mcp/drumst0ck-uploadkit)

HTML Embed

<a href="https://allmcps.com/mcp/drumst0ck-uploadkit"><img src="https://allmcps.com/api/badge/drumst0ck-uploadkit?style=directory" alt="Uploadkit on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

51Quality signal: Good · 51/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools23/30

Adoption & activity5/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 28d ago via OSV.dev · uploadkit (npm)

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Uploadkit →Install in Claude Desktop Install in Cursor Install in VS Code