Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Construye interfaces con tu agente de programación

Elige un componente abierto por su aspecto y comportamiento; después deja que tu agente obtenga su código mediante Fieldbook MCP. Ambos trabajan con el mismo catálogo, ejemplos y orientación de integración.

Para agentes

Fieldbook es un catálogo de componentes originales de interfaz y guías para personas y agentes de programación. Incluye versiones para React, Vue, Svelte, Astro y HTML según su disponibilidad.

Acceso abierto y para miembros

Las páginas de componentes abiertos incluyen descripciones, vistas previas interactivas, controles y código. Las páginas públicas para miembros muestran únicamente título, categoría, miniatura estática, un breve video sin sonido y enlaces de acceso. El contenido para miembros requiere una membresía Pro activa o una cuenta de propietario, también por MCP. Autenticarse no otorga acceso de miembro por sí solo.

Configuración de MCP

Crea una clave API en tu panel. Define FIELDBOOK_TOKEN en el entorno de tu cliente MCP y utiliza la configuración correspondiente. Mantén las claves fuera de los archivos que guardas en el repositorio.

Autenticación: Fieldbook API

Codex

codex mcp add fieldbook --url https://fieldbook.lizardi.mx/api/mcp --bearer-token-env-var FIELDBOOK_TOKEN

Claude Code · .mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "type": "http",
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${FIELDBOOK_TOKEN}"
      }
    }
  }
}

Grok Build · ~/.grok/config.toml

[mcp_servers.fieldbook]
url = "https://fieldbook.lizardi.mx/api/mcp"
headers = { "Authorization" = "Bearer ${FIELDBOOK_TOKEN}" }

Cursor · .cursor/mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FIELDBOOK_TOKEN}"
      }
    }
  }
}

Otros clientes: usa Streamable HTTP con el endpoint MCP y envía tu token en Authorization: Bearer.

https://fieldbook.lizardi.mx/api/mcp

Autenticación

Cada herramienta MCP requiere un token Bearer autorizado: una clave API de Fieldbook o un token OAuth compatible. Los archivos públicos de consulta y las páginas de componentes abiertos no requieren autenticación.

Los clientes compatibles con OAuth pueden usar la URL de descubrimiento de recursos protegidos cuando OAuth esté configurado en el despliegue. Sigue el servidor de autorización devuelto. Si OAuth no está disponible, utiliza un cliente que admita una clave API en el encabezado Bearer.

/.well-known/oauth-protected-resource

Límites de solicitudes

Free: 60 llamadas por minuto. Pro y propietario: 600. Los límites usan una ventana de 60 segundos por cuenta en cada instancia del servidor. Respeta retryAfterSeconds cuando recibas rate_limited. La búsqueda es gratuita; una consulta exitosa de get_component cuesta 1 crédito y generate_design_system cuesta 2. Los créditos del propietario no se contabilizan.

Precios

Pro: 14,99 USD al mes. La contratación pública está cerrada. La compra de componentes individuales no está disponible.

Precios

Recursos para máquinas

El índice JSON versión 1 usa descripciones en inglés e identificadores estables de categoría. Las versiones Markdown siguen /components/{slug}/index.md, con /es, /de, /fr, /pt-br o /zh antes de /components para las traducciones. Los archivos públicos ofrecen el mismo contenido anónimo a todos los visitantes, incluidos los miembros. El resumen llms completo abarca los seis idiomas.

Explorar componentesConfigurar MCP

  1. Conecta y define el contexto del proyecto

    Crea una clave API autorizada en tu panel y sigue la guía de Codex, Claude Code, Grok, Cursor o de cualquier cliente MCP. Pide al agente que revise el framework, las convenciones visuales y las dependencias existentes antes de elegir componentes.

  2. Busca por la tarea de la interfaz

    Usa search_components con una consulta de comportamiento y el framework. Añade access: open si necesitas un componente abierto. Los resultados incluyen la URL canónica, el nivel de acceso y los frameworks probados. Compara el comportamiento interactivo antes de elegir.

    search_components
{"query":"token budget","framework":"react","access":"open","limit":5}

  3. Obtén la implementación elegida

    Llama a get_component con el slug o número de ficha y el framework. React devuelve el componente y su demo; los demás devuelven su versión. Revisa las props, dependencias, orientación y limitaciones. Conserva los nombres y los identificadores técnicos.

    get_component
{"slug":"token-budget-meter","framework":"react"}

  4. Integra y verifica en tu aplicación

    Usa get_install_command para consultar las instrucciones del registro o adapta el código y la demo al proyecto. Conecta datos y callbacks, gestiona carga y errores y prueba la acción principal en móvil y con teclado. Revisa los cambios antes de publicar.

Acceso y coste en créditos

Cada solicitud MCP requiere un token bearer. La búsqueda, los frameworks y las instrucciones de instalación de componentes abiertos son gratuitos y tienen límites de frecuencia. Un get_component exitoso cuesta un crédito; generate_design_system cuesta dos. El propietario no tiene límite de créditos. También puedes obtener código abierto desde la web sin MCP. Una consulta de código para miembros que la cuenta no puede obtener no consume créditos.

Planes

Empieza con una interfaz completa

Resuelve problemas de configuración

Sin autorización
Comprueba que FIELDBOOK_TOKEN esté disponible para el proceso del editor y que la clave no se haya revocado. Iniciar sesión en la web no añade un token al cliente MCP.
No hay componente o framework compatible
Amplía la búsqueda y consulta list_frameworks. No inventes una versión inexistente. Abre la URL del componente para revisar su estado actual.
Créditos agotados o límite de solicitudes
Consulta tu saldo en el panel. Ante un límite de frecuencia, espera el intervalo indicado. Los componentes inexistentes y los archivos ausentes no consumen créditos de consulta.

Las vistas previas usan datos locales ilustrativos. No crean bases de datos, ejecutan agentes, envían mensajes ni imponen permisos. Una obtención correcta confirma la entrega del código. Verifica la instalación y el funcionamiento en tu proyecto.