Uploadkit
UploadKit
Carga de archivos para desarrolladores. Con estilo.
SDK de TypeScript de código abierto + más de 40 componentes premium de React + almacenamiento gestionado en Cloudflare R2 — con modo BYOS (Trae tu propio almacenamiento) para que puedas usar tu propio bucket de S3, R2, GCS o Backblaze B2. 5 GB gratis para siempre.
Sitio web · Documentación · Panel de control · Discord · Registro de cambios
Inicio rápido — añadir a un proyecto existente
La mayoría de la gente llega aquí con una aplicación de Next.js ya en funcionamiento. Tres pasos:
pnpm add @uploadkitdev/react @uploadkitdev/nextCrea 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!,
});Envuelve el diseño raíz (root layout) e inserta una zona de arrastre (dropzone):
// app/layout.tsx
import { UploadKitProvider } from '@uploadkitdev/react';
// <UploadKitProvider endpoint="/api/uploadkit">{children}</UploadKitProvider>
// any page
import { UploadDropzone } from '@uploadkitdev/react';
// <UploadDropzone route="default" />Establece UPLOADKIT_API_KEY=uk_live_... en .env.local y listo. Tutorial completo: docs.uploadkit.dev/docs/getting-started/quickstart.
O usa la CLI (recomendado)
npx uploadkit initDetecta tu framework, instala las dependencias, crea el manejador de rutas y envuelve tu diseño — todo en un solo comando. Consulta la guía de la CLI para más detalles.
¿Comenzando un nuevo proyecto?
npx create-uploadkit-app my-appPlantillas para Next.js, SvelteKit, Remix y Vite — consulta la guía de la CLI.
¿Usas un IDE con asistente de IA?
Instala el servidor MCP de UploadKit y deja que Claude Code, Cursor, Windsurf o Zed configuren todo por ti:
npx -y @uploadkitdev/mcpRelated MCP server: Rendobar MCP Server
Paquetes
Paquete | Versión | Descripción |
Cliente de carga agnóstico al framework (navegador, Node, Edge) | ||
Más de 40 componentes de carga premium para React | ||
Manejador del App Router de Next.js + adaptadores para Express/Hono | ||
Servidor MCP oficial para asistentes de programación por IA | ||
Generador de proyectos nuevos (Next, SvelteKit, Remix, Vite) |
Aspectos destacados de los componentes
UploadKit incluye más de 40 componentes en 7 categorías:
Clásicos —
UploadButton,UploadDropzone,UploadModal,FileList,FilePreviewZonas de arrastre premium — Glass (Vercel/Linear), Aurora (Apple), Terminal (Raycast), Brutal (Neo-brutalist), Minimal, Neon
Especializados —
UploadAvatar,UploadInlineChat(estilo ChatGPT),UploadStepWizard(estilo Stripe Checkout),UploadEnvelope(estilo WeTransfer)Movimiento / Progreso —
UploadProgressRadial,UploadProgressLiquid,UploadProgressOrbit,UploadCloudRain,UploadBento,UploadParticles,UploadDataStream(estilo Matrix/Warp)Galerías —
UploadGalleryGrid,UploadPolaroid,UploadTimeline,UploadKanban,UploadStickyBoard
Todos tienen licencia MIT, modo oscuro integrado, son personalizables mediante propiedades personalizadas de CSS y funcionan con o sin motion como dependencia complementaria.
BYOS — Trae tu propio almacenamiento
Usa el mismo SDK con tu propio bucket — cero cambios en el frontend, las credenciales permanecen en el lado del servidor.
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!,
}),
});Proveedores compatibles: AWS S3 · Cloudflare R2 · Google Cloud Storage · Backblaze B2.
IA nativa — Servidor MCP
UploadKit incluye un servidor oficial del Protocolo de Contexto de Modelo para que Claude Code, Cursor, Windsurf, Zed, ChatGPT y Claude.ai puedan generar código de UploadKit con un conocimiento de primer nivel de cada componente y estructura.
Stdio (clientes IDE):
npx -y @uploadkitdev/mcpHTTP remoto (web de ChatGPT / Claude.ai):
https://api.uploadkit.dev/api/v1/mcpConfiguración completa: docs.uploadkit.dev/docs/guides/mcp · Fuente: packages/mcp · Registro: io.github.drumst0ck/uploadkit
Estructura del 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 baseStack tecnológico
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.
Estado
Versión 1.0 lanzada. Mantenimiento activo. La comunidad es bienvenida en Discord.
Licencia
MIT © Drumst0ck y colaboradores.
Available Tools
11 toolsget_byos_configA
Generate Bring-Your-Own-Storage (BYOS) configuration for an UploadKit Next.js handler — environment variables, handler code, and setup notes for a specific storage provider.
When to use: the user wants to store uploads in their own cloud bucket instead of UploadKit's managed R2. Typical triggers: compliance/data-residency requirements, existing bucket infra, desire to avoid vendor lock-in.
Returns: a plain-text string with three sections — provider-specific notes, the .env variable block, and the TypeScript handler code. Credentials are always server-side; the browser never sees them. Read-only, deterministic. No network calls, no secrets exposed.
| Name | Required | Description | Default |
|---|---|---|---|
| provider | Yes | The storage provider to configure. "s3" = AWS S3 (watch egress costs). "r2" = Cloudflare R2 (recommended — zero egress fees). "gcs" = Google Cloud Storage via HMAC interop. "b2" = Backblaze B2 (S3-compatible, cheap egress). Choose based on where the user's bucket already lives. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden and exceeds expectations. It explicitly states 'Read-only, deterministic. No network calls, no secrets exposed' and clarifies that credentials are server-side. This discloses safety and side-effect behavior thoroughly.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a lead definition, a 'When to use' section, and a 'Returns' section. It is front-loaded with the primary function, and every sentence adds value without unnecessary padding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter tool with no output schema and no annotations, the description covers purpose, usage triggers, return format (plain text with three sections), and behavioral traits (read-only, deterministic, no network). This is fully sufficient for an agent to select and invoke the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already provides 100% coverage with rich descriptions for each enum value (including recommendations like 'r2' = Cloudflare R2, zero egress fees). The description adds no additional parameter semantics beyond referencing 'a specific storage provider', so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Generate') and resource ('Bring-Your-Own-Storage (BYOS) configuration for an UploadKit Next.js handler'), and enumerates the output types (env vars, handler code, setup notes). This clearly distinguishes it from sibling tools like get_doc or list_components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
A dedicated 'When to use' section explicitly explains the intended scenario (user wants own bucket instead of managed R2) and lists typical triggers (compliance, existing infra, vendor lock-in). It implies when not to use (managed storage) but does not name alternative tools, so it falls short of a full 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_componentA
Fetch full metadata plus a ready-to-paste React usage example for one specific UploadKit component.
When to use: once you know the exact component name (from list_components or search_components) and need to show the user how to drop it into their code. The returned "usage" field is copy-pasteable TSX including the correct import line and the styles.css import.
Returns: JSON { name, category, description, inspiration, usage }. If the name does not match any component, returns a suggestion message with the 5 closest matches. Read-only, idempotent.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Exact PascalCase component name. Case-sensitive. Examples: "UploadDropzone", "UploadDropzoneAurora", "UploadProgressRadial", "UploadDataStream". Must match one of the names returned by list_components. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses read-only, idempotent behavior, the exact JSON return shape, and the fallback suggestion message for unmatched names. This goes beyond minimal expectations, though it could mention explicit side-effect absence.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is tightly written with a logical flow: purpose, when-to-use, return format, and error behavior. Every sentence earns its place with no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
This is a simple single-parameter read-only tool with no output schema, and the description covers all necessary context: what it returns, how to use it, error handling, and safety. No significant information gaps remain.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides thorough parameter details (case-sensitive, PascalCase, examples), and the description adds contextual guidance on sourcing the name from list_components or search_components. This enhances the parameter's meaning beyond the schema alone.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool fetches full metadata and a copy-pasteable React usage example for one specific UploadKit component. It distinguishes from sibling listing/searching tools by specifying 'one specific' and referencing how to obtain the exact name.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description includes an explicit 'When to use' section: once the exact component name is known from list_components or search_components and a ready-to-paste example is needed. This clearly differentiates when to use this tool over alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_docA
Fetch the full markdown content of a single UploadKit docs page by its path, formatted with title, description, source URL, and the body.
When to use: after search_docs identifies a relevant page and you need its full contents to answer a deep question — prefer search_docs first, then get_doc on the top result. Reading the full page avoids relying on snippets that may omit critical context (callbacks, env vars, edge cases).
Returns: a plain-text string — "# {title}\n\n> {description}\n\nSource: {url}\n\n---\n\n{content}". If the path is unknown, returns a not-found message suggesting list_docs. Read-only, idempotent.
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Docs page path relative to /docs, WITHOUT leading slash and WITHOUT .mdx extension. Examples: "core-concepts/byos", "sdk/next/middleware", "api-reference/rest-api", "guides/avatar-upload". Get valid paths from search_docs results (the "path" field) or list_docs. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It explicitly discloses read-only and idempotent behavior, the exact return format, and the not-found message. It doesn't cover potential errors or network behaviors, but provides strong transparency for the expected use case.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with clear sections: what it does, when to use, and what it returns. It is concise, front-loaded, and contains no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite having no output schema, the description fully explains the return format and the not-found behavior. It also covers usage context and alternatives, making it complete for a simple docs-fetching tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description for 'path' is already very detailed (100% coverage) with examples and formatting rules. The tool description itself does not add new parameter semantics beyond restating 'by its path' and the context in which to obtain the path, so the baseline of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it fetches the full markdown content of a single UploadKit docs page by path, including formatting details. This distinguishes it from sibling tools like search_docs and list_docs, making the purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says to use it after search_docs identifies a relevant page, and advises preferring search_docs first. It also mentions the not-found fallback to list_docs, providing clear when-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_install_commandA
Return the exact shell command to install UploadKit packages for a given package manager.
When to use: before asking the user to add dependencies — match their package manager (detect from the presence of pnpm-lock.yaml / package-lock.json / yarn.lock / bun.lockb if you can, otherwise ask or default to pnpm). Saves you from guessing pnpm vs npm vs yarn vs bun syntax.
Returns: a plain-text shell command as a single string (e.g. "pnpm add @uploadkitdev/react @uploadkitdev/next"). Read-only, idempotent, never modifies anything.
| Name | Required | Description | Default |
|---|---|---|---|
| packageManager | No | Which package manager's syntax to output. Default: "pnpm". Pick the one the user's project actually uses — check their lockfile. | pnpm |
| packages | No | Which UploadKit packages to install. Omit to get the default full-stack set: ["@uploadkitdev/react", "@uploadkitdev/next"]. Pass a subset to scope the command, e.g. ["@uploadkitdev/core"] for a framework-agnostic project, or ["@uploadkitdev/react"] for a React app without Next.js. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description fully discloses the tool's safety profile: 'Read-only, idempotent, never modifies anything.' It also specifies the return format (a plain-text shell command as a single string), which is essential behavioral context beyond the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and well-structured: each paragraph serves a distinct purpose (what it does, when to use, what it returns). It is front-loaded with the main verb and resource, and every sentence adds value without redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple (2 optional params, no output schema), and the description covers both the return value and the operational context. It explains when and how to use the parameters (e.g., detecting package manager from lockfile) and explicitly states the read-only behavior, making it complete for an agent to invoke correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% for both parameters, with detailed explanations, examples, and enums. The description itself adds little beyond the schema, only repeating the package manager concept and providing an example command. Baseline 3 is appropriate when the schema carries the parameter semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Return') and resource ('exact shell command to install UploadKit packages'), clearly distinguishing it from siblings that fetch components or docs. It also includes a concrete example command, leaving no ambiguity about the tool's function.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says when to use the tool ('before asking the user to add dependencies') and even provides detection guidance for package managers. It does not explicitly mention when-not-to-use or alternatives, but given that sibling tools are unrelated, the context is clear enough.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_quickstartA
Return the complete UploadKit quickstart walkthrough for Next.js — install, API key env, route handler, provider, first component, optional BYOS — in one markdown document.
When to use: the user is brand new to UploadKit and asks "how do I get started?", "set this up for me", or any variation that signals zero prior context. Prefer scaffold_route_handler + scaffold_provider + get_install_command when you already know which specific step they need.
Returns: a plain-text markdown document. Takes no parameters. Read-only, static content, idempotent.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full responsibility for behavioral disclosure. It explicitly states 'Read-only, static content, idempotent' and specifies the return type ('plain-text markdown document'), which covers the key behavioral aspects. However, it doesn't mention any authentication/network requirements, though for static content retrieval this may not be critical.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Each sentence earns its place: purpose in first sentence, usage guidance in second, return type and safety in third. The description is well-structured with 'When to use' and 'Returns' labels, making it easy to scan and parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple static content tool with no parameters and no output schema, the description is fully complete. It covers what it does, when to use it, alternatives, return format, and behavioral traits. No gaps remain.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has zero parameters, so the baseline is 4 per the rubric. The description adds clear confirmation with 'Takes no parameters,' which is sufficient for parameter semantics since there is nothing to explain.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool returns a complete UploadKit quickstart walkthrough for Next.js, specifying content components (install, API key env, route handler, provider, first component, optional BYOS). It also distinguishes itself from siblings by explicitly referencing alternative tools for more targeted use cases.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides explicit when-to-use cues: 'user is brand new to UploadKit and asks how do I get started?' and explicitly names alternative tools (scaffold_route_handler, scaffold_provider, get_install_command) for when a specific step is known. This is the gold standard for usage guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsA
List every React upload component shipped by @uploadkitdev/react with its name, category, one-line description, and design inspiration.
When to use: before recommending or scaffolding any UploadKit component, to confirm the exact name exists and to pick the right variant for the user's context (e.g. browse all "dropzone" variants when the user wants a drag-and-drop area).
Returns: JSON { count, components: [{ name, category, description, inspiration }] }. Read-only, no side effects, idempotent.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Optional filter. Narrows the list to one category. Omit to get every component. Values: "classic" (the original 5 primitives like UploadButton/UploadDropzone), "dropzone" (styled drag-and-drop variants), "button" (styled button variants with motion), "progress" (upload progress indicators), "motion" (motion-forward visualizations like data streams, particles), "specialty" (avatars, chat composers, wizards, envelopes), "gallery" (multi-file layouts like grid, timeline, kanban). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full transparency burden. It explicitly states 'Read-only, no side effects, idempotent' and also describes the return JSON structure, covering behavior and impact thoroughly.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences: purpose, when-to-use, and return/behavior. It is front-loaded with the main action, every sentence has a distinct role, and there is no fluff or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite lacking an output schema, the description explicitly states the return format. For a simple one-parameter list operation, it covers purpose, use context, side-effect profile, and return structure—fully sufficient for an agent to select and invoke correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema provides 100% coverage with a detailed enum description for the optional category parameter. The description adds little beyond the schema (only a passing example of 'dropzone' variants), so it neither enhances nor detracts from the schema-provided semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: 'List every React upload component shipped by @uploadkitdev/react with its name, category, one-line description, and design inspiration.' This clearly distinguishes it from siblings like get_component (single component) and search_components (search vs. full list).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description includes an explicit 'When to use' clause: 'before recommending or scaffolding any UploadKit component, to confirm the exact name exists and to pick the right variant.' This provides clear usage context but does not explicitly name alternatives or exclusions (e.g., when to prefer search_components).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_docsA
Enumerate every available UploadKit docs page with title, description, URL, and path.
When to use: to discover what documentation exists before targeted searching, or to orient yourself around the shape of the docs site. Prefer search_docs when you already have a concrete question.
Returns: JSON { count, generatedAt, pages: [{ path, url, title, description }] }. Pages are sorted alphabetically by path. Read-only, static at bundle time, idempotent.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full transparency burden. It explicitly states the tool is read-only, static at bundle time, and idempotent. It also discloses the return format ('JSON { count, generatedAt, pages: [...] }') and sorting behavior ('sorted alphabetically by path').
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and well-organized with labeled sections ('When to use', 'Returns'). Every sentence adds value, and there is no redundant information. It is appropriately sized for the tool's simplicity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a no-parameter, read-only listing tool, the description is complete. It explains the return structure, sorting, and the tool's role in the broader docs workflow. No output schema exists, but the description compensates by detailing the JSON response. The sibling context shows it is one of several docs tools, and this description positions it appropriately.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so schema coverage is 100% and there is nothing to document. The baseline for 0 params is 4, and the description adds no parameter details because none exist. It still provides context about the output fields (title, description, URL, path) which ties to what the function returns.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool enumerates all docs pages with specific fields (title, description, URL, path). It uses a precise verb 'enumerate' and resource, and explicitly differentiates from search_docs by stating when to prefer it.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use this tool ('to discover what documentation exists before targeted searching, or to orient yourself around the shape of the docs site') and names an alternative ('Prefer search_docs when you already have a concrete question'). This is model guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
scaffold_providerA
Return a ready-to-paste snippet that wraps the Next.js root layout with <UploadKitProvider> so React components can talk to the upload route handler.
When to use: right after scaffold_route_handler, to complete the wiring. The snippet goes in app/layout.tsx. Without the provider, UploadKit React components throw at runtime.
Returns: a plain-text string containing a short explanatory note followed by a fenced tsx code block. Takes no parameters — the endpoint path is always /api/uploadkit since that is what scaffold_route_handler produces. Read-only, deterministic, idempotent.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description fully discloses behavior: read-only, deterministic, idempotent, and the exact return format (plain-text string with a fenced tsx code block). It also clarifies that no parameters are needed and the endpoint path is fixed, providing transparency about internal assumptions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise yet complete, structured into clear sections (purpose, when to use, return format). Every sentence adds useful information with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no parameters and no output schema, the description provides all necessary context: what it does, when to use it, what it returns, and its safety profile. It is fully self-contained and leaves no significant gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the baseline is 4, but the description adds meaningful context by explaining why no parameters are needed: 'the endpoint path is always /api/uploadkit since that is what scaffold_route_handler produces.' This goes beyond the empty schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states it returns a snippet wrapping the Next.js root layout with <UploadKitProvider> for React components to talk to the upload route handler. This is specific and distinguishes it from scaffold_route_handler, which generates the route handler itself.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says 'When to use: right after scaffold_route_handler' and explains the consequence of not using it ('UploadKit React components throw at runtime'). This gives clear context and implicitly excludes use before the route handler exists.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
scaffold_route_handlerA
Generate the complete file content for a Next.js App Router upload route handler — typed file router, handler export, correct path comment.
When to use: when the user is setting up UploadKit server-side in a Next.js App Router project and needs the app/api/uploadkit/[...uploadkit]/route.ts file created. The returned string is a complete, compilable TypeScript file — write it to disk as-is.
Returns: a markdown-formatted string containing the target path and the complete TS source inside a fenced code block. You must create the file at the literal path app/api/uploadkit/[...uploadkit]/route.ts. Read-only — generates text, never touches the filesystem itself.
| Name | Required | Description | Default |
|---|---|---|---|
| routeName | Yes | The key for this file route in the `FileRouter` object. This exact string is what consumers pass as the `route` prop on components (e.g. `<UploadDropzone route="media" />`). Use a short lowercase identifier matching the file-category — examples: "media" for a general images+videos endpoint, "avatar" for user profile pictures, "attachments" for message/ticket attachments, "documents" for PDFs. | |
| maxFileSize | No | Maximum allowed size per uploaded file, expressed with a unit suffix. Examples: "4MB" (default), "512KB", "1GB", "100MB". Omit to use the default of "4MB". Rejects uploads larger than this value with a 413 response. | |
| allowedTypes | No | MIME types (or wildcard patterns) that this route accepts. Examples: ["image/*"] (default — any image), ["image/jpeg", "image/png"] (two specific types), ["application/pdf"] (PDF only), ["image/*", "video/mp4"] (images plus MP4). Omit for the default of ["image/*"]. Rejects mismatched uploads with a 415 response. | |
| maxFileCount | No | Maximum number of files per single upload request. Default: 1. Set to a larger number to enable multi-file drag-and-drop (e.g. 10 for gallery uploaders). Must be >= 1. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description fully bears the burden of behavioral disclosure. It clearly states the tool is 'Read-only — generates text, never touches the filesystem itself', describes the return format (markdown string with code fence), and sets the expectation that the agent must write the file to disk. This is comprehensive transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and well-structured: purpose in the first sentence, usage trigger in the second, return format and expected action in the third, and a clear read-only caveat in the fourth. Every sentence earns its place with no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite the absence of an output schema and annotations, the description covers all necessary context: what the tool produces, how it should be used, what the agent must do with the result, and the tool's non-destructive nature. For a file-generation tool, this is fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The tool description itself does not add parameter-specific meaning; the rich examples and defaults (e.g., routeName key, maxFileSize units) are already in the input schema. No additional value is contributed by the description beyond what the schema already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a precise verb and resource: 'Generate the complete file content for a Next.js App Router upload route handler', and lists concrete features (typed file router, handler export, correct path comment). It clearly distinguishes from sibling tools like scaffold_provider by naming the exact target file and framework context.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives an explicit 'When to use' clause: when setting up UploadKit server-side in a Next.js App Router project and needing the route.ts file. It also tells the agent the exact path to write to and clarifies that the tool itself is read-only, leaving the file creation to the agent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsA
Fuzzy-search the UploadKit component catalog by any free-text keyword — component name, category, description, or design inspiration (e.g. "apple", "stripe", "vercel", "terminal", "progress ring", "kanban board", "matrix").
When to use: the user describes the vibe or use case but does not know the component name yet ("I want something like Stripe Checkout", "show me Apple-style uploaders"). Prefer this over list_components when the goal is discovery rather than enumeration.
Returns: JSON { query, count, matches: [{ name, category, description, inspiration }] }. Read-only, idempotent, case-insensitive.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Free-text search string. Case-insensitive substring match against name, category, description, and inspiration fields. Examples: "terminal", "apple", "progress ring", "kanban", "vercel", "matrix". |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description takes on the responsibility. It discloses 'Read-only, idempotent, case-insensitive' and specifies the exact JSON return format, providing solid transparency. Minor omissions like pagination or result limits are acceptable for a search tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is moderately long but well-structured with clear sections (core function, when to use, return format). It front-loads the purpose and uses whitespace effectively. A few redundant phrases could be trimmed, but overall efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Considering the lack of annotations and output schema, the description provides comprehensive context: purpose, usage guidance, return structure, and safety profile. It fully equips an agent to decide when and how to invoke the tool, including distinguishing from siblings.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds value by introducing the fuzzy-search concept, the 'design inspiration' interpretation, and examples like 'apple' and 'vercel' that go beyond the schema examples. This elevates it above baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Fuzzy-search the UploadKit component catalog by any free-text keyword' and enumerates the fields searched (name, category, description, inspiration). It distinguishes from sibling list_components by explicitly positioning it as discovery-focused.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Contains an explicit 'When to use' section with concrete example user queries and an explicit instruction to prefer this over list_components when the goal is discovery rather than enumeration. This directly addresses tool selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_docsA
Full-text search across every UploadKit docs page (88+ pages — getting-started, core-concepts, SDK reference, API reference, dashboard, guides). Ranks matches by keyword frequency in title, description, and body.
When to use: any question about UploadKit behaviour, configuration, or integration that the component tools do not answer — middleware, onUploadComplete callbacks, REST API endpoints, webhooks, presigned URLs, CSS theming variables, type-safety setup, migration from UploadThing, rate limits, etc.
Returns: JSON { query, count, indexGeneratedAt, matches: [{ path, url, title, description, snippet, score }] }. Sorted by score descending. Read-only. Bundled index (no network call) — results reflect docs at build time.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Free-text search query. Multiple words are ANDed with per-field weighting (title matches score highest). Examples: "middleware onUploadComplete", "theming css variables", "presigned url", "migration uploadthing". | |
| limit | No | Maximum number of matches to return. Default: 8. Range 1-50. Use smaller values (3-5) when you already have a narrow query; use larger values (15-20) for exploratory scans across the whole docs site. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden and discloses key behaviors: 'Read-only. Bundled index (no network call) — results reflect docs at build time.' It also explains ranking logic ('Ranks matches by keyword frequency') and the return format with sorted order, going beyond a basic read/write hint.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is organized into clear sections: scope, when to use, and return format. Every sentence adds value—no fluff. Despite moderate length, it remains focused and front-loaded with the core purpose, making it easy for an agent to quickly assess relevance.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema, the description thoroughly explains the return JSON structure with field names and sorting, plus metadata fields like query, count, and indexGeneratedAt. It covers use cases, behavior, limitations (build-time index), and parameter semantics, making it self-sufficient for an agent to invoke correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but the description adds valuable usage guidance: for limit it gives default, range, and context-specific advice ('Use smaller values (3-5) when you already have a narrow query; use larger values (15-20) for exploratory scans'); for query it explains ANDed multi-word behavior and per-field weighting with concrete examples. This significantly enriches schema definitions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states 'Full-text search across every UploadKit docs page (88+ pages)' with a specific verb and resource, covering all docs. It distinguishes itself from siblings like search_components and get_doc by clearly scoping to docs pages and listing covered categories (getting-started, SDK reference, etc.).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly provides a 'When to use' section: 'any question about UploadKit behaviour, configuration, or integration that the component tools do not answer — middleware, onUploadComplete callbacks, REST API endpoints...' This gives clear usage context and implies alternatives (component tools) without naming them directly, covering exclusions effectively.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
8 tool updates
v0.1.1- Changed
get_byos_config1 field changed- added
Input schema / properties / provider / descriptionAdded value: +"The storage provider to configure. \"s3\" = AWS S3 (watch egress costs). \"r2\" = Cloudflare R2 (recommended — zero egress fees). \"gcs\" = Google Cloud Storage via HMAC interop. \"b2\" = Backblaze B2 (S3-compatible, cheap egress). Choose based on where the user's bucket already lives."
- Changed
get_component1 field changed- changed
Input schema / properties / name / descriptionPrevious value: -"Exact component name, e.g. \"UploadDropzoneAurora\"."New value: +"Exact PascalCase component name. Case-sensitive. Examples: \"UploadDropzone\", \"UploadDropzoneAurora\", \"UploadProgressRadial\", \"UploadDataStream\". Must match one of the names returned by list_components."
- Changed
get_doc1 field changed- changed
Input schema / properties / path / descriptionPrevious value: -"Page path relative to /docs (no leading slash, no .mdx extension)."New value: +"Docs page path relative to /docs, WITHOUT leading slash and WITHOUT .mdx extension. Examples: \"core-concepts/byos\", \"sdk/next/middleware\", \"api-reference/rest-api\", \"guides/avatar-upload\". Get valid paths from search_docs results (the \"path\" field) or list_docs."
- Changed
get_install_command2 fields changed- added
Input schema / properties / packageManager / descriptionAdded value: +"Which package manager's syntax to output. Default: \"pnpm\". Pick the one the user's project actually uses — check their lockfile." - changed
Input schema / properties / packages / descriptionPrevious value: -"Which UploadKit packages to install. Default: [\"@uploadkitdev/react\", \"@uploadkitdev/next\"]."New value: +"Which UploadKit packages to install. Omit to get the default full-stack set: [\"@uploadkitdev/react\", \"@uploadkitdev/next\"]. Pass a subset to scope the command, e.g. [\"@uploadkitdev/core\"] for a framework-agnostic project, or [\"@uploadkitdev/react\"] for a React app without Next.js."
- Changed
list_components1 field changed- changed
Input schema / properties / category / descriptionPrevious value: -"Optional filter."New value: +"Optional filter. Narrows the list to one category. Omit to get every component. Values: \"classic\" (the original 5 primitives like UploadButton/UploadDropzone), \"dropzone\" (styled drag-and-drop variants), \"button\" (styled button variants with motion), \"progress\" (upload progress indicators), \"motion\" (motion-forward visualizations like data streams, particles), \"specialty\" (avatars, chat composers, wizards, envelopes), \"gallery\" (multi-file layouts like grid, timeline, kanban)."
- Changed
scaffold_route_handler4 fields changed- changed
Input schema / properties / allowedTypes / descriptionPrevious value: -"MIME types allowed. Default: [\"image/*\"]."New value: +"MIME types (or wildcard patterns) that this route accepts. Examples: [\"image/*\"] (default — any image), [\"image/jpeg\", \"image/png\"] (two specific types), [\"application/pdf\"] (PDF only), [\"image/*\", \"video/mp4\"] (images plus MP4). Omit for the default of [\"image/*\"]. Rejects mismatched uploads with a 415 response." - changed
Input schema / properties / maxFileCount / descriptionPrevious value: -"Default: 1."New value: +"Maximum number of files per single upload request. Default: 1. Set to a larger number to enable multi-file drag-and-drop (e.g. 10 for gallery uploaders). Must be >= 1." - changed
Input schema / properties / maxFileSize / descriptionPrevious value: -"Max file size, e.g. \"4MB\", \"1GB\". Default: \"4MB\"."New value: +"Maximum allowed size per uploaded file, expressed with a unit suffix. Examples: \"4MB\" (default), \"512KB\", \"1GB\", \"100MB\". Omit to use the default of \"4MB\". Rejects uploads larger than this value with a 413 response." - changed
Input schema / properties / routeName / descriptionPrevious value: -"Name of the file route, e.g. \"media\", \"avatar\", \"attachments\". This is the value you pass as the `route` prop on components."New value: +"The key for this file route in the `FileRouter` object. This exact string is what consumers pass as the `route` prop on components (e.g. `<UploadDropzone route=\"media\" />`). Use a short lowercase identifier matching the file-category — examples: \"media\" for a general images+videos endpoint, \"avatar\" for user profile pictures, \"attachments\" for message/ticket attachments, \"documents\" for PDFs."
- Changed
search_components1 field changed- changed
Input schema / properties / query / descriptionPrevious value: -"Free-text search."New value: +"Free-text search string. Case-insensitive substring match against name, category, description, and inspiration fields. Examples: \"terminal\", \"apple\", \"progress ring\", \"kanban\", \"vercel\", \"matrix\"."
- Changed
search_docs2 fields changed- changed
Input schema / properties / limit / descriptionPrevious value: -"Max results. Default: 8."New value: +"Maximum number of matches to return. Default: 8. Range 1-50. Use smaller values (3-5) when you already have a narrow query; use larger values (15-20) for exploratory scans across the whole docs site." - changed
Input schema / properties / query / descriptionPrevious value: -"Free-text query."New value: +"Free-text search query. Multiple words are ANDed with per-field weighting (title matches score highest). Examples: \"middleware onUploadComplete\", \"theming css variables\", \"presigned url\", \"migration uploadthing\"."
11 tool updates
v0.1.0- First observed
get_byos_config - First observed
get_component - First observed
get_doc - First observed
get_install_command - First observed
get_quickstart - First observed
list_components - First observed
list_docs - First observed
scaffold_provider - First observed
scaffold_route_handler - First observed
search_components - First observed
search_docs
TDQS
Scored across 11 tools
Every tool has a clear, distinct purpose. There is no overlap between installation, scaffolding, component discovery, documentation, and BYOS configuration tools. An agent can easily select the right tool for each task.
All tools follow a consistent verb_noun pattern using underscores (e.g., get_install_command, scaffold_route_handler, search_components). No mixing of conventions, making it predictable and easy to understand.
With 11 tools, the set is well-scoped for its purpose—covering installation, scaffolding, component discovery, documentation, and BYOS configuration. No tool feels extraneous, and the count is manageable without being too thin.
The tool surface covers the full developer workflow: install, set up route handler and provider, get quickstart, discover and retrieve components, search and fetch documentation, and configure BYOS. There are no obvious gaps for the stated domain of setting up UploadKit.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Official MCP server for subfeed.app — the cloud for agents. 15+ tools for AI agents to register, build, and deploy other agents. Zero human required. Start here: subfeed.app/skill.md
- LovableOAuthdev.lovable
Official MCP server for Lovable, the AI-powered full-stack app builder.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceAn MCP server that enables users to query any Mintlify-powered documentation site directly from Claude. It leverages Mintlify's AI Assistant API to provide RAG-based answers and code examples for various platforms like Agno, Resend, and Upstash.918MIT
- AlicenseAqualityAmaintenanceOfficial MCP server for Rendobar. Lets AI agents run serverless media processing and upload local files.76531MIT
- AlicenseNot gradedqualityDmaintenanceMCP server for UploadThing that lets AI assistants upload, list, and delete files on UploadThing's CDN via natural language. Runs as a Cloudflare Worker for always-on serverless access.7MIT

BlazingCDN-MCPofficial
AlicenseBqualityBmaintenanceOfficial MCP server for BlazingCDN - AI agents (Claude, Cursor, Windsurf) manage CDN resources, purge cache, query metrics, domains, Cloud Storage and Video CDN291452MIT