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

Clone the repository:

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

Install dependencies:
```
npm install
```

Configure environment variables:

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

Run Prisma migrations:
```
npx prisma migrate dev
```
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

Profile Creation & Management
- Profile creation wizard with templates
- Visual profile editor with real-time preview
Context Management System
- Context collection from multiple sources
- Profile-aware context prioritization
Interactive Design System
- Real-time design token manipulation
- Component variant previews
Model Integration Framework
- Support for multiple LLM providers
- Custom instruction templating
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.