Yupno MCP App Server

MCP App server for creating and managing events on Yupno with visual preview support.

Features

• Visual Preview: See your event card rendered in real-time as Claude creates it
• Streaming Support: Preview updates progressively as Claude generates event details
• Theme Preview: See colors, fonts, and background images applied immediately
• Dual Transport: Works with both Claude Desktop (stdio) and HTTP-based hosts

Installation

npm install yupno-mcp-server

Or run directly:

npx yupno-mcp-server

Configuration

Claude Desktop / Claude Code (Stdio Mode)

Add to your Claude settings (~/.claude/settings.json or Claude Desktop config):

{
  "mcpServers": {
    "yupno": {
      "command": "npx",
      "args": ["-y", "yupno-mcp-server", "--stdio"]
    }
  }
}

HTTP Mode (for development/testing)

npx yupno-mcp-server
# Server runs on http://localhost:3001/mcp

Or with custom port:

PORT=8080 npx yupno-mcp-server

Available Tools

create_event (with UI preview)

Create a new event with visual preview.

Example prompt: "Create an 80s party event for tomorrow at 7pm with a neon theme"

Parameters:

• title (required) - Event title (2-4 words, no emojis)
• eventDate (required) - Start date/time in ISO 8601 format
• location - Physical address or venue name
• description - 2-3 sentences about the event
• theme - Visual theme options (see below)
• customCss - Advanced CSS customization

get_event

Get details of an existing event by its event token.

update_event (with UI preview)

Update an event (requires admin token). Shows preview of changes.

delete_event

Delete an event (requires admin token).

get_rsvps

Get the RSVP list for an event (requires admin token).

Theme Options

When creating events, you can specify visual themes:

| Option | Description | Example | |--------|-------------|---------| | primaryColor | Button/accent color | #ff6b6b | | accentColor | Secondary color | #a84e30 | | backgroundColor | Page background | #1a1a2e (dark) or #faf7f2 (light) | | textColor | Text color | #ffffff (for dark bg) or #2d3436 (for light bg) | | fontFamily | Google Font name | Poppins, Inter, Playfair Display | | backgroundUrl | HTTPS image URL | Unsplash URL | | backgroundOverlay | Overlay opacity (0-1) | 0.6 (required with backgroundUrl) |

Recommended Fonts

Modern: Poppins, Inter, Space Grotesk, Montserrat Elegant: Playfair Display, Cormorant Garamond Bold: Bebas Neue, Oswald, Righteous Fun: Bangers, Press Start 2P (avoid Lobster, Pacifico)

Development

# Install dependencies
npm install

# Run in development mode (watches for changes)
npm run dev

# Build for production
npm run build

# Test with basic-host
SERVERS='["http://localhost:3001/mcp"]' npm run basic-host

Architecture

mcp-server/
├── server.ts          # MCP server with registerAppTool/registerAppResource
├── main.ts            # Entry point with dual transport support
├── src/
│   ├── event-preview.html   # UI template
│   ├── event-preview.ts     # Client-side app logic
│   ├── event-preview.css    # Event card styles
│   └── global.css           # Base styles
└── dist/              # Built output

How It Works

1. When Claude calls create_event or update_event, the server returns both:

   • Text content: For Claude Code and non-UI hosts
   • UI reference: Points to the event preview resource

2. Claude Desktop fetches the UI resource and renders it in an iframe

3. The UI receives tool input via ontoolinput and ontoolinputpartial handlers:

   • ontoolinputpartial: Shows preview as Claude streams the event data
   • ontoolinput: Final render when input is complete
   • ontoolresult: Displays event links after creation

4. Theme and custom CSS are applied to the preview card in real-time