팝멜트 MCP 서버

Popmelt용 MCP(Model Context Protocol) 서버로, 동적 UI 구성 요소 스타일링을 위한 Talent AI 및 Taste Profiles에 대한 액세스를 제공합니다.

개요

Popmelt MCP 서버는 모델 컨텍스트 프로토콜을 활용하여 인재 AI 프로필과 스타일링 기능을 LLM 및 기타 애플리케이션에 제공합니다. Popmelt의 PostgreSQL 데이터베이스에 직접 연결하여 구조화된 메타데이터 및 가중치 적용 스타일링 속성을 포함한 자세한 인재 프로필에 액세스하고 제공합니다.

특징

인재 AI 프로필 액세스 : 고유한 미적 특성과 디자인 속성을 갖춘 완전한 인재 프로필을 검색합니다.
CSS 스타일링 생성 : 저장된 메타데이터에서 직접 CSS 스타일링 규칙을 생성합니다.
동적 UI 구성 요소 스타일링 : 재능 중심 디자인 선택을 UI 구성 요소에 쉽게 통합
데이터베이스 통합 : 인재 프로필이 저장된 PostgreSQL 데이터베이스에 직접 연결
다양한 전송 옵션 : 명령줄 도구의 경우 stdio를 사용하여 서버를 실행하고 원격 서버의 경우 SSE를 사용하여 HTTP를 실행합니다.

프로젝트 구조

지엑스피1

데이터베이스 스키마

Popmelt MCP 서버는 다음 스키마를 사용하는 PostgreSQL 데이터베이스를 사용합니다.

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

metadata JSON 필드의 구조는 다음과 같습니다.

{
  "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
  }
}

시작하기

필수 조건

Node.js 18 이상
PostgreSQL 데이터베이스

설치

이 저장소를 복제하세요
종속성 설치:
npm install
예제 환경 파일을 복사하고 데이터베이스 세부정보로 업데이트합니다.
cp .env.example .env
데이터베이스 설정:
node scripts/setup-db.js
TypeScript 코드를 작성합니다.
npm run build

서버 실행

두 가지 서버 모드를 사용할 수 있습니다.

표준 stdio 모드 (명령줄 도구 및 직접 통합용):

npm start

SSE를 지원하는 HTTP 서버 (원격 액세스 및 웹 통합용):

npm run start:http

HTTP 서버는 다음을 제공합니다.

실시간 업데이트를 수신하기 위한 /sse 의 SSE 엔드포인트
명령을 보내기 위한 /messages 의 POST 엔드포인트
/health 의 상태 점검 엔드포인트

API 참조

자원

서버는 다음과 같은 MCP 리소스를 제공합니다.

리소스 URI	설명
`talent://list`	사용 가능한 모든 인재 프로필을 나열하세요
`talent://{id}`	ID로 특정 재능 프로필을 얻으세요
`talent-attribute://{id}/{attribute}`	재능의 특정 속성을 가져옵니다(중첩된 속성에 대해 점 표기법 지원)
`component-style://{talent_id}/{component_name}`	재능 프로필을 사용하여 특정 구성 요소에 대한 CSS 가져오기

도구

서버는 다음과 같은 MCP 도구를 제공합니다.

도구 이름	설명	인수
`generate-css`	재능 프로필을 기반으로 구성 요소에 대한 CSS 생성	`talentId` , `component` , `state` (선택 사항), `customProperties` (선택 사항)
`generate-component-library`	완전한 구성 요소 라이브러리에 대한 CSS 생성	`talentId`
`query-talents`	인재 메타데이터에 대한 읽기 전용 쿼리 수행	`filters`
`analyze-style-compatibility`	다양한 재능 스타일 간의 호환성을 분석합니다.	`talentId1` , `talentId2`

프롬프트

서버는 다음과 같은 MCP 프롬프트를 제공합니다.

프롬프트 이름	설명	인수
`style-component`	구성 요소 스타일링을 위한 LLM 프롬프트	`talentId` , `component` , `requirements` (선택 사항)
`create-talent-description`	재능에 대한 설명적 요약을 작성하기 위한 LLM 프롬프트	`talentId`
`recommend-talent`	LLM은 요구사항에 따른 인재 추천을 요구합니다.	`projectType` , `brandPersonality` , `targetAudience` , `aestheticPreferences` (선택 사항)

사용 예

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'
  }
});

예제 스크립트 실행

node examples/generate-css.js

이 예제 스크립트는 MCP 클라이언트를 사용하여 사용 가능한 모든 재능에 대한 CSS를 생성하고 두 재능 간의 호환성을 분석하는 방법을 보여줍니다.

개발

프로젝트 구축

npm run build

개발 모드에서 실행

npm run dev

특허

MIT

Popmelt MCP Server

Integrations