MCP-BIG-ORANGE 🍊

Context-aware color palette generator MCP server.

Demonstrates: .faf is the FOUNDATION that MCP builds on

The Demo

WITHOUT .faf (55% context):

User: "Give me a color palette"
MCP: "Here's a generic palette..."
→ Random colors, no project awareness

WITH .faf (99% context):

User: "Give me a color palette"
MCP reads .faf: "React app, dark mode, TypeScript..."
MCP: "Dark mode tech palette optimized for React..."
→ Context-aware colors matching your stack

Installation

npm install -g mcp-big-orange

Usage with Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "big-orange": {
      "command": "npx",
      "args": ["-y", "mcp-big-orange"]
    }
  }
}

Tools

brand_palette

Generate a brand color palette.

• Without .faf: Returns generic palette (55% context)
• With .faf: Returns project-aware palette (99% context)

The palette adapts to:

• Stack (React, TypeScript, etc.)
• Theme (dark/light mode)
• Frontend framework
• Project type

How It Works

1. MCP server checks for .faf file in project root
2. If found: Reads project DNA (stack, theme, framework)
3. Generates palette optimized for your project context
4. If not found: Falls back to generic palette

This demonstrates how .faf provides the foundation that MCP builds on.

Example Output

# Dark Tech Palette
**Context Level**: 99% Context-Aware

## Colors
- **Primary**: #0EA5E9 (Sky blue - AAA accessible)
- **Secondary**: #8B5CF6 (Purple - tech brand)
- **Background**: #0F172A (Slate 900 - React dark mode)
- **Text**: #F8FAFC (Slate 50 - optimal contrast)

## Rationale
Context-aware dark mode tech palette:
- Matches React development standards
- Optimized for TypeScript strict mode
- WCAG AAA accessibility

Live Demo

Want to see the proof? Run the side-by-side demo:

# Clone the demo script
curl -O https://raw.githubusercontent.com/wolfejam/mcp-big-orange/main/demo-side-by-side.sh
chmod +x demo-side-by-side.sh

# Run it
./demo-side-by-side.sh

Or create it yourself:

# 1. Create two directories
mkdir -p /tmp/demo-no-faf /tmp/demo-with-faf

# 2. Add .faf to one directory
cat > /tmp/demo-with-faf/.faf << 'EOF'
project:
  name: my-app
stack:
  main_language: TypeScript
frontend:
  framework: React
  theme: Dark mode
EOF

# 3. Test both (same prompt, different context)
cd /tmp/demo-no-faf && npx -y mcp-big-orange
cd /tmp/demo-with-faf && npx -y mcp-big-orange

Result: Same MCP server, undeniably different outputs based on .faf context.

License

MIT