[{"data":1,"prerenderedAt":142},["ShallowReactive",2],{"seo-allowlist":3,"connector-21st":73,"related-21st":117},[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72],"activecampaign","ahrefs","airtable","amplitude","asana","avalara","aweber","bamboohr","billcom","bitbucket","brevo-sendinblue","buffer","calendly","clickup","close","confluence","constant-contact","copper","datadog","dialpad","docusign","expensify","figma","freshsales","github","gitlab","gmail","google-adsense","google-calendar","google-drive","google-forms","google-maps","google-sheets","google-slides","greenhouse","hubspot","intercom","jira","jotform","linear","mailchimp","microsoft-teams","miro","mixpanel","mondaycom","notion","outlook","pandadoc","personio","pipedrive","quickbooks-online","recurly","salesforce","sendgrid","sentry","slack","square","stripe","tableau","todoist","trello","typeform","wix","workable","wrike","youtube","zendesk","zoho-crm","zoom",{"id":74,"name":75,"icon":76,"description":77,"provider":78,"authType":79,"availableAuthTypes":80,"apiDocsUrl":81,"authDocsUrl":81,"category":82,"pageCopy":83,"datasets":116},"21st","21st.dev","\u002Fconnectoricons\u002F21st.png","Search 21st.dev's catalog of 12,000+ React components and themes, pull their code into your project and, where your account offers it, generate new components with 21st's hosted AI. 21st.dev MCP, formerly Magic MCP, reaches Claude Code, Cursor, Claude and ChatGPT through ContextGate, which records each component your AI app fetches.","vendor_mcp","oauth",[79],"https:\u002F\u002F21st.dev\u002Fmcp","Developer Tools & Data",{"title":84,"description":85,"heading":86,"connect":87,"sections":102,"utmCampaign":115},"21st.dev MCP server for Cursor & Claude | ContextGate","21st.dev MCP: search 12,000+ React components and themes and pull their code from Cursor or Claude. Switch off generation tools; every call is recorded.","21st.dev MCP: React components from the catalog into your editor",{"heading":88,"steps":89},"Set up 21st.dev in Cursor, Claude Code or ChatGPT",[90,92,94,100],{"text":91},"Click Connect 21st.dev free and sign in with your 21st.dev account.",{"text":93},"Every tool is on when you connect, and you'll see the full list then. Keep the tools that search components and retrieve code; if you'd rather your AI app didn't generate components with 21st's hosted AI, switch that tool off.",{"text":95,"link":96,"after":99},"Add ContextGate to your AI app as a connector or MCP server. The steps for each app are on",{"label":97,"href":98},"the Works with page","\u002Fworks-with\u002F",".",{"text":101},"In Cursor, ask for a pricing table component from 21st.dev and its code, then open Activity to see which lookups ran.",[103,109],{"heading":104,"bullets":105},"Component work with 21st.dev in your editor",[106,107,108],"Search the 21st catalog of more than 12,000 React components for a navbar, card or form.","Find a theme and retrieve component code straight into Cursor or Claude Code.","Generate a new component with 21st's hosted AI when your account offers it.",{"heading":110,"bullets":111},"Know where your UI code came from",[112,113,114],"Switch off the generation tool and your AI app sticks to existing catalog components; the tool is hidden and refused if called.","Activity shows each component search and code fetch, so you can trace where a component in your codebase came from.","Policies check every call, so a secret pasted into a prompt can be blocked before it reaches 21st.dev.","21st-mcp",[],[118,121,124,127,130,133,136,139],{"id":119,"name":120},"activepieces","Activepieces",{"id":122,"name":123},"agility-cms","Agility CMS",{"id":125,"name":126},"airbyte","Airbyte",{"id":128,"name":129},"alchemy","Alchemy",{"id":131,"name":132},"algolia","Algolia",{"id":134,"name":135},"alpha-vantage","Alpha Vantage",{"id":137,"name":138},"altmetric","Altmetric",{"id":140,"name":141},"amcharts","amCharts 5",1793790205317]