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:
npm install
Copie el archivo de entorno de ejemplo y actualícelo con los detalles de su base de datos:
cp .env.example .env
Configurar la base de datos:
node scripts/setup-db.js
Construya el código TypeScript:
npm run build

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):

npm start

Servidor HTTP con soporte SSE (para acceso remoto e integración web):

npm run start:http

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

npm run build

Ejecutando en modo de desarrollo

npm run dev

Licencia

Instituto Tecnológico de Massachusetts (MIT)

Popmelt MCP Server

Integrations