MCP Server Test 04

🚀 Popmelt MCP Server

A Model Context Protocol (MCP) server for Popmelt, enabling access to Talent AI and Taste Profile for dynamic UI component styling.

🚀 Quick Start

Installation Dependencies

npm install @modelcontextprotocol/sdk client postgresql

Initialize the Database

CREATE TABLE IF NOT EXISTS Talents (
    id UUID PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    stylePreferences JSONB NOT NULL
);

CREATE TABLE IF NOT EXISTS ComponentStyles (
    id UUID PRIMARY KEY,
    talentId UUID NOT NULL REFERENCES Talents(id),
    componentName VARCHAR(255) NOT NULL,
    styleDefinitions JSONB NOT NULL
);

Start the Server

npm run dev

✨ Features

• Talent Profile Access: Retrieve detailed information about Talent, including their design styles and preferences.
• Dynamic Styling: Generate dynamic UI component styles based on Talent configurations.
• Compatibility Analysis: Analyze the style compatibility between different Talents.
• CSS Generation: Automatically generate component CSS styles based on Talent.

📦 Project Structure

src/
├── server.ts              # Main file of the MCP server
├── Database.ts           # Database connection and interaction logic
├── TalentProfile.ts      # Definition of the Talent class
└── ComponentStyling.ts   # Logic for generating component styles

📚 Documentation

Database Schema

Table Structure

Talents Table

ComponentStyles Table

Example SQL

-- Query all Talents
SELECT id, name, description FROM Talents;

-- Get the style preferences of a specific Talent
SELECT stylePreferences FROM Talents WHERE id = 'specific ID';

-- Insert a new component style
INSERT INTO ComponentStyles (talentId, componentName, styleDefinitions)
VALUES ('specific Talent ID', 'button', '{"padding": "1rem", "color": "#2196F3"}');

API Reference

Resources

• talent://: List all Talents.
• talent://{id}: Get detailed information about a specific Talent.
• component-style://{talent_id}/{component_name}: Get the style based on the Talent ID and component name.

Tools

• generate-css: Generate component CSS styles based on Talent.
• analyze-compatibility: Analyze the style compatibility between two Talents.

💻 Usage Examples

Basic Usage

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

// Get all Talents
const talents = await client.listResources('talent://');

// Get a specific Talent
const talent = await client.readResource('talent://modern-minimalist');

🔧 Technical Details

Build the Project

npm run build

Run in Development Mode

npm run dev

📄 License

MIT