UploadKit

開発者のためのファイルアップロード。美しく。

オープンソースのTypeScript SDK + 40以上のプレミアムReactコンポーネント + Cloudflare R2でのマネージドストレージ。BYOS（Bring Your Own Storage）モードにより、独自のS3、R2、GCS、またはBackblaze B2バケットを使用可能です。5GBまで永久無料。

ウェブサイト · ドキュメント · ダッシュボード · Discord · 変更履歴

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

クイックスタート — 既存プロジェクトへの追加

ほとんどの方は、すでにNext.jsアプリが動作している環境から開始されます。3つのステップで完了します：

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

フレームワークを検出し、依存関係をインストールし、ルートハンドラーを作成し、レイアウトをラップします。すべて1つのコマンドで実行可能です。詳細は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

パッケージ

コンポーネントのハイライト

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

モノレポ構成

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 および貢献者。

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers

Tools

• get_byos_configA
• get_componentA
• get_docA
• get_install_commandA
• get_quickstartA
• list_componentsA
• list_docsA
• scaffold_providerA