21st MCP server (formerly 21st.dev Magic MCP)

• Finds components, themes and templates in the 21st.dev library

  Searches the 21st.dev library for components, themes and templates that match what you describe, with filters. Free on every plan.

  Try: “Find a pricing table with a monthly and yearly toggle on 21st”

  Network · search

• Shows search results as a visual picker you can choose from

  Runs the same library search but shows the results as a picker inside apps that support it, so you can choose one by eye.

  Try: “Show me hero sections from 21st so I can pick one”

  Network · search_picker

• Gets a component's code and demo so it can be added to your project

  Fetches a component's source code and demo. Free accounts get two of these a day; paid plans have no limit.

  Try: “Add the efferd pricing component from 21st to my pricing page”

  Network · get_component

• Gets a theme's CSS

  Fetches the CSS for a theme from the library. Free and not counted against any limit.

  Try: “Get a dark theme from 21st and apply it to my app”

  Network · get_theme

• Finds brand and UI logos as SVG files

  Finds brand and interface logos by name and returns links to their SVG files.

  Try: “Find the Stripe logo as an SVG”

  Network · search_logo

• Starts a new UI draft with 21st AI from your description

  Starts a sketch or code generation with 21st AI from a prompt. Only shown when AI is turned on for your account, and it uses paid credits.

  Try: “Generate three variants of a signup form with 21st AI”

  Write · generate

• Lists the drafts from a 21st AI generation

  Lists the drafts a 21st AI generation produced and whether each one is ready. Free.

  Try: “Show me the drafts from my last 21st generation”

  Network · get_generation

• Gets the code and details of a saved draft version

  Fetches one exact saved version of a draft, including its code, prompt and structure, so it can go into your project. Free.

  Try: “Pull version 3 of my second pricing draft into the project”

  Network · get_take

• Refines one of your 21st AI drafts

  Refines an existing draft based on your feedback. Only shown when AI is turned on, and it uses paid credits.

  Try: “Make the second draft more compact and use our brand colors”

  Write · iterate_generation

• Makes exact edits to a saved draft, such as moving or copying a part

  Applies precise edits to a saved sketch draft, such as duplicating or moving a section, and saves it as a new version. Free.

  Try: “Duplicate the feature card in my draft and move it into the main section”

  Write · edit_take

• Reads the notes you left on a draft in the 21st editor

  Reads the notes you sent from the 21st web editor for a draft, so the assistant knows what to change. Free.

  Try: “What notes did I leave on my latest 21st draft?”

  Network · get_notes

• Marks your editor notes as in progress, done or won't do

  Reports progress on notes you left in the 21st editor by marking them in progress, done or won't do. Free.

  Try: “Mark my header note as done”

  Write · update_note

• Shows edits made to a draft since you last pulled it

  Reads the edits saved to a draft since a given version or since you last pulled it, with a plan for applying them. Free.

  Try: “What changed in my draft since I last pulled it?”

  Network · get_changes

• Lists components you bookmarked

  Lists the components and other items you saved as bookmarks on 21st.dev.

  Try: “Show my 21st bookmarks”

  Network · list_bookmarks

• Bookmarks a component or other item

  Saves a component, theme or template to your 21st.dev bookmarks.

  Try: “Bookmark this testimonial component”

  Write · bookmark

• Creates a new list for your bookmarks

  Creates a named list to group your 21st.dev bookmarks.

  Try: “Create a bookmark list called Landing page ideas”

  Write · create_bookmark_list

• Adds a bookmarked item to one of your lists

  Adds a component or other item to one of your bookmark lists.

  Try: “Add this hero section to my Landing page ideas list”

  Write · add_to_list

• Lists the 21st teams you belong to

  Lists the 21st.dev teams your account is a member of.

  Try: “Which 21st teams am I in?”

  Network · list_teams

• Lists a team's component libraries

  Lists the component libraries a team has on 21st.dev.

  Try: “Show the libraries for my design team”

  Network · list_team_libraries

• Lists the components in a team library

  Lists the components inside one of your team's libraries.

  Try: “List the components in our team's marketing library”

  Network · list_team_components

• Edits details of a component you published

  Changes the details of a component you published on 21st.dev. Needs your API key.

  Try: “Update the description of my navbar component”

  Write · edit_component

• Deletes a component you published

  Removes a component you published from 21st.dev. Needs your API key.

  Try: “Delete my old button component from 21st”

  Delete · delete_component

• Edits a theme you published

  Changes a theme you published on 21st.dev. Needs your API key.

  Try: “Rename my published theme to Ocean”

  Write · edit_theme

• Deletes a theme you published

  Removes a theme you published from 21st.dev. Needs your API key.

  Try: “Delete my draft theme from 21st”

  Delete · delete_theme

• Edits a template you published

  Changes a template you published on 21st.dev. Needs your API key.

  Try: “Update the tags on my dashboard template”

  Write · edit_template

• Deletes a template you published

  Removes a template you published from 21st.dev. Needs your API key.

  Try: “Delete my old landing page template”

  Delete · delete_template

• Reads your 21st.dev profile

  Reads your 21st.dev profile board.

  Try: “Show my 21st profile”

  Network · get_profile

• Changes your 21st.dev profile

  Replaces or clears your 21st.dev profile board.

  Try: “Update my 21st profile bio”

  Write · edit_profile

• Uploads an image or video to your profile

  Uploads media for your 21st.dev profile board.

  Try: “Upload this screenshot to my 21st profile”

  Write · upload_profile_media

• Sends your feedback on a draft to 21st

  Forwards feedback you asked to send about a draft to 21st, with the draft's context. It must not include your code or secrets.

  Try: “Tell 21st the generated form ignored my color tokens”

  Write · send_feedback

• Used by the assistant behind the scenes

  Reports whether a draft was used, adapted or dropped

  Records what happened after a draft was taken into your project, such as landed, adapted or abandoned, with the build result.

  Write · record_take_outcome

• Checks on a running draft refinement

  Lets the assistant check the status of a refinement it started until the new version is ready. Free.

  Network · get_generation_job

• Shows your plan, AI access, free copies left and AI credits

  Shows your account tier, whether AI is on, how many free component copies you have left today and your AI credit balance.

  Try: “How many 21st AI credits do I have left?”

  Network · get_usage

Watch out for

• It can delete your published components

  With your key it can edit or delete components, themes and templates you published, and change your profile. Approve those calls one by one. help.21st.dev

• It can spend your AI credits

  On a plan with AI turned on, each generate or refine call uses paid credits. Check your balance with the usage tool before long sessions. help.21st.dev

• Your API key sits in a config file

  Most setups keep the key in a config file or environment variable. Keep that file out of git, or use VS Code, which stores the key securely. help.21st.dev

• Old Magic keys no longer work

  Keys from the retired Magic console were reset. Make a new key at 21st.dev/mcp. github.com

Security advisories

In their words