Use with AI

Three pieces, built from the same data as this site, so they never disagree with it. The skill teaches the conventions up front (the shared props, how each component's value works, which component to pick) and has a reference file per component. The MCP server answers live: it searches the docs and reads the props, examples and accessibility notes of any component. The plugin installs both in one step in Claude Code.

Add this repository as a marketplace and install the plugin. It installs the skill and connects the MCP server:

/plugin marketplace add vaiperliotech/vaiperui
/plugin install vaiperui@vaiperui

The skill loads by itself when you work with vaiperui; you can also call it with /vaiperui:vaiperui. If it does not show up right away, run /reload-plugins.

The server is hosted on this site, so nothing runs on your machine: it is public, read-only and needs no account. Add it to Claude Code with:

claude mcp add --transport http vaiperui https://vaiperui.vercel.app/mcp

Other clients take the same URL. Cursor and VS Code look like this; in any other client, add a remote (HTTP) MCP server with the URL https://vaiperui.vercel.app/mcp in its MCP settings. Check your client's documentation, since the file names change between versions.

{
  "mcpServers": {
    "vaiperui": { "url": "https://vaiperui.vercel.app/mcp" }
  }
}

{
  "servers": {
    "vaiperui": { "type": "http", "url": "https://vaiperui.vercel.app/mcp" }
  }
}

Opening https://vaiperui.vercel.app/mcp in a browser also shows these instructions.

Four read-only tools. Each takes an optional locale (en, pt or es):

• list_components: Every component with a one-line description, by group.
• search_docs: Finds the component for a need (dropdown, infinite scroll in a select, input mask for phone). Searches components, props, examples, accessibility notes and guides.
• get_component: The full reference of one component: import, usage, every prop with values and defaults, accessibility, and every example on request. The name is flexible: Button, DatePicker, date-picker.
• get_setup: Install command, CSS imports, dark mode and theming.

Every component is also a resource (vaiperui://component/slug) for clients that attach documents as context.

Without the plugin, copy the skill that ships inside the package into your project, or into ~/.claude/skills to use it in every project:

mkdir -p .claude/skills
cp -r node_modules/vaiperui/skills/vaiperui .claude/skills/

mkdir -p ~/.claude/skills
cp -r node_modules/vaiperui/skills/vaiperui ~/.claude/skills/

It works with any agent that supports Agent Skills. For the others, point the agent at SKILL.md and the files in references/: they are plain Markdown.

Ask for whole screens: the agent looks each component up instead of guessing its props.

• Build a booking form with vaiperui: masked phone, searchable country select, a date range with shortcuts and a success toast.
• Add a users table with avatar, status badge, a row actions menu, a delete confirmation modal and pagination.
• Make the select load users from my API, with infinite scroll and server-side search.