MCP Server

PreviousNext

Let Claude Code, Cursor, VS Code and other assistants browse the registry and read component source directly, instead of guessing or scraping.

bna-ui mcp runs a Model Context Protocol server over the same registry the CLI installs from. Your assistant asks it what exists and reads the real source, rather than recalling a component library from its training data — which, for anything that looks like this one, means web React.

Install

claude mcp add bna-ui -- npx -y bna-ui mcp

Then ask for a component by name — "add a BNA UI button with a loading state" — and Claude will call get_component before writing anything.

Tools

ToolWhat it answers
list_componentsEverything installable, filterable by component, chart, hook or theme.
search_components"Which component does X?" — matches names and descriptions.
get_componentDescription, props, variants, usage, accessibility notes, dependencies, full source and every example.
get_component_sourceJust the source, for when the API is already known.
get_install_planThe exact add command, the npm packages, and the files it will write. Never writes anything itself.
get_docsAny documentation page as Markdown, with all source expanded inline.

Every component response is prefixed with the React-Native constraint, because a model that read it once at the start of a long session has usually stopped attending to it by the time it writes the JSX.

Nothing is written to disk

get_install_plan returns a command; it does not run it. Installing stays an explicit step you or your assistant takes with npx bna-ui add, so nothing appears in your project without you asking.

Without MCP

Any agent that can run a command gets the same data:

pnpm dlx bna-ui info button --json

Or fetch it directly — see AI & LLMs for every endpoint.