MCP Server Test 01

🚀 Popmelt MCP Server API Documentation

This API documentation provides details on how to interact with the Popmelt MCP server, including endpoints, configuration file structures, and more.

✨ Features

• Retrieve available component templates.
• Create design system profiles using templates.
• Automatically generate CSS variables from design tokens.
• Support for health checks and error handling.

📦 Installation

No installation steps are provided in the original document, so this section is skipped.

💻 Usage Examples

Component Templates

Get Available Templates

Returns a list of all available component templates.

Endpoint: GET /api/templates

Response:

{
  "success": true,
  "templates": [
    {
      "name": "button",
      "description": "A button component with primary and secondary variants"
    },
    {
      "name": "card",
      "description": "A card container with hover effect and shadow"
    }
  ]
}

Create a Profile Using a Template

Create a new design system using a component template.

Endpoint: POST /api/templates/create-profile

Request Body:

{
  "name": "My Design System",
  "author": "Designer Name",
  "slug": "my-design-system",
  "description": "My custom design system",
  "components": ["button", "card", "input", "alert"]
}

Response:

{
  "success": true,
  "profile": {
    /* Metadata of the created profile */
  }
}

Profile Creation and Retrieval

Create a New Profile

Request:

POST /api/profiles HTTP/1.1
Content-Type: application/json

{
  "name": "My Theme",
  "author": "John Doe",
  "description": "A modern design theme.",
  "components": ["header", "footer"]
}

Response:

{
  "success": true,
  "message": "Profile created successfully."
}

Get All Profiles

Request:

GET /api/profiles HTTP/1.1

Response:

[
  {
    "name": "Dark Theme",
    "author": "Jane Smith",
    "description": "A dark-themed configuration.",
    "_id": "64b9e3c57f0b..."
  },
  ...
]

📚 Documentation

Profile Structure

The Popmelt MCP server uses structured JSON configuration files to define design systems. Each configuration file includes:

Basic Metadata

• name: The name of the design system.
• author: The creator of the design system.
• slug: A URL-friendly identifier.
• description: A description of the design system.
• version: A dotted version number.

Design Tokens

• colors: A color palette, including primary, secondary, accent, background, and text colors.
• spacing: A spacing scale for margins, paddings, and layouts.
• typography: Font families, sizes, weights, and line heights.
• borders: Border widths, styles, and radii.
• animations: Duration, easing, and delay values.

Component Definitions

Each component includes:

• Basic styles.
• Variants (primary, secondary, tertiary).
• States (hover, focus, active, disabled).
• Nested elements (icons, labels, containers).
• Responsive breakpoints.

See the example configuration files in the /profiles directory for the full structure.

CSS Variable Generation

The server automatically converts design tokens into CSS variables, making them easy to reuse throughout the design system. For example:

:root {
  --color-background: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-accent: #3d7aff;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --typography-family: 'Arial', sans-serif;
}

Health Check

Endpoint: GET /api/health

Response:

{
  "status": "ok",
  "timestamp": "2023-10-05T14:30:00Z"
}

Error Handling

Invalid Request Body

Response:

{
  "success": false,
  "error": "Invalid request body format."
}

Profile Not Found

Response:

{
  "success": false,
  "error": "Profile not found."
}

🔧 Technical Details

The server is built on the following technologies:

• Node.js: A JavaScript runtime environment.
• Express.js: A fast web application framework for Node.js.
• MongoDB: A distributed database system.
• Redis: A high-performance key-value store.

Project Structure

popmelt-mcp/
├── src/                # Source code directory
│   ├── routes/         # Route definitions
│   │   └── components.js    # Component routes
│   ├── controllers/    # Controller logic
│   │   └── profileController.js  # Profile controller
│   └── models/         # Data models
│       └── Profile.js  # Profile model
├── public/             # Public resources directory
└── package.json        # Dependency management file

Dependencies

- express: ^4.18.2
- mongoose: ^5.0.3
- redis: ^3.0.2
- CORS: ^2.8.5

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

💡 Contribution Guidelines

Contributions are welcome! Please fork the repository and ensure all tests pass before submitting a pull request.

🐞 Issue Reporting

Encountered an issue? Please submit it on Issues.