@optiaxiom/mcp

Get information about an Axiom component. Returns the component's description, import statement, and sub-components by default — no props. Use the optional "props" parameter to search for specific props by name or description. Searches both component-specific props and style props — you don't need to know shorthand names, just describe what you want (e.g., "padding" finds the "p" prop). Examples: get_component({ name: "Dialog" }) → description, import, sub-components get_component({ name: "Button", props: "appearance size" }) → + matching prop definitions get_component({ name: "Box", props: "padding background" }) → + p and bg prop definitions

Search Axiom components by name, description, or keywords. Returns matching components. Use get_component() to read full details and get_patterns() to see composition examples.

Find usage examples showing how Axiom components work together. When you are about to write or compose JSX that uses one or more Axiom components together, refer to this to follow real, working patterns from the docs instead of guessing the API. Returns real examples that demonstrate component composition (which sub-components to use, required props, and how pieces wire together). Examples: get_patterns({ components: "Field Input Button" }) → examples showing forms with fields and buttons get_patterns({ components: "Dialog" }) → examples showing full Dialog composition with sub-components get_patterns({ components: "Input", query: "addon" }) → examples showing Input with addons

Get vetted reference test files for Axiom components. When the user asks to write, generate, add, or fix a test / spec / *.spec.tsx / *.test.tsx for any Axiom component, refer to this to follow the repo's established conventions instead of generic React Testing Library habits. These reference tests show how this repo renders components, queries them by role and accessible name, and asserts accessibility (ARIA roles, labels) and interactions. The response also includes a note explaining the custom \

Get design token mappings for the Axiom Design System. Returns token-to-value mappings for colors, sizes, spacing, borderRadius, fontSize, boxShadow, duration, fontFamily, and zIndex. Use this to convert hardcoded values to semantic tokens (e.g., #4F576E → fg.secondary, 32px height → h='md'). For how to consume these tokens in code (style props, CSS variables, or the \

Search for icons from the @optiaxiom/icons package. Returns matching icon component names. Search by keywords (e.g., 'message', 'arrow', 'user').

Get setup, configuration, and integration guides for the Axiom Design System. Refer to these when setting up Axiom, importing its CSS, configuring CSS layers, using icons, or integrating Axiom into a host app — instead of guessing the setup steps. Examples: get_guides({ names: "getting-started" }) → the getting-started guide content get_guides({ names: "css-imports css-layers" }) → both CSS setup guides get_guides() → list all available guides (names + titles)