refine_component
Refine existing UI components using natural language feedback for accessibility, dark mode, responsiveness, and framework upgrades.
Instructions
Iteratively improve an existing component based on natural language feedback. Apply accessibility fixes, dark mode, responsive improvements, component library upgrades, and design context alignment. Supports all frameworks.
Tool call template
Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {
"component_code": "<component_code>",
"feedback": "<feedback>",
"framework": "<framework>"
},
"name": "refine_component"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component_code | Yes | The existing component source code to refine | |
| feedback | Yes | Natural language description of desired improvements (e.g., "make it more responsive", "add dark mode support", "improve accessibility", "use shadcn Button instead of raw button") | |
| framework | Yes | Framework of the existing component | |
| dark_mode | No | Apply dark mode classes |