Popmelt MCP Server

Popmelt MCP Server

镜子 (jìng zi)

MCP-Mirror

研究与数据
访问服务器

README

Popmelt MCP 服务器

一个用于 Popmelt 的 MCP (模型上下文协议) 服务器,提供对 Talent AI 和风格配置文件的访问,用于动态 UI 组件样式设计。

概述

Popmelt MCP 服务器利用模型上下文协议,向 LLM 和其他应用程序公开 Talent AI 配置文件和样式设计能力。它直接连接到 Popmelt 的 PostgreSQL 数据库,以访问和提供详细的 Talent 配置文件,包括结构化元数据和加权样式属性。

功能

  • Talent AI 配置文件访问: 检索完整的 Talent 配置文件,其中包含其独特的审美特征和设计属性
  • CSS 样式生成: 直接从存储的元数据生成 CSS 样式规则
  • 动态 UI 组件样式设计: 轻松将 Talent 驱动的设计选择集成到您的 UI 组件中
  • 数据库集成: 直接连接到存储 Talent 配置文件的 PostgreSQL 数据库
  • 多种传输选项: 使用 stdio 运行服务器以用于命令行工具,或使用带有 SSE 的 HTTP 用于远程服务器

项目结构

popmelt-mcp-server/
├── src/                         # 源代码
│   ├── db/                      # 数据库访问层
│   │   └── index.ts             # 数据库连接和查询函数
│   ├── utils/                   # 实用程序模块
│   │   └── css-generator.ts     # CSS 生成实用程序
│   ├── mcp-server.ts            # MCP 服务器核心实现
│   ├── server.ts                # Stdio 传输服务器
│   └── http-server.ts           # HTTP/SSE 传输服务器
├── scripts/                     # 辅助脚本
│   ├── setup-db.sql             # 用于设置数据库的 SQL
│   └── setup-db.js              # 运行 SQL 设置的脚本
├── examples/                    # 客户端使用示例
│   └── generate-css.js          # 生成 CSS 的示例脚本
├── dist/                        # 编译后的 TypeScript 输出
├── package.json                 # 项目配置
└── tsconfig.json                # TypeScript 配置

数据库模式

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 数据库

安装

  1. 克隆此存储库
  2. 安装依赖项:
    npm install
    
  3. 复制示例环境变量文件并使用您的数据库详细信息更新:
    cp .env.example .env
    
  4. 设置数据库:
    node scripts/setup-db.js
    
  5. 构建 TypeScript 代码:
    npm run build
    

运行服务器

有两种服务器模式可用:

  1. 标准 stdio 模式(用于命令行工具和直接集成):
npm start
  1. 带有 SSE 支持的 HTTP 服务器(用于远程访问和 Web 集成):
npm run start:http

HTTP 服务器提供:

  • /sse 上的 SSE 端点,用于接收实时更新
  • /messages 上的 POST 端点,用于发送命令
  • /health 上的健康检查端点

API 参考

资源

服务器公开以下 MCP 资源:

资源 URI 描述
talent://list 列出所有可用的 Talent 配置文件
talent://{id} 按 ID 获取特定的 Talent 配置文件
talent-attribute://{id}/{attribute} 获取 Talent 的特定属性(支持点表示法用于嵌套属性)
component-style://{talent_id}/{component_name} 使用 Talent 配置文件获取特定组件的 CSS

工具

服务器提供以下 MCP 工具:

工具名称 描述 参数
generate-css 基于 Talent 配置文件为组件生成 CSS talentIdcomponentstate(可选)、customProperties(可选)
generate-component-library 为完整的组件库生成 CSS talentId
query-talents 对 Talent 元数据执行只读查询 filters
analyze-style-compatibility 分析不同 Talent 风格之间的兼容性 talentId1talentId2

提示

服务器提供以下 MCP 提示:

提示名称 描述 参数
style-component 用于设计组件样式的 LLM 提示 talentIdcomponentrequirements(可选)
create-talent-description 用于创建 Talent 描述性摘要的 LLM 提示 talentId
recommend-talent 用于根据需求推荐 Talent 的 LLM 提示 projectTypebrandPersonalitytargetAudienceaestheticPreferences(可选)

使用示例

使用 MCP 客户端

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';

// 创建传输
const transport = new StdioClientTransport({
  command: 'node',
  args: ['dist/server.js']
});

// 创建客户端
const client = new Client(
  { name: 'example-client', version: '1.0.0' },
  { capabilities: { resources: {}, tools: {} } }
);

// 连接到服务器
await client.connect(transport);

// 列出所有 Talent
const talents = await client.listResources('talent://');

// 获取特定的 Talent
const talent = await client.readResource('talent://modern-minimalist');

// 为按钮生成 CSS
const css = await client.callTool({
  name: 'generate-css',
  arguments: {
    talentId: 'modern-minimalist',
    component: 'button',
    state: 'hover'
  }
});

// 分析两个 Talent 之间的兼容性
const compatibility = await client.callTool({
  name: 'analyze-style-compatibility',
  arguments: {
    talentId1: 'modern-minimalist',
    talentId2: 'bold-vibrant'
  }
});

运行示例脚本

node examples/generate-css.js

此示例脚本演示如何使用 MCP 客户端为所有可用的 Talent 生成 CSS,并分析两个 Talent 之间的兼容性。

开发

构建项目

npm run build

在开发模式下运行

npm run dev

许可证

MIT

推荐服务器

Crypto Price & Market Analysis MCP Server

Crypto Price & Market Analysis MCP Server

一个模型上下文协议 (MCP) 服务器,它使用 CoinCap API 提供全面的加密货币分析。该服务器通过一个易于使用的界面提供实时价格数据、市场分析和历史趋势。 (Alternative, slightly more formal and technical translation): 一个模型上下文协议 (MCP) 服务器,利用 CoinCap API 提供全面的加密货币分析服务。该服务器通过用户友好的界面,提供实时价格数据、市场分析以及历史趋势数据。

精选
TypeScript
MCP PubMed Search

MCP PubMed Search

用于搜索 PubMed 的服务器(PubMed 是一个免费的在线数据库,用户可以在其中搜索生物医学和生命科学文献)。 我是在 MCP 发布当天创建的,但当时正在度假。 我看到有人在您的数据库中发布了类似的服务器,但还是决定发布我的服务器。

精选
Python
mixpanel

mixpanel

连接到您的 Mixpanel 数据。 从 Mixpanel 分析查询事件、留存和漏斗数据。

精选
TypeScript
Sequential Thinking MCP Server

Sequential Thinking MCP Server

这个服务器通过将复杂问题分解为顺序步骤来促进结构化的问题解决,支持修订,并通过完整的 MCP 集成来实现多条解决方案路径。

精选
Python
Nefino MCP Server

Nefino MCP Server

为大型语言模型提供访问德国可再生能源项目新闻和信息的能力,允许按地点、主题(太阳能、风能、氢能)和日期范围进行筛选。

官方
Python
Vectorize

Vectorize

将 MCP 服务器向量化以实现高级检索、私有深度研究、Anything-to-Markdown 文件提取和文本分块。

官方
JavaScript
Mathematica Documentation MCP server

Mathematica Documentation MCP server

一个服务器,通过 FastMCP 提供对 Mathematica 文档的访问,使用户能够从 Wolfram Mathematica 检索函数文档和列出软件包符号。

本地
Python
kb-mcp-server

kb-mcp-server

一个 MCP 服务器,旨在实现便携性、本地化、简易性和便利性,以支持对 txtai “all in one” 嵌入数据库进行基于语义/图的检索。任何 tar.gz 格式的 txtai 嵌入数据库都可以被加载。

本地
Python
Research MCP Server

Research MCP Server

这个服务器用作 MCP 服务器,与 Notion 交互以检索和创建调查数据,并与 Claude Desktop Client 集成以进行和审查调查。

本地
Python
Cryo MCP Server

Cryo MCP Server

一个API服务器,实现了模型补全协议(MCP),用于Cryo区块链数据提取,允许用户通过任何兼容MCP的客户端查询以太坊区块链数据。

本地
Python