Avantjohn MCP Server Test 04

🚀 Popmelt MCP Server

Popmelt MCP Server is a powerful tool designed to manage and operate Talent configuration files and their related attributes. It can connect to a PostgreSQL database and support interactions via the MCP protocol.

✨ Features

• Talent AI Profile Access: Provides the ability to read talent configuration files.
• Specific Talent Information Retrieval: Allows querying information of a specific talent by ID.
• Talent Attribute Query: Supports querying specific attributes of a talent by ID and attribute name (supports nested queries using dot notation).
• Component Style Generation: Generates CSS style sheets for specified components based on talent configuration files.
• CSS Generation Tool: Offers the function to generate CSS for a single component or a complete component library.
• Talent Query Tool: Supports ReadOnly query operations on talent metadata.
• Style Compatibility Analysis Tool: Can analyze the compatibility between different talent styles.

📁 Project Structure

- dist/                 # Compiled output directory
- src/
    - index.ts         # Entry file
    - server.ts       # Core server logic
    - database.ts     # Database connection and operations
    - tools/
        - generate_css.ts   # CSS generation tool
        - analyze_compatibility.ts # Style compatibility analysis tool

📚 Database Schema

CREATE TABLE talents (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255),
    description TEXT,
    attributes JSONB NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Note: The attributes field stores the attribute information of talent configuration files in JSONB format for easy storage and query of data with complex structures.

🚀 Quick Start

📦 Install Dependencies

npm install

⚙️ Set Environment Variables

Edit the .env file:

# Database connection configuration
DB_HOST=your-database-host
DB_PORT=5432
DB_NAME=your-database-name
DB_USER=your-database-user
DB_PASSWORD=your-database-password

▶️ Start the Server

npm run start

📄 API Reference

📌 Resource Interfaces

• Talent Configuration File List: talent://
• Specific Talent Information: talent://{id}
• Talent Attribute Query: talent-attribute://{id}/{attribute}
• Component Style Retrieval: component-style://{talent_id}/{component_name}

🛠️ Tool Interfaces

• Generate CSS Styles: generate-css
• Generate Component Library: generate-component-library
• Talent Query: query-talents
• Style Compatibility Analysis: analyze-style-compatibility

💻 Usage Examples

🔌 Using the MCP Client

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

// Create a transport channel
const transport = new StdioClientTransport({
  command: 'node',
  args: ['dist/server.js']
});

// Initialize the client
const client = new Client(
  { name: 'Example Client', version: '1.0.0' },
  { capabilities: { resources: {}, tools: {} } }
);

// Connect to the server
await client.connect(transport);

// Get all talent information
const allTalents = await client.listResources('talent://');

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

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

// Analyze style compatibility
const compatibilityAnalysisResult = await client.callTool({
  name: 'analyze-style-compatibility',
  arguments: {
    talentId1: 'modern-minimalist',
    talentId2: 'bold-vibrant'
  }
});

🚀 Running Example Scripts

node examples/generate-css.js

This example script demonstrates how to use the MCP client to generate CSS styles for all available talents and analyze the compatibility between two different talent styles.

🛠️ Development Guide

• Debugging: npm run debug
• Testing: npm test

📄 License

This project is licensed under the MIT License.