Adobe Express

Integra con Adobe Express usando LLMs para optimizar tareas y flujos de trabajo creativos.

GitHub
13
Prueba este MCPPatrocinado

Documentación

Servidor MCP Comunitario para Desarrolladores de Complementos de Adobe Express

Este es un servidor de Protocolo de Contexto de Modelo (MCP) diseñado para desarrolladores de complementos de Adobe Express. Proporciona herramientas enfocadas en desarrolladores para ayudar a crear complementos de Adobe Express e integrarse con el SDK de Adobe Express.

Verified on MseeP

Características

El servidor proporciona las siguientes herramientas:

Herramientas para Desarrolladores

  1. Andamiar Proyecto de Complemento - Crear un nuevo proyecto de complemento de Adobe Express basado en plantillas de muestra
  2. Obtener Ejemplos de Código - Recuperar ejemplos de código para características comunes de complementos de Adobe Express (obtenidos dinámicamente de GitHub cuando está en modo GitHub)
  3. Implementar Característica - Obtener orientación de implementación para agregar características específicas a un complemento de Adobe Express

Herramientas de Documentación

  1. Obtener Capacidades del Asistente - Obtener información sobre las capacidades del asistente
  2. Establecer Fuente de Conocimiento - Cambiar entre el modo de API de GitHub y el modo de documentación local
  3. Consultar Documentación - Buscar documentación del SDK de Adobe Express y de los Componentes Web de Spectrum

Instalación

Puede instalar el Servidor MCP de Adobe Express de varias maneras:

Método 1: Instalar desde NPM

# Install globally
npm install -g community-express-dev-mcp

# Run the VS Code installation script
express-mcp-install

Método 2: Instalar desde GitHub

# Clone the repository
git clone https://github.com/EnventDigital/community-express-dev-mcp.git
cd community-express-dev-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run the VS Code installation script
npm run install-in-vscode

Método 3: Instalar en un espacio de trabajo específico de VS Code

Si desea usar el servidor MCP en un espacio de trabajo específico de VS Code:

# If installed globally from NPM:
cd /path/to/your/project
express-mcp-workspace

# If installed from GitHub:
cd /path/to/your/project
/path/to/community-express-dev-mcp/scripts/install-to-workspace.js

Esto creará un archivo .vscode/mcp.json en su proyecto que configura el servidor MCP de Adobe Express para ese espacio de trabajo.

Desarrollo

# Build the project
npm run build

# Start the server in development mode
npm run dev

# Start the server
npm start

# Parse documentation repositories for local mode
npm run parse-docs

Fuentes de Documentación

Este servidor MCP puede acceder a documentación de dos fuentes:

1. Modo GitHub (Predeterminado)

En el modo GitHub, el servidor usa la API de GitHub para buscar y obtener documentación de:

Para usar el modo GitHub, necesita crear un Token de Acceso Personal (PAT) de GitHub y agregarlo a su archivo .env:

MCP_GITHUB_PAT=your_github_token_here

2. Modo Local

En el modo local, el servidor usa documentación preanalizada almacenada en un archivo de base de conocimiento local. Para generar este archivo:

  1. Clone los repositorios de documentación:
mkdir -p adobe-docs-repo
git clone https://github.com/AdobeDocs/express-add-ons-docs.git adobe-docs-repo/express-add-ons-docs
git clone https://github.com/adobe/spectrum-web-components.git adobe-docs-repo/spectrum-web-components
  1. Construya el proyecto y ejecute el analizador:
npm run build
npm run parse-docs
  1. Esto crea un archivo dist/knowledge_base.json con documentación analizada.

Puede cambiar entre modos usando la herramienta "setKnowledgeSource" o configurando KNOWLEDGE_SOURCE_MODE en su archivo .env.

Uso con Claude para Escritorio

Para usar este servidor MCP con Claude para Escritorio:

  1. Construya el proyecto usando npm run build

  2. Abra/crea el archivo de configuración de Claude para Escritorio:

    • Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
    • Windows: %APPDATA%\Claude\claude_desktop_config.json

    Puede crear/editar este archivo con VS Code:

    # For Mac
code ~/Library/Application\ Support/Claude/claude_desktop_config.json

# For Windows
code %APPDATA%\Claude\claude_desktop_config.json

  3. Agregue la configuración del servidor:

{
  "mcpServers": {
    "adobe-express": {
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/community-express-dev-mcp/dist/index.js"
      ]
    }
  }
}

  1. Reemplace /ABSOLUTE/PATH/TO/ con la ruta real a su proyecto. Por ejemplo:

    "/Users/username/Documents/community-express-dev-mcp/dist/index.js"

  2. Guarde el archivo y reinicie Claude para Escritorio

  3. Cuando abra Claude, debería ver un ícono de martillo, lo que indica que las herramientas MCP están disponibles:

    MCP Tools Icon

  4. Ahora puede usar indicaciones como "Ayúdame a andamiar un proyecto de complemento de diálogo" o "Muéstrame ejemplos de código para la API de Diálogo" y Claude usará las herramientas para desarrolladores

Ejemplos de Indicaciones

Aquí hay algunos ejemplos de indicaciones para probar con Claude y este servidor MCP:

Ejemplos de Herramientas para Desarrolladores

  • "Ayúdame a andamiar un nuevo proyecto de complemento de diálogo"
  • "Muéstrame ejemplos de código para importar imágenes locales en un complemento de Adobe Express"
  • "¿Cómo implemento la funcionalidad de arrastrar y soltar en mi complemento?"
  • "Dame un ejemplo de código de uso de la API de Diálogo"
  • "Ayúdame a implementar autenticación OAuth en mi complemento de Express"

Ejemplos de Herramientas de Documentación

  • "¿Qué capacidades tiene este servidor MCP?"
  • "Busca documentación sobre botones de Componentes Web de Spectrum"
  • "¿Cómo uso el SDK de Adobe Express en mi complemento?"
  • "Encuentra documentación sobre componentes spectrum-tooltip"
  • "Cambia al modo de documentación local"

Uso con VS Code

Este servidor MCP está configurado para funcionar con el modo agente de GitHub Copilot de VS Code. Siga estos pasos para usarlo:

Requisitos Previos

  • Visual Studio Code (versión 1.99 o más reciente)
  • Extensión de GitHub Copilot
  • Entorno Node.js (v18 o más reciente recomendado)

Configuración

Opción 1: Usando los Scripts de Instalación

La forma más fácil de configurar el servidor MCP en VS Code es usar uno de los métodos de instalación descritos en la sección Instalación anterior. Estos scripts:

  1. Crearán la configuración correcta para el servidor MCP
  2. Generarán una URL de un clic para instalar en VS Code
  3. Solicitarán automáticamente el PAT de GitHub cuando sea necesario

Opción 2: Configuración Manual

Si prefiere configurar manualmente:

  1. Asegúrese de haber construido el proyecto: npm run build
  2. Configure el servidor:
    • Usando la configuración global de MCP en la configuración de VS Code
    • O usando el archivo .vscode/mcp.json específico del espacio de trabajo (ya incluido en este proyecto)
  3. En VS Code, asegúrese de que la configuración chat.mcp.enabled esté activada:
    • Abra la configuración (Ctrl+, o Cmd+,)
    • Busque chat.mcp.enabled
    • Asegúrese de que esté marcada
  4. Abra la Paleta de Comandos (Ctrl+Shift+P o Cmd+Shift+P)
  5. Ejecute MCP: List Servers para ver los servidores disponibles
  6. Inicie el servidor adobeExpressDev desde la lista
  7. Cuando se le solicite, ingrese su Token de Acceso Personal de GitHub para acceder a los ejemplos de código

Uso con Copilot

  1. Abra la vista de Chat de VS Code (Ctrl+Alt+I o Cmd+I)
  2. Seleccione "Modo agente" en el menú desplegable
  3. Haga clic en el botón "Herramientas" para ver las herramientas disponibles, incluidas las herramientas para desarrolladores de Adobe Express
  4. Haga preguntas como:
    • "Crea un nuevo complemento de Adobe Express que use la API de diálogo"
    • "Muéstrame ejemplos de código para importar imágenes en un complemento de Express"
    • "¿Cómo implemento autenticación OAuth en mi complemento?"

El servidor MCP mejora Copilot con conocimiento especializado en desarrollo de complementos de Adobe Express y ejemplos de código extraídos directamente del repositorio oficial de muestras.

Paquete NPM

El Servidor MCP de Adobe Express está disponible como un paquete npm que puede instalar globalmente o como dependencia en su proyecto:

# Install globally
npm install -g community-express-dev-mcp

# Or install as a dev dependency in your project
npm install --save-dev community-express-dev-mcp

Después de la instalación, puede usar los siguientes comandos:

# Install globally in VS Code
express-mcp-install

# Install in current workspace
express-mcp-workspace

# Show help
express-mcp-help

Solución de Problemas

Error: La herramienta no tiene outputSchema pero devolvió structuredContent

Si encuentra este error:

Error: MPC -32603: MCP error -32603: Tool queryDocumentation has no outputSchema but returned structuredContent

Esto indica que la herramienta MCP está devolviendo contenido estructurado pero no tiene un esquema de salida definido correctamente. Esto se ha corregido en la versión 1.0.1+.

Solución:

  1. Asegúrese de estar usando la versión más reciente del servidor MCP
  2. Reconstruya el servidor con npm run build
  3. Reinicie el servidor MCP en su editor

Si aún está experimentando problemas:

  1. Verifique que el formato del esquema de salida siga el formato de esquema MCP (no use la propiedad .shape de Zod)
  2. Asegúrese de que la estructura del objeto structuredContent coincida con el esquema de salida definido
  3. Pruebe el servidor localmente con el script de prueba incluido: npm run test-server

Error: "cb is not a function"

Este error generalmente ocurre cuando el formato de devolución de llamada es incorrecto en una función de herramienta o cuando el valor de retorno de la herramienta no coincide con el formato esperado.

Solución:

  1. Asegúrese de que la salida de su herramienta esté en el formato correcto: { structuredContent: {...}, content: [...] }
  2. Evite usar interfaces de TypeScript directamente como valores de retorno; en su lugar, cree un objeto simple que coincida con el esquema
  3. Verifique que todos los campos requeridos en el esquema de salida estén presentes en el objeto structuredContent

Otros Problemas Comunes

  • Límite de Tasa de la API de GitHub: Si está en modo GitHub y no proporciona un Token de Acceso Personal (PAT) de GitHub, puede alcanzar los límites de tasa.
  • La Base de Conocimiento No Se Carga: Si usa el modo local, asegúrese de que el archivo knowledge_base.json exista en la raíz del proyecto.
  • Comando No Encontrado: Asegúrese de haber construido el proyecto con npm run build antes de intentar ejecutar el servidor.

Licencia

MIT