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
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:
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.