canonical: https://jentic.com/apis/21st.dev/21st

# 21st API

The 21st API searches and installs React UI components from the 21st.dev component marketplace and publishes your own components, templates, and themes. Developers and agents can manage personal and team libraries, check out a published component into an editable draft that spawns a sandbox, and move a submission through review. It exposes the same HTTP surface the 21st command-line tool uses, so an agent can integrate against it directly.

## For AI agents

Search and install React UI components, publish components, templates, and themes, and manage libraries on the 21st.dev marketplace.

## Scope

Does not handle code hosting, CI builds, or runtime deployment. Use for discovering, installing, and publishing 21st.dev UI components only.

## Capabilities

- Search the 21st.dev marketplace for React UI components by query
- Install a component with everything needed to add it to a project
- Publish a new component, template, or theme, or update an existing one
- Create editable component drafts that spawn a sandbox and poll their status
- Manage personal and team libraries and their branding
- Move a published component through submission review

## Use cases

### Agent-Driven Component Discovery

An AI coding agent needs a specific UI element, such as a date picker or a pricing table, while building a React app. The 21st API lets the agent search the marketplace by query and then install the chosen component with everything needed to drop it into the project, so the agent sources a vetted component instead of writing one from scratch.

Example prompt: Search 21st.dev for a 'date picker' component, pick the top result, and retrieve everything needed to install it into the current project

### Publishing a Component Library

A team maintaining a shared design system wants to publish components, templates, and themes to 21st.dev and keep their branding consistent. The 21st API publishes new listings or updates existing ones and manages the personal and team libraries they belong to, so a release pipeline can push updates without manual uploads.

Example prompt: Publish a new React component to the team library on 21st.dev and set its description and tags

### Draft-to-Publish Review Flow

A contributor edits a published component in a sandbox before shipping the change. The 21st API checks a published component out into an editable draft, polls the draft status, pushes updated source, and publishes the draft as a real component, giving an agent a complete edit-and-release loop with a review step in between.

Example prompt: Check out a published component into a draft, push an updated source file, and publish the draft once its status is ready

## Key endpoints

| Method | Path | Description |
| --- | --- | --- |
| GET | `/components/search` | Search components |
| GET | `/components/install/{username}/{slug}` | Get everything needed to install a component |
| POST | `/components/publish` | Publish a new component or update an existing one |
| POST | `/components/drafts` | Create a new draft that spawns a sandbox |
| POST | `/components/drafts/{draftId}/publish` | Publish a draft as a real component |
| GET | `/libraries` | List every library the caller can manage |
| GET | `/me` | Get the caller's identity, plan, and quota |

## Key resources

- **Components** — Search, install, publish, update, unpublish, and review components
- **Drafts** — Create editable component drafts in a sandbox, poll status, and publish them
- **Libraries** — List and manage personal and team libraries and their branding
- **Templates and Themes** — Publish and edit template listings and community themes
- **Account** — Read the caller's identity, plan, quota, and team context

## AI readiness

This API is usable in Jentic One now. Its AI-readiness score against Jentic's framework shows where it stands today and where improvements would make it even easier for agents to use.

- **Score:** 43 / 100
- **Maturity:** Foundational
- **Dimensions:**
  - Foundational Compliance: 53 / 100
  - Developer Experience & Jentic Compatibility: 63 / 100
  - AI-Readiness & Agent Experience: 20 / 100
  - Agent Usability: 94 / 100
  - Security: 60 / 100
  - AI Discoverability: 65 / 100
- **View full report:** https://jentic.com/apis/21st.dev/21st/scorecard
- **How the score is calculated:** https://docs.jentic.com/reference/api-readiness-framework/overview/
- **More about the dimensions:** https://docs.jentic.com/reference/api-readiness-framework/specification/#dimensional-model-overview

### Score it yourself

Every API in the directory is allowlisted, so you can re-score it with no key required.

- **Score your own API:** https://jentic.com/scorecard.md
- **Scoring CLI agent skill:** https://github.com/jentic/jentic-api-scorecard/blob/main/skills/jentic-api-scorecard/SKILL.md

```sh
npx @jentic/api-scorecard-cli score <openapi-url>
```

## Why Jentic

- **Setup:** Wiring the 21st API by hand means handling its bearer token and learning which endpoints search, install, publish, and draft components. Through Jentic you install once, import 21st from the API Directory, store the token once, and your agent calls it.
- **Permission scoping:** You choose which 21st operations your agent may call, so it can search and install components while the publish, unpublish, and review operations stay out of the set it may reach unless you add them.
- **Credential handling:** Your 21st token is stored once, encrypted, by your own Jentic One instance and injected at execution time. It never enters the agent's prompt, logs, or context.
- **Discovery method:** Agents search Jentic by intent such as 'find a date picker component' or 'publish a React component', and Jentic returns the matching 21st operation with its input schema so the agent calls the right endpoint without browsing the reference docs.

## Related APIs

- **npm Registry** — The npm registry distributes JavaScript packages; 21st.dev distributes installable React UI components with previews and drafts.
- **GitHub API** — GitHub hosts the source repositories; 21st.dev handles the component marketplace side of discovery and publishing.
- **Vercel API** — Vercel deploys the frontend app; 21st.dev supplies the UI components that go into it.

## FAQ

### What authentication does the 21st API use?

The 21st API authenticates with a bearer token sent in the Authorization header, per its OpenAPI spec. You generate a key in your 21st.dev account and send it with each request. Through Jentic the token is stored encrypted by your own Jentic One instance and injected at call time, so it never reaches the agent's context.

### Can I publish a component to 21st.dev through an agent?

Yes. The 21st API publishes a new component, template, or theme, and it can also create an editable draft that spawns a sandbox, poll that draft's status, and publish the draft as a real component once it is ready. An agent can run the whole edit-and-release loop against these operations.

### What are the rate limits for the 21st API?

The OpenAPI spec does not define rate limits. Check the 21st.dev documentation at https://21st.dev for the current limits and quota tied to your plan, which the account endpoint also reports.

### How do I publish a 21st.dev component through Jentic?

Import the 21st API from the Jentic directory and give your agent an intent such as 'publish a React component'. Jentic returns the publish operation with its input schema, your agent fills in the component details and calls it, and your stored token is injected at execution time. To run it on your own infrastructure, install Jentic One from its GitHub repo.

### Can I limit what my agent is allowed to do with the 21st API?

Yes. Write a rule that allows only the search and install operations, so your agent can find and add components but cannot publish, unpublish, or move a submission through review, and every call it makes is logged.

### Is there a 21st MCP server?

You don't need an MCP server to give your agent the 21st API. Jentic connects it directly from the API Directory: import it, store your credential once, and your agent calls it, so no extra server's tool definitions sit in the agent's context.