Popmelt Model Context Protocol (MCP)

Popmelt MCP is a reference implementation for creating deeply personalized AI interactions through sophisticated taste profiles. This project establishes a framework for next-generation AI personalization that maintains consistent design and interaction patterns.

Core Concepts

Taste Profiles

A taste profile serves as the cornerstone of the Popmelt ecosystem, providing multi-dimensional personalization through:

• Style Vectors: Multi-dimensional representation of AI personality characteristics
• Context Weighting: Prioritization of different context sources
• Response Mappings: Rules for styling responses based on context
• Design System: Visual styling and component variants

Model Context Protocol

MCP establishes standardized methods for managing context:

• Bi-directional Context Flow: Sophisticated handling of context in both directions
• Layered Context Priority: Multi-tiered organization of context with explicit weighting
• Context Collision Resolution: Methods for resolving conflicts between context sources
• Profile-Aware Context Handling: Context processing adapted to active taste profile

Dynamic Design System

The design system provides real-time styling based on taste profiles:

• Response Templating: System for dynamically applying design patterns
• Visual-Semantic Alignment: Mapping between meaning and presentation
• Dynamic Typography: Content-aware typography adjustments
• Interaction Patterns: Curated collection of interaction models

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL

Installation

1. Clone the repository:

   git clone https://github.com/popmelt/mcp.git
   cd mcp
   

2. Install dependencies:

   npm install
   

3. Configure environment variables:

   cp .env.example .env
   # Edit .env with your database connection string and other settings
   

4. Run Prisma migrations:

   npx prisma migrate dev
   

5. Start the development server:

   npm run dev
   

Technical Architecture

Core Technologies

• Frontend: Next.js 14+ with App Router
• Language: TypeScript 5.0+
• State Management: React Context API + Zustand 4.4+
• Styling: Tailwind CSS 3.4+ with custom design tokens
• API Layer: tRPC 10+ for end-to-end typesafe APIs
• Database: Prisma ORM with PostgreSQL
• Authentication: NextAuth.js/Auth.js with JWT
• Testing: Vitest, React Testing Library, and Playwright

Project Structure

/src
  /app                   # Next.js App Router pages
  /components            # React components
  /lib                   # Core application logic
  /server                # Server-side code
  /types                 # TypeScript type definitions
  /utils                 # Utility functions
  /hooks                 # Custom React hooks
  /contexts              # React Context providers
/prisma                  # Prisma schema and migrations

Key Features

1. Profile Creation & Management

   • Profile creation wizard with templates
   • Visual profile editor with real-time preview

2. Context Management System

   • Context collection from multiple sources
   • Profile-aware context prioritization

3. Interactive Design System

   • Real-time design token manipulation
   • Component variant previews

4. Model Integration Framework

   • Support for multiple LLM providers
   • Custom instruction templating

5. Analytics Dashboard

   • Profile performance metrics
   • Interaction success rates

License

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

Acknowledgments

• This project is part of the Popmelt ecosystem for personalized AI interactions.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.