VOOZH about

URL: https://glama.ai/mcp/servers/drumst0ck/uploadkit?locale=zh-CN

⇱ Uploadkit by drumst0ck | Glama

UploadKit

为开发者打造的文件上传服务。优雅且美观。

开源 TypeScript SDK + 40 多个高级 React 组件 + 基于 Cloudflare R2 的托管存储 — 支持 BYOS（自带存储）模式，因此您可以使用自己的 S3、R2、GCS 或 Backblaze B2 存储桶。5 GB 永久免费。

网站 · 文档 · 仪表盘 · Discord · 更新日志

👁 npm: @uploadkitdev/react
👁 npm: @uploadkitdev/mcp
👁 Glama MCP score
👁 Awesome MCP Servers

快速入门 — 添加到现有项目

大多数用户是在已有 Next.js 应用的情况下开始的。只需三步：

pnpm add @uploadkitdev/react @uploadkitdev/next

创建 app/api/uploadkit/[...uploadkit]/route.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!,
});

包裹根布局并放入一个拖拽区域：

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

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

在 .env.local 中设置 UPLOADKIT_API_KEY=uk_live_...，大功告成。完整指南：docs.uploadkit.dev/docs/getting-started/quickstart。

或者使用 CLI（推荐）

npx uploadkit init

自动检测您的框架、安装依赖、创建路由处理程序并包裹您的布局 — 一条命令即可完成。详情请参阅 CLI 指南。

正在启动新项目？

npx create-uploadkit-app my-app

提供 Next.js、SvelteKit、Remix 和 Vite 的模板 — 请参阅 CLI 指南。

使用 AI 辅助 IDE？

安装 UploadKit MCP 服务器，让 Claude Code、Cursor、Windsurf 或 Zed 为您完成所有配置：

npx -y @uploadkitdev/mcp

Related MCP server: mintlify-mcp

软件包

软件包

版本

描述

@uploadkitdev/core

👁 npm

框架无关的上传客户端（浏览器、Node、Edge）

@uploadkitdev/react

👁 npm

40 多个高级 React 上传组件

@uploadkitdev/next

👁 npm

Next.js App Router 处理程序 + Express/Hono 适配器

@uploadkitdev/mcp

👁 npm

用于 AI 编码助手的官方 MCP 服务器

create-uploadkit-app

👁 npm

新项目脚手架（Next、SvelteKit、Remix、Vite）

组件亮点

UploadKit 提供了 7 个类别的 40 多个组件：

  • 经典组件 — UploadButton、UploadDropzone、UploadModal、FileList、FilePreview

  • 高级拖拽区域 — Glass (Vercel/Linear 风格)、Aurora (Apple 风格)、Terminal (Raycast 风格)、Brutal (新野兽派风格)、Minimal、Neon

  • 特色组件 — UploadAvatar、UploadInlineChat (ChatGPT 风格)、UploadStepWizard (Stripe Checkout 风格)、UploadEnvelope (WeTransfer 风格)

  • 动效/进度 — UploadProgressRadial、UploadProgressLiquid、UploadProgressOrbit、UploadCloudRain、UploadBento、UploadParticles、UploadDataStream (Matrix/Warp 风格)

  • 画廊 — UploadGalleryGrid、UploadPolaroid、UploadTimeline、UploadKanban、UploadStickyBoard

所有组件均采用 MIT 许可，开箱即用支持深色模式，可通过 CSS 自定义属性进行主题化，并且可以在有或没有 motion 作为对等依赖的情况下工作。

BYOS — 自带存储

使用相同的 SDK 连接您自己的存储桶 — 前端无需任何更改，凭据保留在服务器端。

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!,
 }),
});

支持的提供商：AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2。

AI 原生 — MCP 服务器

UploadKit 提供官方 Model Context Protocol 服务器，以便 Claude Code、Cursor、Windsurf、Zed、ChatGPT 和 Claude.ai 能够生成 UploadKit 代码，并具备对每个组件和脚手架的一流知识。

Stdio (IDE 客户端):

npx -y @uploadkitdev/mcp

远程 HTTP (ChatGPT / Claude.ai 网页版):

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

完整设置：docs.uploadkit.dev/docs/guides/mcp · 源码：packages/mcp · 注册表：io.github.drumst0ck/uploadkit

Monorepo 布局

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

技术栈

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。

状态

版本 1.0 已发布。积极维护中。欢迎社区成员加入 Discord。

许可

MIT © Drumst0ck 及贡献者。

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/drumst0ck/uploadkit'

If you have feedback or need assistance with the MCP directory API, please join our Discord server