21st_magic_component_refiner
Refines and improves React UI components by redesigning them based on user feedback, providing updated code and implementation instructions for better styling, layout, or responsiveness.
Instructions
"Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages). This tool improves UI of components and returns redesigned version of the component and instructions on how to implement it."
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| userMessage | Yes | Full user's message about UI refinement | |
| absolutePathToRefiningFile | Yes | Absolute path to the file that needs to be refined | |
| context | Yes | Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string. |
Implementation Reference
- src/tools/refine-ui.ts:33-60 (handler)The async execute method implements the core logic of the '21st_magic_component_refiner' tool. It sends a POST request to the '/api/refine-ui' endpoint with user message, file content, and context, then returns the response text in the MCP format.
async execute({ userMessage, absolutePathToRefiningFile, context, }: z.infer<typeof this.schema>) { try { const { data } = await twentyFirstClient.post<RefineUiResponse>( "/api/refine-ui", { userMessage, fileContent: await getContentOfFile(absolutePathToRefiningFile), context, } ); return { content: [ { type: "text" as const, text: data.text, }, ], }; } catch (error) { console.error("Error executing tool", error); throw error; } } - src/tools/refine-ui.ts:21-31 (schema)Zod schema defining the input parameters for the tool: userMessage, absolutePathToRefiningFile, and context.
schema = z.object({ userMessage: z.string().describe("Full user's message about UI refinement"), absolutePathToRefiningFile: z .string() .describe("Absolute path to the file that needs to be refined"), context: z .string() .describe( "Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string." ), }); - src/index.ts:25-25 (registration)Registers the RefineUiTool instance with the MCP server, making the '21st_magic_component_refiner' tool available.
new RefineUiTool().register(server);