{ "generatedAt": "2026-09-09T20:58:37.774Z", "id": "chakra-ui", "name": "Chakra UI", "url": "https://mcp.chakra-ui.com/mcp", "homepage": "https://chakra-ui.com/docs/get-started/ai/mcp-server", "platform": null, "transport": "streamable-http", "status": "ok", "error": null, "protocolVersion": "2025-06-18", "serverInfo": { "name": "chakra-ui", "version": "1.0.0", "capabilities": { "prompts": {}, "resources": {}, "tools": {} } }, "provenance": { "at": "2026-09-09T20:58:37.774Z", "declaredUrl": "https://mcp.chakra-ui.com/mcp", "observedUrl": "https://mcp.chakra-ui.com/mcp", "urlMatchesDeclared": true, "redirected": false, "redirects": [], "via": "initialize-handshake", "envelope": "sse", "methodChangingRedirect": false, "refused": null }, "tools": [ { "name": "customize_theme", "title": null, "description": "Used to setup a custom theme for your Chakra UI. You can define new tokens or modify existing ones.", "inputSchema": { "type": "object", "properties": { "category": { "type": "string", "enum": [ "aspectRatios", "animations", "blurs", "borders", "colors", "durations", "easings", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "spacing", "sizes", "zIndex", "cursor", "breakpoints", "conditions", "layerStyles", "textStyles", "globalCss" ], "description": "The category of the token to customize" } }, "required": [ "category" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "5bd22831bdc2111b" }, { "name": "get_component_example", "title": null, "description": "Retrieve comprehensive example code and usage patterns for a specific Chakra UI component. This tool provides practical implementation examples including basic usage, advanced configurations, and common use cases with complete code snippets.", "inputSchema": { "type": "object", "properties": { "component": { "type": "string", "enum": [ "absolute-center", "accordion", "action-bar", "alert", "aspect-ratio", "avatar", "badge", "bleed", "blockquote", "box", "breadcrumb", "button", "card", "carousel", "center", "checkbox", "checkbox-card", "checkmark", "circle", "client-only", "clipboard", "code", "code-block", "collapsible", "color-picker", "color-swatch", "combobox", "container", "data-list", "date-input", "date-picker", "dialog", "download-trigger", "drawer", "editable", "em", "empty-state", "environment", "field", "fieldset", "file-upload", "flex", "float", "floating-panel", "focus-trap", "for", "format", "grid", "group", "heading", "highlight", "hover-card", "icon", "image", "input", "input-addon", "input-element", "input-group", "kbd", "link", "list", "listbox", "loader", "locale", "mark", "marquee", "menu", "native-select", "number-input", "pagination", "pin-input", "popover", "portal", "presence", "progress", "progress-circle", "qr-code", "quote", "radio-card", "radio-group", "radiomark", "rating-group", "scroll-area", "segment-group", "select", "separator", "show", "simple-grid", "skeleton", "skip-nav", "slider", "spacer", "span", "spinner", "splitter", "square", "stack", "stat", "status", "steps", "sticky", "strong", "switch", "table", "tabs", "tag", "tags-input", "text", "textarea", "timeline", "toast", "toggle", "tooltip", "tree-view", "visually-hidden", "wrap", "close-button", "overlay", "password-input", "prose", "radio", "rating", "rich-text-editor", "segmented-control", "theme", "toaster", "hstack", "vstack", "area-chart", "bar-chart", "bar-list", "bar-segment", "donut-chart", "line-chart", "pie-chart", "radar-chart", "radial-chart", "scatter-chart", "sparkline" ], "description": "The name of the Chakra UI component to get example code for" } }, "required": [ "component" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "8bd5f9b45aaf28b0" }, { "name": "get_component_props", "title": null, "description": "Get detailed properties of a specific Chakra UI component. This tool retrieves the properties, attributes, design related props for a component, like size, variant, etc. and configuration options available for a given Chakra UI component.", "inputSchema": { "type": "object", "properties": { "component": { "type": "string", "enum": [ "absolute-center", "accordion", "action-bar", "alert", "aspect-ratio", "avatar", "badge", "bleed", "blockquote", "box", "breadcrumb", "button", "card", "carousel", "center", "checkbox", "checkbox-card", "checkmark", "circle", "client-only", "clipboard", "code", "code-block", "collapsible", "color-picker", "color-swatch", "combobox", "container", "data-list", "date-input", "date-picker", "dialog", "download-trigger", "drawer", "editable", "em", "empty-state", "environment", "field", "fieldset", "file-upload", "flex", "float", "floating-panel", "focus-trap", "for", "format", "grid", "group", "heading", "highlight", "hover-card", "icon", "image", "input", "input-addon", "input-element", "input-group", "kbd", "link", "list", "listbox", "loader", "locale", "mark", "marquee", "menu", "native-select", "number-input", "pagination", "pin-input", "popover", "portal", "presence", "progress", "progress-circle", "qr-code", "quote", "radio-card", "radio-group", "radiomark", "rating-group", "scroll-area", "segment-group", "select", "separator", "show", "simple-grid", "skeleton", "skip-nav", "slider", "spacer", "span", "spinner", "splitter", "square", "stack", "stat", "status", "steps", "sticky", "strong", "switch", "table", "tabs", "tag", "tags-input", "text", "textarea", "timeline", "toast", "toggle", "tooltip", "tree-view", "visually-hidden", "wrap", "close-button", "overlay", "password-input", "prose", "radio", "rating", "rich-text-editor", "segmented-control", "theme", "toaster", "hstack", "vstack" ], "description": "The name of the Chakra UI component to get properties for" } }, "required": [ "component" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "03c5f35364af889c" }, { "name": "get_theme", "title": null, "description": "Retrieve the theme specification (colors, fonts, textStyles, etc.) to design any page, component or section", "inputSchema": { "type": "object", "properties": {} }, "outputSchema": null, "annotations": null, "schemaFingerprint": "efddc7bd8bbcef73" }, { "name": "list_components", "title": null, "description": "List all available components in Chakra UI. This tool retrieves the names of all available Chakra UI components.", "inputSchema": { "type": "object", "properties": {}, "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "f973399805c1c233" }, { "name": "v2_to_v3_code_review", "title": null, "description": "ALWAYS use this tool to review any generated code. This tool helps you get familiar with the new Chakra UI v3 API before/after code snippets for common migration scenarios to help avoid AI hallucination.", "inputSchema": { "type": "object", "properties": { "scenario": { "type": "string", "enum": [ "spacing_to_gap", "button_icon_to_children", "theme_configuration", "provider_configuration", "boolean_prop_naming", "form_control_to_field", "spinner_props", "icon_button_changes", "button_isActive_prop", "link_isExternal_prop", "divider_to_separator", "collapse_to_collapsible", "style_props_pseudo_selectors", "style_props_apply_removal", "bg_gradient_props", "colorScheme_to_colorPalette", "modal_to_dialog", "boolean_props_convention", "select_to_native_select", "dialog_drawer_props", "editable_props" ], "description": "The migration scenario to get guidance for" } }, "required": [ "scenario" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "3025c2afd6e7476d" } ], "toolCount": 6, "fingerprint": "345146b5ccab8ee7", "lastGood": { "at": "2026-09-09T20:58:37.774Z", "tools": [ { "name": "customize_theme", "title": null, "description": "Used to setup a custom theme for your Chakra UI. You can define new tokens or modify existing ones.", "inputSchema": { "type": "object", "properties": { "category": { "type": "string", "enum": [ "aspectRatios", "animations", "blurs", "borders", "colors", "durations", "easings", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "spacing", "sizes", "zIndex", "cursor", "breakpoints", "conditions", "layerStyles", "textStyles", "globalCss" ], "description": "The category of the token to customize" } }, "required": [ "category" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "5bd22831bdc2111b" }, { "name": "get_component_example", "title": null, "description": "Retrieve comprehensive example code and usage patterns for a specific Chakra UI component. This tool provides practical implementation examples including basic usage, advanced configurations, and common use cases with complete code snippets.", "inputSchema": { "type": "object", "properties": { "component": { "type": "string", "enum": [ "absolute-center", "accordion", "action-bar", "alert", "aspect-ratio", "avatar", "badge", "bleed", "blockquote", "box", "breadcrumb", "button", "card", "carousel", "center", "checkbox", "checkbox-card", "checkmark", "circle", "client-only", "clipboard", "code", "code-block", "collapsible", "color-picker", "color-swatch", "combobox", "container", "data-list", "date-input", "date-picker", "dialog", "download-trigger", "drawer", "editable", "em", "empty-state", "environment", "field", "fieldset", "file-upload", "flex", "float", "floating-panel", "focus-trap", "for", "format", "grid", "group", "heading", "highlight", "hover-card", "icon", "image", "input", "input-addon", "input-element", "input-group", "kbd", "link", "list", "listbox", "loader", "locale", "mark", "marquee", "menu", "native-select", "number-input", "pagination", "pin-input", "popover", "portal", "presence", "progress", "progress-circle", "qr-code", "quote", "radio-card", "radio-group", "radiomark", "rating-group", "scroll-area", "segment-group", "select", "separator", "show", "simple-grid", "skeleton", "skip-nav", "slider", "spacer", "span", "spinner", "splitter", "square", "stack", "stat", "status", "steps", "sticky", "strong", "switch", "table", "tabs", "tag", "tags-input", "text", "textarea", "timeline", "toast", "toggle", "tooltip", "tree-view", "visually-hidden", "wrap", "close-button", "overlay", "password-input", "prose", "radio", "rating", "rich-text-editor", "segmented-control", "theme", "toaster", "hstack", "vstack", "area-chart", "bar-chart", "bar-list", "bar-segment", "donut-chart", "line-chart", "pie-chart", "radar-chart", "radial-chart", "scatter-chart", "sparkline" ], "description": "The name of the Chakra UI component to get example code for" } }, "required": [ "component" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "8bd5f9b45aaf28b0" }, { "name": "get_component_props", "title": null, "description": "Get detailed properties of a specific Chakra UI component. This tool retrieves the properties, attributes, design related props for a component, like size, variant, etc. and configuration options available for a given Chakra UI component.", "inputSchema": { "type": "object", "properties": { "component": { "type": "string", "enum": [ "absolute-center", "accordion", "action-bar", "alert", "aspect-ratio", "avatar", "badge", "bleed", "blockquote", "box", "breadcrumb", "button", "card", "carousel", "center", "checkbox", "checkbox-card", "checkmark", "circle", "client-only", "clipboard", "code", "code-block", "collapsible", "color-picker", "color-swatch", "combobox", "container", "data-list", "date-input", "date-picker", "dialog", "download-trigger", "drawer", "editable", "em", "empty-state", "environment", "field", "fieldset", "file-upload", "flex", "float", "floating-panel", "focus-trap", "for", "format", "grid", "group", "heading", "highlight", "hover-card", "icon", "image", "input", "input-addon", "input-element", "input-group", "kbd", "link", "list", "listbox", "loader", "locale", "mark", "marquee", "menu", "native-select", "number-input", "pagination", "pin-input", "popover", "portal", "presence", "progress", "progress-circle", "qr-code", "quote", "radio-card", "radio-group", "radiomark", "rating-group", "scroll-area", "segment-group", "select", "separator", "show", "simple-grid", "skeleton", "skip-nav", "slider", "spacer", "span", "spinner", "splitter", "square", "stack", "stat", "status", "steps", "sticky", "strong", "switch", "table", "tabs", "tag", "tags-input", "text", "textarea", "timeline", "toast", "toggle", "tooltip", "tree-view", "visually-hidden", "wrap", "close-button", "overlay", "password-input", "prose", "radio", "rating", "rich-text-editor", "segmented-control", "theme", "toaster", "hstack", "vstack" ], "description": "The name of the Chakra UI component to get properties for" } }, "required": [ "component" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "03c5f35364af889c" }, { "name": "get_theme", "title": null, "description": "Retrieve the theme specification (colors, fonts, textStyles, etc.) to design any page, component or section", "inputSchema": { "type": "object", "properties": {} }, "outputSchema": null, "annotations": null, "schemaFingerprint": "efddc7bd8bbcef73" }, { "name": "list_components", "title": null, "description": "List all available components in Chakra UI. This tool retrieves the names of all available Chakra UI components.", "inputSchema": { "type": "object", "properties": {}, "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "f973399805c1c233" }, { "name": "v2_to_v3_code_review", "title": null, "description": "ALWAYS use this tool to review any generated code. This tool helps you get familiar with the new Chakra UI v3 API before/after code snippets for common migration scenarios to help avoid AI hallucination.", "inputSchema": { "type": "object", "properties": { "scenario": { "type": "string", "enum": [ "spacing_to_gap", "button_icon_to_children", "theme_configuration", "provider_configuration", "boolean_prop_naming", "form_control_to_field", "spinner_props", "icon_button_changes", "button_isActive_prop", "link_isExternal_prop", "divider_to_separator", "collapse_to_collapsible", "style_props_pseudo_selectors", "style_props_apply_removal", "bg_gradient_props", "colorScheme_to_colorPalette", "modal_to_dialog", "boolean_props_convention", "select_to_native_select", "dialog_drawer_props", "editable_props" ], "description": "The migration scenario to get guidance for" } }, "required": [ "scenario" ], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" }, "outputSchema": null, "annotations": null, "schemaFingerprint": "3025c2afd6e7476d" } ], "fingerprint": "345146b5ccab8ee7", "protocolVersion": "2025-06-18" }, "firstSeenAt": "2026-09-09T10:24:48.004Z", "lastCheckedAt": "2026-09-09T20:58:37.774Z", "lastOkAt": "2026-09-09T20:58:37.774Z", "lastChangedAt": null, "changeCount": 0, "card": { "id": "chakra-ui", "cardUrl": "https://mcp.chakra-ui.com/.well-known/mcp/server-card.json", "at": "2026-09-09T20:58:37.774Z", "cardPath": "/.well-known/mcp/server-card.json", "status": "absent", "error": "HTTP 404", "card": null, "provenance": { "at": "2026-09-09T20:58:37.774Z", "declaredUrl": "https://mcp.chakra-ui.com/.well-known/mcp/server-card.json", "observedUrl": "https://mcp.chakra-ui.com/.well-known/mcp/server-card.json", "urlMatchesDeclared": true, "redirected": false, "redirects": [], "via": null, "envelope": null, "methodChangingRedirect": false, "refused": null }, "cardsUrl": "https://mcp.chakra-ui.com/.well-known/mcp/server-cards.json", "cardsStatus": "absent" }, "stability": "stable", "flapCount": 0, "provenanceSummary": "Read from the declared URL with no redirect, over a full initialize handshake. The response was an SSE-framed JSON-RPC result.", "observed": true, "events": [ { "type": "server_added", "severity": "additive", "summary": "Chakra UI added to the registry — baseline recorded with 6 tools", "id": "43d759b60e4c", "at": "2026-09-09T10:24:48.004Z", "server": "chakra-ui", "serverName": "Chakra UI" } ] }