UploadKit

Datei-Uploads für Entwickler. Wunderschön.

Open-Source TypeScript SDK + 40+ Premium-React-Komponenten + verwalteter Speicher auf Cloudflare R2 — mit BYOS-Modus (Bring Your Own Storage), damit Sie Ihren eigenen S3-, R2-, GCS- oder Backblaze B2-Bucket verwenden können. 5 GB für immer kostenlos.

Website · Dokumentation · Dashboard · Discord · Changelog

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

Schnellstart — zu einem bestehenden Projekt hinzufügen

Die meisten Nutzer landen hier mit einer bereits laufenden Next.js-App. Drei Schritte:

pnpm add @uploadkitdev/react @uploadkitdev/next

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

Umschließen Sie das Root-Layout und fügen Sie eine Dropzone hinzu:

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

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

Setzen Sie UPLOADKIT_API_KEY=uk_live_... in .env.local und Sie sind fertig. Vollständige Anleitung: docs.uploadkit.dev/docs/getting-started/quickstart.

Oder verwenden Sie die CLI (empfohlen)

npx uploadkit init

Erkennt Ihr Framework, installiert Abhängigkeiten, erstellt den Route-Handler und umschließt Ihr Layout — alles mit einem Befehl. Siehe den CLI-Leitfaden für Details.

Starten Sie ein neues Projekt?

npx create-uploadkit-app my-app

Vorlagen für Next.js, SvelteKit, Remix und Vite — siehe den CLI-Leitfaden.

Verwenden Sie eine KI-gestützte IDE?

Installieren Sie den UploadKit MCP-Server und lassen Sie Claude Code, Cursor, Windsurf oder Zed die gesamte Einrichtung für Sie übernehmen:

npx -y @uploadkitdev/mcp

Related MCP server: mintlify-mcp

Pakete

Komponenten-Highlights

UploadKit liefert 40+ Komponenten in 7 Kategorien:

• Klassiker — UploadButton, UploadDropzone, UploadModal, FileList, FilePreview

• Premium-Dropzones — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon

• Spezialitäten — UploadAvatar, UploadInlineChat (ChatGPT-Stil), UploadStepWizard (Stripe Checkout-Stil), UploadEnvelope (WeTransfer-Stil)

• Bewegung / Fortschritt — UploadProgressRadial, UploadProgressLiquid, UploadProgressOrbit, UploadCloudRain, UploadBento, UploadParticles, UploadDataStream (Matrix/Warp-Stil)

• Galerien — UploadGalleryGrid, UploadPolaroid, UploadTimeline, UploadKanban, UploadStickyBoard

Alle sind MIT-lizenziert, unterstützen von Haus aus den Dark Mode, sind über CSS-Custom-Properties thematisierbar und funktionieren mit oder ohne motion als Peer-Abhängigkeit.

BYOS — Bring Your Own Storage

Verwenden Sie dasselbe SDK mit Ihrem eigenen Bucket — keine Änderungen am Frontend, Anmeldedaten bleiben serverseitig.

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

Unterstützte Anbieter: AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2.

KI-nativ — MCP-Server

UploadKit liefert einen offiziellen Model Context Protocol-Server, damit Claude Code, Cursor, Windsurf, Zed, ChatGPT und Claude.ai UploadKit-Code mit erstklassigem Wissen über jede Komponente und jedes Scaffold generieren können.

Stdio (IDE-Clients):

npx -y @uploadkitdev/mcp

Remote HTTP (ChatGPT / Claude.ai Web):

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

Vollständige Einrichtung: docs.uploadkit.dev/docs/guides/mcp · Quelle: packages/mcp · Registry: io.github.drumst0ck/uploadkit

Monorepo-Struktur

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 veröffentlicht. Aktiv gewartet. Community ist auf Discord willkommen.

Lizenz

MIT © Drumst0ck und Mitwirkende.

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