21st_magic_component_inspiration
Search 21st.dev for UI component inspiration and previews, returning JSON data of matching components to integrate into your codebase.
Instructions
"Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase |
Implementation Reference
- src/tools/fetch-ui.ts:28-50 (handler)The async execute method implements the core tool logic: POSTs user message and search query to 21st.dev /api/fetch-ui endpoint, returns the UI component text as MCP content.
async execute({ message, searchQuery }: z.infer<typeof this.schema>) { try { const { data } = await twentyFirstClient.post<FetchUiResponse>( "/api/fetch-ui", { message, searchQuery, } ); return { content: [ { type: "text" as const, text: data.text, }, ], }; } catch (error) { console.error("Error executing tool", error); throw error; } } - src/tools/fetch-ui.ts:19-26 (schema)Zod schema for tool inputs: 'message' (full user message, string) and 'searchQuery' (2-4 word phrase for UI component search).
schema = z.object({ message: z.string().describe("Full users message"), searchQuery: z .string() .describe( "Search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase" ), }); - src/index.ts:24-24 (registration)Instantiates and registers the FetchUiTool with the MCP server.
new FetchUiTool().register(server);