@neuria/mcp-server

v1.0.0

Published

2 months ago

Emotion-driven design intelligence for AI coding tools

Downloads

0High
0Medium
0Low

neurameter

mcp design emotion ui japanese brand-dna

NEURIA — Emotion-Driven Design Intelligence for AI Coding Tools

NEURIA is an MCP (Model Context Protocol) server that gives AI assistants like Claude, Cursor, and Windsurf a sense of design taste. Instead of relying on generic Tailwind defaults or hardcoded color palettes, AI agents query NEURIA for emotion-aligned design tokens — colors, typography, spacing, animations — all backed by real-world data from 300+ award-winning websites.

"Design is not just what it looks like. Design is how it feels." — Steve Jobs

NEURIA quantifies that feeling into actionable design tokens.

What is NEURIA?

NEURIA maps 6 core emotions to complete design systems:

| Emotion | Vibe | Example Brands | |---|---|---| | Trust | Stable, reliable, professional | Linear, Stripe, Notion | | Excitement | Bold, energetic, dynamic | Vercel, Arc, Framer | | Calm | Serene, minimal, breathable | Headspace, Muji, Apple | | Luxury | Premium, refined, exclusive | Porsche, Rolex, Aesop | | Innovation | Futuristic, cutting-edge, smart | OpenAI, Tesla, Figma | | Energy | Vibrant, playful, high-tempo | Spotify, Discord, Duolingo |

Each emotion includes color palettes, typography settings, spacing scales, border radii, shadow styles, and animation parameters — all derived from statistical analysis of real CSS extracted from 300+ top websites.

Quick Start

1. Add to your MCP config

Add to your .mcp.json (Claude Code) or IDE MCP settings:

{
  "mcpServers": {
    "neuria": {
      "type": "sse",
      "url": "https://api.neuria.tech/mcp"
    }
  }
}

That's it. No API key needed for core tools.

2. Local Development (Optional)

git clone https://github.com/kosukeuemura0220-del/neuria-agent.git
cd neuria-agent
pip install -r requirements.txt
cp .env.example .env
# Fill in API keys for advanced tools (see .env.example)
python3 mcp-servers/neuria/server.py

10 MCP Tools

Core Tools (No API Key Required)

| # | Tool | Description | Input | |---|---|---|---| | 1 | get_emotion_tokens | Get CSS custom properties for an emotion | emotion, category | | 2 | search_similar_designs | Find similar designs via pgvector cosine similarity | query, mood, component_type | | 3 | get_color_palette | Get a 5-color palette + Color API scheme | emotion, industry | | 4 | get_typography | Get font settings for emotion × use case | emotion, use_case | | 5 | score_html | Score HTML against NEURIA design standards | html_content, target_emotion, url | | 8 | get_animation_tokens | Get GSAP / CSS / Spring animation parameters | emotion, context |

Advanced Tools (API Keys Required)

| # | Tool | Description | Required Keys | |---|---|---|---| | 6 | generate_hero_image | AI-generated emotion-matched hero image | 3D AI Studio | | 7 | analyze_reference_url | Extract design tokens from any URL (W3C DTCG format) | FIRECRAWL_API_KEY | | 9 | analyze_visual_design | Dual-analysis: screenshot colors + CSS analysis | SCREENSHOTONE_API_KEY, IMAGGA_API_KEY | | 10 | analyze_brand_voice | Text emotion analysis via Hume AI | HUME_API_KEY |

Example Usage

1. Generate a Landing Page with Emotion Tokens

User: "Analyze linear.app and create a SaaS landing page with the same design feel"

→ NEURIA calls: analyze_reference_url("https://linear.app")
  Returns: dominant_emotion="innovation", W3C DTCG design tokens, emotion_scores

→ NEURIA calls: get_emotion_tokens("innovation")
  Returns: CSS variables (--neuria-bg, --neuria-accent, --neuria-font-*, etc.)

→ NEURIA calls: get_animation_tokens("innovation", "page_load")
  Returns: GSAP ease, CSS cubic-bezier, Spring physics params

→ Claude generates HTML using NEURIA tokens (no hardcoded colors)
→ NEURIA calls: score_html(generated_html, "innovation")
  Returns: composite_score=87/100 ✅

2. Quick Color Palette for Fintech

User: "I need a trustworthy color palette for a fintech app"

→ get_color_palette("trust", industry="fintech")
  Returns:
  {
    "background": "#0B1120",
    "surface": "#131D36",
    "accent": "#2E7DFF",
    "text_primary": "#E8ECF4",
    "text_secondary": "#7A8BAB",
    "color_scheme": [...5 harmonious colors from The Color API]
  }

3. Brand Voice Analysis

User: "What emotion does Apple's copy convey?"

→ analyze_brand_voice(url="https://apple.com")
  Returns:
  {
    "dominant_emotion": "innovation",
    "neuria_emotions": {
      "innovation": 0.31,
      "luxury": 0.24,
      "calm": 0.19,
      ...
    }
  }

Architecture

┌──────────────────────────────────────────────┐
│              AI Coding Tool                   │
│     (Claude Code / Cursor / Windsurf)         │
└──────────────┬───────────────────────────────┘
               │ MCP Protocol (stdio / SSE)
               ▼
┌──────────────────────────────────────────────┐
│            NEURIA MCP Server                  │
│                                               │
│  ┌─────────┐ ┌──────────┐ ┌──────────────┐  │
│  │ Emotion  │ │ Supabase │ │  External    │  │
│  │ Token DB │ │ pgvector │ │  APIs        │  │
│  │ (6×CSS)  │ │ (300+    │ │              │  │
│  │          │ │  sites)  │ │ • Firecrawl  │  │
│  └─────────┘ └──────────┘ │ • Color API  │  │
│                            │ • ScreenShot │  │
│  ┌─────────────────────┐  │ • Imagga     │  │
│  │ Animation Tokens    │  │ • Hume AI    │  │
│  │ (6 emotions ×       │  │ • WAVE       │  │
│  │  4 contexts)        │  │ • 3D AI      │  │
│  └─────────────────────┘  └──────────────┘  │
└──────────────────────────────────────────────┘

Scoring System

score_html evaluates generated HTML across 4 dimensions:

| Dimension | Weight | What it Measures | |---|---|---| | Aesthetic | 35% | Visual harmony, whitespace, color usage | | Emotion | 35% | Alignment with target emotion tokens | | Technical | 15% | Clean markup, performance, responsive | | Accessibility | 15% | WCAG 2.1 AA (lang, alt, contrast, headings) |

Target: 85+ / 100 for production-quality output.

Environment Variables

Create a .env file at the project root (see .env.example):

# Required for core functionality
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_anon_key
NEURIA_API_BASE=your_api_base_url

# Required for analyze_reference_url
FIRECRAWL_API_KEY=your_firecrawl_key

# Required for generate_hero_image
THREE_D_AI_STUDIO_KEY=your_3d_ai_key

# Required for analyze_visual_design
SCREENSHOTONE_API_KEY=your_key
IMAGGA_API_KEY=your_key
IMAGGA_API_SECRET=your_secret

# Required for analyze_brand_voice
HUME_API_KEY=your_hume_key

# Optional — WAVE accessibility API
WAVE_API_KEY=your_wave_key

Pricing

Coming soon

| Plan | Price | Requests | |---|---|---| | Free | $0/mo | 5 req/day | | Indie | $19/mo | 500 req/mo | | Pro | $49/mo | 2,000 req/mo | | Team | $149/mo | 10,000 req/mo | | Enterprise | Custom | Unlimited |

License

MIT License — see LICENSE for details.