{
  "markdown": "<div align=\"center\">\n\n# UploadKit\n\n**File uploads for developers. Beautifully.**\n\nOpen-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.\n\n[Website](https://uploadkit.dev) · [Docs](https://docs.uploadkit.dev) · [Dashboard](https://app.uploadkit.dev) · [Changelog](https://uploadkit.dev/changelog)\n\n[![npm: @uploadkitdev/react](https://img.shields.io/npm/v/@uploadkitdev/react?label=%40uploadkitdev%2Freact)](https://www.npmjs.com/package/@uploadkitdev/react) [![npm: @uploadkitdev/mcp](https://img.shields.io/npm/v/@uploadkitdev/mcp?label=%40uploadkitdev%2Fmcp)](https://www.npmjs.com/package/@uploadkitdev/mcp) [![Glama MCP score](https://glama.ai/mcp/servers/drumst0ck/uploadkit/badges/score.svg)](https://glama.ai/mcp/servers/drumst0ck/uploadkit) [![Awesome MCP Servers](https://awesome.re/mentioned-badge.svg)](https://github.com/punkpeye/awesome-mcp-servers)\n\n</div>\n\n---\n\n## Quickstart — add to an existing project\n\nMost people land here with a Next.js app already running. Three steps:\n\n```bash\npnpm add @uploadkitdev/react @uploadkitdev/next\n```\n\nCreate `app/api/uploadkit/[...uploadkit]/route.ts`:\n\n```ts\nimport { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';\n\nconst router = {\n  default: { maxFileSize: '4MB', allowedTypes: ['image/*'] },\n} satisfies FileRouter;\n\nexport const { GET, POST } = createUploadKitHandler({\n  router,\n  apiKey: process.env.UPLOADKIT_API_KEY!,\n});\n```\n\nWrap the root layout and drop in a dropzone:\n\n```tsx\n// app/layout.tsx\nimport { UploadKitProvider } from '@uploadkitdev/react';\n// <UploadKitProvider endpoint=\"/api/uploadkit\">{children}</UploadKitProvider>\n\n// any page\nimport { UploadDropzone } from '@uploadkitdev/react';\n// <UploadDropzone route=\"default\" />\n```\n\nSet `UPLOADKIT_API_KEY=uk_live_...` in `.env.local` and you're done. Full walkthrough: [docs.uploadkit.dev/docs/getting-started/quickstart](https://docs.uploadkit.dev/docs/getting-started/quickstart).\n\n### Or use the CLI (recommended)\n\n```bash\nnpx uploadkit init\n```\n\nDetects your framework, installs deps, creates the route handler, and wraps your layout — all in one command. See the [CLI guide](https://docs.uploadkit.dev/docs/guides/cli-existing-projects) for details.\n\n### Starting a new project?\n\n```bash\nnpx create-uploadkit-app my-app\n```\n\nTemplates for **Next.js**, **SvelteKit**, **Remix**, and **Vite** — see the [CLI guide](https://docs.uploadkit.dev/docs/guides/cli).\n\n### Using an AI-assistant IDE?\n\nInstall the [UploadKit MCP server](https://docs.uploadkit.dev/docs/guides/mcp) and let Claude Code, Cursor, Windsurf, or Zed wire the whole thing up for you:\n\n```bash\nnpx -y @uploadkitdev/mcp\n```\n\n---\n\n## Packages\n\n| Package | Version | Description |\n|---------|---------|-------------|\n| [`@uploadkitdev/core`](https://www.npmjs.com/package/@uploadkitdev/core) | ![npm](https://img.shields.io/npm/v/@uploadkitdev/core?label=%20) | Framework-agnostic upload client (browser, Node, Edge) |\n| [`@uploadkitdev/react`](https://www.npmjs.com/package/@uploadkitdev/react) | ![npm](https://img.shields.io/npm/v/@uploadkitdev/react?label=%20) | 40+ premium React upload components |\n| [`@uploadkitdev/next`](https://www.npmjs.com/package/@uploadkitdev/next) | ![npm](https://img.shields.io/npm/v/@uploadkitdev/next?label=%20) | Next.js App Router handler + Express/Hono adapters |\n| [`@uploadkitdev/mcp`](https://www.npmjs.com/package/@uploadkitdev/mcp) | ![npm](https://img.shields.io/npm/v/@uploadkitdev/mcp?label=%20) | Official MCP server for AI coding assistants |\n| [`create-uploadkit-app`](https://www.npmjs.com/package/create-uploadkit-app) | ![npm](https://img.shields.io/npm/v/create-uploadkit-app?label=%20) | Scaffolder for new projects (Next, SvelteKit, Remix, Vite) |\n\n## Component highlights\n\nUploadKit ships 40+ components across 7 categories:\n\n- **Classics** — `UploadButton`, `UploadDropzone`, `UploadModal`, `FileList`, `FilePreview`\n- **Premium dropzones** — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon\n- **Specialty** — `UploadAvatar`, `UploadInlineChat` (ChatGPT-style), `UploadStepWizard` (Stripe Checkout-style), `UploadEnvelope` (WeTransfer-style)\n- **Motion / Progress** — `UploadProgressRadial`, `UploadProgressLiquid`, `UploadProgressOrbit`, `UploadCloudRain`, `UploadBento`, `UploadParticles`, `UploadDataStream` (Matrix/Warp-style)\n- **Galleries** — `UploadGalleryGrid`, `UploadPolaroid`, `UploadTimeline`, `UploadKanban`, `UploadStickyBoard`\n\nAll are MIT-licensed, dark mode out of the box, themeable via CSS custom properties, and work with or without `motion` as a peer dep.\n\n## BYOS — Bring Your Own Storage\n\nUse the same SDK against your own bucket — zero frontend changes, credentials stay server-side.\n\n```ts\nimport { createUploadKitHandler, type FileRouter } from '@uploadkitdev/next';\nimport { createR2Storage } from '@uploadkitdev/next/byos';\n\nconst router = {\n  media: { maxFileSize: '8MB', maxFileCount: 4, allowedTypes: ['image/*'] },\n} satisfies FileRouter;\n\nexport const { GET, POST } = createUploadKitHandler({\n  router,\n  storage: createR2Storage({\n    accountId: process.env.CLOUDFLARE_R2_ACCOUNT_ID!,\n    accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID!,\n    secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY!,\n    bucket: process.env.CLOUDFLARE_R2_BUCKET!,\n  }),\n});\n```\n\nSupported providers: **AWS S3** · **Cloudflare R2** · **Google Cloud Storage** · **Backblaze B2**.\n\n## AI-native — MCP server\n\nUploadKit ships an official [Model Context Protocol](https://modelcontextprotocol.io) server so Claude Code, Cursor, Windsurf, Zed, ChatGPT, and Claude.ai can generate UploadKit code with first-class knowledge of every component and scaffold.\n\n**Stdio (IDE clients):**\n```bash\nnpx -y @uploadkitdev/mcp\n```\n\n**Remote HTTP (ChatGPT / Claude.ai web):**\n```\nhttps://api.uploadkit.dev/api/v1/mcp\n```\n\nFull setup: [docs.uploadkit.dev/docs/guides/mcp](https://docs.uploadkit.dev/docs/guides/mcp) · Source: [`packages/mcp`](./packages/mcp) · Registry: [`io.github.drumst0ck/uploadkit`](https://registry.modelcontextprotocol.io)\n\n## Monorepo layout\n\n```\napps/\n  web         Landing + pricing (uploadkit.dev)\n  docs        Fumadocs site (docs.uploadkit.dev)\n  dashboard   SaaS dashboard (app.uploadkit.dev)\n  api         REST API + MCP remote endpoint (api.uploadkit.dev)\npackages/\n  core                  @uploadkitdev/core\n  react                 @uploadkitdev/react\n  next                  @uploadkitdev/next\n  mcp                   @uploadkitdev/mcp (stdio MCP server)\n  mcp-core              shared MCP tool surface (internal)\n  create-uploadkit-app  scaffolder for new projects\n  db                    MongoDB models\n  emails                React Email templates\n  shared                types, errors, utilities\n  ui                    dashboard components\n  config                shared tsconfig / eslint / tailwind base\n```\n\n## Tech stack\n\nNext.js 16 · React 19 · Tailwind CSS v4 · TypeScript 5 · MongoDB + Mongoose · Cloudflare R2 · Auth.js v5 · Stripe · Resend + React Email · Fumadocs · Turborepo · pnpm · Changesets.\n\n## Status\n\nVersion 1.0 shipped. Actively maintained. Issues and contributions are welcome on [GitHub](https://github.com/drumst0ck/uploadkit).\n\n## License\n\nMIT © [Drumst0ck](https://github.com/drumst0ck) and contributors.\n",
  "bytes": 7454,
  "sha": "c512eeb53d72d07ebb29d2e3465b04500a26158a64997796ffb863263666a47d",
  "repo_slug": "drumst0ck/uploadkit",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_drumst0ck_uploadkit_30c97b3d/readme"
}