MCP server

@hone-ui/mcp is a Model Context Protocol server. An MCP client, such as an AI coding tool, starts it and calls its six tools to read guides, props and theme variables, and to check a JSX snippet. The server reads the @hone-ui/react your app has installed, so every answer matches that version. It makes no network call.

@hone-ui/mcp is not published yet, so npx @hone-ui/mcp works only once the package is on npm.

Start the serverCopy Anchor Link

Run it from your app's folder. The server talks to the client over stdio.

npx @hone-ui/mcp

The server walks up from the project folder to the nearest node_modules/@hone-ui/react. It picks the project folder in this order.

1. The --project <dir> argument, or --project=<dir>.
2. The HONE_UI_PROJECT environment variable.
3. The working folder.

A relative path resolves against the working folder. Use --project when your MCP client starts the server from another folder, such as the root of a monorepo.

npx @hone-ui/mcp --project ./apps/web

Add it to an MCP clientCopy Anchor Link

Most clients take a mcpServers object with a command and its arguments. Check your client's own docs for the file that holds it.

{
  "mcpServers": {
    "hone-ui": {
      "command": "npx",
      "args": ["@hone-ui/mcp", "--project", "."]
    }
  }
}

To set the folder through the environment instead, add "env": { "HONE_UI_PROJECT": "." } next to args.

ToolsCopy Anchor Link

Each tool takes exactly the arguments listed under its name. The names are fixed. get_props wants name, not component, and search_guides wants text, not query. The examples below run against the Vite playground in this repository. Long output is cut.

list_componentsCopy Anchor Link

Input: {}. Returns every guide with a one-line summary. Call it first to find the right name.

Accordion: A panel that opens and closes under its summary line.
Alert: A short message about something important, with a severity icon and an optional close button.
AppBar: The bar at the top of an app that holds its title, navigation and actions.

get_guideCopy Anchor Link

Input: { name }, a guide name such as "Button" or "theming". Returns the full guide as markdown. Matching ignores case and surrounding spaces. Read the guide before you write code with a component. The server also serves the DevEditor, eslint-plugin and mcp guides. A name that is an export but not a component, such as ThemeProvider, createTheme or useColorScheme, returns the guide that covers it, with a line saying so.

# IconButton

A button that holds one icon. Always give it an accessible name with `aria-label`.

get_propsCopy Anchor Link

Input: { name }, a component name such as "Button". Returns the component's own props, one per line, with type, allowed values, minimum, maximum and default. Props that the component inherits from an HTML element are not listed.

color: 'default' | 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string (default 'default')
size: 'small' | 'medium' | 'large' (default 'medium')
onClick: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>

A prop that is not a literal union, boolean, number or string prints its type as written in the source, so a callback shows its full signature, such as onChange: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void. A long object type keeps its first members and ends in ....

search_guidesCopy Anchor Link

Input: { text }, the words to find. Returns up to 10 guide sections that contain every whole word, best match first. Each section carries its guide and heading. Long sections are cut, so call get_guide for the rest. Use it when you do not know which component covers a topic.

## CssBaseline > Host CSS beats it

The look CSS and CssBaseline sit in `@layer` blocks, and any unlayered style beats a layered one.

get_theme_variablesCopy Anchor Link

Input: { look, filter? }. look is "material" or "minimal". filter is optional text. Returns the --hn-* variables of that look with their light and dark values. filter keeps the names that contain the text.

--hn-palette-primary-main: light #1976d2, dark #90caf9
--hn-palette-primary-light: light #42a5f5, dark #e3f2fd

check_usageCopy Anchor Link

Input: { code }, a JSX or TSX snippet. It lints the snippet with the rules of @hone-ui/eslint-plugin and does not type-check. Each problem is one line, line:column rule message. A fix appears below it as an indented suggestion: line that shows only the changed text. Line numbers count from the first line of your snippet.

1:1 icon-button-label IconButton shows only an icon, so screen readers need a name. Add aria-label or aria-labelledby.
1:18 valid-prop-value "huge" is not a valid size for IconButton. Use one of: small, medium, large.
  suggestion: size="huge" -> size="large"

Added `import { IconButton } from '@hone-ui/react';` before checking. Line numbers match your snippet.

A snippet with no import from @hone-ui/react gets one for the components it uses, and the output says so. Several sibling elements that start with < parse because the tool wraps them in a fragment when it must. A clean snippet returns No problems found. Any other snippet that does not parse, such as const = ;, returns an error with the parser's message, line and column. The tool loads its TypeScript parser on the first call. If that load fails, only check_usage returns an error.

Unknown namesCopy Anchor Link

A name that is close to a component or guide, such as a typo, returns an error with the closest names. Only names within a typo's reach or that contain the text are suggested.

No component named "Buton". Closest names: Button.

When no name is close, the error says the name is not part of Hone UI, so you know to stop looking for it.

"DataGrid" is not part of Hone UI, and no component has a similar name. Call list_components for every guide.

When @hone-ui/react is not installedCopy Anchor Link

The server still starts, and it still lists its six tools, so your client does not report a closed connection. Every tool call then returns an error. The error names the folder the server searched and says to start it with --project <your app folder> or to set HONE_UI_PROJECT.

If the package is installed but its props manifest is missing or broken, get_props fails with a message to reinstall @hone-ui/react. check_usage still runs, but valid-prop-value reports nothing without the manifest.

AI guideCopy Anchor Link

An AI guide for the server ships at @hone-ui/mcp/ai/mcp.md and is served at /ai/mcp.md.