Servidor MCP Popmelt
Un servidor MCP (Protocolo de contexto de modelo) para Popmelt, que proporciona acceso a Talent AI y Taste Profiles para el diseño dinámico de componentes de UI.
Descripción general
El servidor MCP de Popmelt aprovecha el Protocolo de Contexto de Modelo para exponer perfiles de Talent AI y capacidades de estilo a LLM y otras aplicaciones. Se conecta directamente a la base de datos PostgreSQL de Popmelt para acceder y proporcionar perfiles de Talent detallados, incluyendo metadatos estructurados y atributos de estilo ponderados.
Características
- Acceso a perfiles de talento con inteligencia artificial : recupere perfiles de talento completos con sus características estéticas y atributos de diseño únicos
- Generación de estilos CSS : genere reglas de estilo CSS directamente a partir de metadatos almacenados
- Estilo dinámico de componentes de UI : integre fácilmente opciones de diseño basadas en talento en sus componentes de UI
- Integración de base de datos : Conexión directa a la base de datos PostgreSQL donde se almacenan los perfiles de talento
- Varias opciones de transporte : ejecute el servidor usando stdio para herramientas de línea de comandos o HTTP con SSE para servidores remotos
Estructura del proyecto
popmelt-mcp-server/
├── src/ # Source code
│ ├── db/ # Database access layer
│ │ └── index.ts # Database connection and query functions
│ ├── utils/ # Utility modules
│ │ └── css-generator.ts # CSS generation utilities
│ ├── mcp-server.ts # MCP server core implementation
│ ├── server.ts # Stdio transport server
│ └── http-server.ts # HTTP/SSE transport server
├── scripts/ # Helper scripts
│ ├── setup-db.sql # SQL for setting up the database
│ └── setup-db.js # Script to run the SQL setup
├── examples/ # Example client usage
│ └── generate-css.js # Example script to generate CSS
├── dist/ # Compiled TypeScript output
├── package.json # Project configuration
└── tsconfig.json # TypeScript configuration
Esquema de base de datos
El servidor Popmelt MCP utiliza una base de datos PostgreSQL con el siguiente esquema:
CREATE TABLE talents (
id VARCHAR(50) PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
metadata JSONB NOT NULL
);
Donde el campo JSON metadata tiene la siguiente estructura:
{
"aesthetic_characteristics": {
"style": "minimalist",
"mood": "calm",
"complexity": 2,
"minimalism": 9,
"boldness": 3,
"playfulness": 2,
"elegance": 8
},
"design_attributes": {
"whitespace_balance": 9,
"color_harmony": 7,
"visual_rhythm": 6,
"layout_density": 2,
"texture_use": 1,
"border_use": 2,
"shadow_use": 3
},
"color_palette": {
"primary": "#2D3748",
"secondary": "#4A5568",
"accent": "#38B2AC",
"background": "#FFFFFF",
"text": "#1A202C"
},
"typography": {
"headingFont": "Inter, sans-serif",
"bodyFont": "Inter, sans-serif",
"scale": 1.2,
"weight": "light",
"letterSpacing": 0.02,
"lineHeight": 1.5
}
}
Empezando
Prerrequisitos
- Node.js 18 o superior
- Base de datos PostgreSQL
Instalación
- Clonar este repositorio
- Instalar dependencias:
- Copie el archivo de entorno de ejemplo y actualícelo con los detalles de su base de datos:
- Configurar la base de datos:
- Construya el código TypeScript:
Ejecución del servidor
Hay dos modos de servidor disponibles:
- Modo stdio estándar (para herramientas de línea de comandos e integración directa):
- Servidor HTTP con soporte SSE (para acceso remoto e integración web):
El servidor HTTP proporciona:
- Un punto final SSE en
/sse para recibir actualizaciones en tiempo real - Un punto final POST en
/messages para enviar comandos - Un punto final de verificación de estado en
/health
Referencia de API
Recursos
El servidor expone los siguientes recursos MCP:
| URI del recurso | Descripción |
|---|
talent://list | Enumere todos los perfiles de talento disponibles |
talent://{id} | Obtenga un perfil de talento específico por ID |
talent-attribute://{id}/{attribute} | Obtener un atributo específico de un talento (admite notación de puntos para propiedades anidadas) |
component-style://{talent_id}/{component_name} | Obtener CSS para un componente específico usando un perfil de talento |
Herramientas
El servidor proporciona las siguientes herramientas MCP:
| Nombre de la herramienta | Descripción | Argumentos |
|---|
generate-css | Generar CSS para un componente basado en un perfil de talento | talentId , component , state (opcional), customProperties (opcional) |
generate-component-library | Generar CSS para una biblioteca de componentes completa | talentId |
query-talents | Realizar una consulta de solo lectura sobre los metadatos de talento | filters |
analyze-style-compatibility | Analizar la compatibilidad entre diferentes estilos de talento. | talentId1 , talentId2 |
Indicaciones
El servidor ofrece las siguientes indicaciones MCP:
| Nombre del aviso | Descripción | Argumentos |
|---|
style-component | Solicitud de LLM para diseñar un componente | talentId , component , requirements (opcional) |
create-talent-description | Indicación de LLM para crear un resumen descriptivo de un talento | talentId |
recommend-talent | Solicitud de LLM para recomendar talentos según requisitos | projectType , brandPersonality , targetAudience , aestheticPreferences (opcional) |
Ejemplo de uso
Uso del cliente MCP
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
// Create transport
const transport = new StdioClientTransport({
command: 'node',
args: ['dist/server.js']
});
// Create client
const client = new Client(
{ name: 'example-client', version: '1.0.0' },
{ capabilities: { resources: {}, tools: {} } }
);
// Connect to server
await client.connect(transport);
// List all talents
const talents = await client.listResources('talent://');
// Get a specific talent
const talent = await client.readResource('talent://modern-minimalist');
// Generate CSS for a button
const css = await client.callTool({
name: 'generate-css',
arguments: {
talentId: 'modern-minimalist',
component: 'button',
state: 'hover'
}
});
// Analyze compatibility between two talents
const compatibility = await client.callTool({
name: 'analyze-style-compatibility',
arguments: {
talentId1: 'modern-minimalist',
talentId2: 'bold-vibrant'
}
});
Ejecución del script de ejemplo
node examples/generate-css.js
Este script de ejemplo demuestra cómo utilizar el cliente MCP para generar CSS para todos los talentos disponibles y analizar la compatibilidad entre dos talentos.
Desarrollo
Construyendo el Proyecto
Ejecutando en modo de desarrollo
Licencia
Instituto Tecnológico de Massachusetts (MIT)