Saltar al contenido
EspañolEnglish

Servidor MCP

@amset/mcp es un servidor MCP local que le da a tu asistente de código (Claude Code, Cursor y cualquier cliente MCP) ocho herramientas para trabajar con @amset/ui sin inventarse nada. Corre en tu máquina, sin red, y lee la versión de la biblioteca que tiene instalada tu proyecto: lo que responde es lo que vas a poder importar.

Qué le da a tu asistente

Todas leen del paquete instalado; ninguna trae su propia copia de la biblioteca.

search_components

Busca componentes por lo que necesitas («fecha», «subir un fichero», «tabla con filtros»), en su nombre y en su ficha. Para dar con el componente sin saber cómo se llama.

get_component_schema

Las props reales de un componente, sacadas del compilador: tipo, si es obligatoria y para qué sirve. Si el nombre no existe, propone el más parecido («¿Querías decir "Button"?»).

get_component_examples

El código de uso real de un componente, sacado de sus historias del banco de pruebas por el build de la biblioteca. Nunca escrito a mano.

validate_code_snippet

Compila un fragmento con TypeScript contra la biblioteca instalada: la única forma fiable de saber que un import, una prop o un tipo son correctos.

search_icons

Busca entre los más de 2000 iconos por palabras en inglés («cart», «trash», «arrow down»), para no adivinar el nombre exacto.

search_utilities

Busca entre los hooks, funciones y constantes que exporta la biblioteca («money», «day», «aria»), para no reinventar lo que ya existe.

get_design_tokens

Los tokens de geometría y tipografía, los roles de color en claro y oscuro y las variables CSS de cada componente.

generate_theme_from_hex

Genera el tema claro y oscuro a partir de tus colores de marca, y se niega si la paleta no cumple el contraste mínimo: el mismo criterio que npx amset-ui theme.

Instalar

Vive en el mismo registro de paquetes de AMSET que la biblioteca. Una línea en el .npmrc del proyecto sirve para los dos paquetes, y el token de lectura va en el tuyo:

.npmrc
# .npmrc del proyecto (sin token: eso nunca se commitea)@amset:registry=https://gitlab.amset.tech/api/v4/packages/npm/
~/.npmrc
# ~/.npmrc, el tuyo, fuera del repositorio//gitlab.amset.tech/api/v4/:_authToken=TU_TOKEN

El token va sobre /api/v4/ y no sobre la dirección del registro porque cada paquete se descarga desde la de su proyecto: con el token solo en el registro, la consulta funciona y la descarga da 401.

Y en el proyecto que use @amset/ui:

Código
npm i -D @amset/mcp

Conectarlo

Claude Code, desde la carpeta del proyecto:

Código
claude mcp add --scope project amset-ui -- npx amset-mcp

Eso deja un .mcp.json en el proyecto que puedes commitear para todo el equipo:

.mcp.json
{  "mcpServers": {    "amset-ui": {      "type": "stdio",      "command": "npx",      "args": [        "amset-mcp"      ]    }  }}

Cursor, Claude Desktop y el resto de clientes MCP: la misma entrada (command y args) en su configuración. El servidor busca @amset/ui desde la carpeta en la que arranca, así que tiene que lanzarse desde la del proyecto.

Qué necesita

  • Un proyecto con @amset/ui de la 0.9.0 a la 0.14 y Node.js 18 o superior. Con la 0.17 o posterior, mira el aviso de arriba.
  • get_component_examples necesita @amset/ui 0.11.0 o superior, la primera que publica sus ejemplos. Con una anterior lo dice y no se inventa ninguno.
  • validate_code_snippet compila con los tipos de tu proyecto: necesita @types/react, como cualquier proyecto React con TypeScript.

Errores, nunca inventados

Si el componente, la prop o el color no existen, la herramienta contesta con el motivo real (la biblioteca no está instalada, el color no se entiende, la paleta no da el contraste, la versión instalada no trae los ejemplos) en vez de rellenar el hueco con algo que parezca bueno.