Sitecore Design MCP - Copywriter Agent

A Model Context Protocol (MCP) server with a copywriter agent that enforces copywriting rules for UI text generation. Deployed on Vercel with HTTP transport support.

Overview

This MCP server provides a copywriter tool that processes UI copy text and automatically applies predefined copywriting rules. The agent is designed to be called whenever UI copy is generated or when users ask questions about UI text.

Related MCP server: VibeServe

Features

• Copywriter Agent: Automatically enforces copywriting rules on UI text

• Modular Rules System: Easy-to-add rules configuration

• HTTP Transport: Compatible with MCP HTTP client specification

• Vercel Deployment: Pre-configured for seamless Vercel deployment

• Type-Safe: Full TypeScript support with Zod validation

Project Structure

sitecore_design_mcp/
├── app/
│   └── api/
│       └── mcp/
│           └── route.ts         # MCP HTTP endpoint
├── lib/
│   ├── mcp-server.ts            # MCP server setup
│   └── copywriter/
│       ├── index.ts             # Copywriter agent interface
│       ├── rules.ts             # Copywriting rules (ADD YOUR RULES HERE)
│       └── processor.ts         # Rule processing logic
└── ...

Setup

1. Install Dependencies

npm install

2. Add Your Copywriting Rules

Edit lib/copywriter/rules.ts to add your copywriting rules. Each rule is a function that takes a string and returns a processed string:

export const copywritingRules: CopywritingRule[] = [
  (text: string) => {
    // Your rule logic here
    return processedText;
  },
  // Add more rules...
];

3. Local Development

npm run dev

The MCP server will be available at http://localhost:3000/api/mcp

4. Deploy to Vercel

Option A: Using Vercel CLI

npm install -g vercel
vercel

Option B: Using Git Integration

1. Push your code to a Git repository (GitHub, GitLab, etc.)

2. Import the project in the Vercel dashboard

3. Vercel will automatically detect Next.js and deploy

Configuration

Environment Variables

Copy .env.example to .env and add any required environment variables:

cp .env.example .env

Cursor Integration

To use this MCP server with Cursor, add the following to your Cursor MCP configuration:

{
  "mcpServers": {
    "sitecore-design-mcp": {
      "url": "https://your-deployment.vercel.app/api/mcp",
      "transport": "http"
    }
  }
}

Replace https://your-deployment.vercel.app with your actual Vercel deployment URL.

Usage

The copywriter tool is automatically available when the MCP server is connected. It can be called:

1. Automatically: When UI copy text is generated

2. Explicitly: When users ask questions about UI text

Tool Parameters

• text (required): The text to process through copywriting rules

• context (optional): Context about where the copy will be used (e.g., "button label", "error message")

Example Tool Call

{
  "method": "tools/call",
  "params": {
    "name": "copywriter",
    "arguments": {
      "text": "click here to continue",
      "context": "button label"
    }
  }
}

Adding Rules

To add new copywriting rules:

1. Open lib/copywriter/rules.ts

2. Add your rule function to the copywritingRules array

3. Add corresponding metadata to ruleMetadata array

4. Rules are applied in sequence, so order matters

Example rule:

export const copywritingRules: CopywritingRule[] = [
  // Existing rules...
  
  // New rule: Capitalize first letter
  (text: string) => {
    if (!text) return text;
    return text.charAt(0).toUpperCase() + text.slice(1);
  },
];

Development

Scripts

• npm run dev - Start development server

• npm run build - Build for production

• npm run start - Start production server

• npm run lint - Run ESLint

License

MIT