MCP Server Setup

Configure Claude Desktop

Edit your Claude Desktop configuration file:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

Add this configuration:

{
  "mcpServers": {
    "alterspective-brand": {
      "url": "https://brand.alterspective.com.au/mcp",
      "transport": "http"
    }
  }
}

Claude Code (CLI)

Add to your project's .mcp.json:

{
  "mcpServers": {
    "alterspective-brand": {
      "url": "https://brand.alterspective.com.au/mcp",
      "transport": "http"
    }
  }
}

Build and Configure Locally

# Build the MCP server
cd alterspective-ai-brand-guide
npm run build --workspace=packages/mcp-server

Then add to Claude Desktop config:

{
  "mcpServers": {
    "alterspective-brand-local": {
      "command": "node",
      "args": ["<path-to-repo>/packages/mcp-server/dist/index.js"]
    }
  }
}

Add to .mcp.json

Create or edit .mcp.json in your project root:

{
  "mcpServers": {
    "alterspective-brand": {
      "url": "https://brand.alterspective.com.au/mcp",
      "transport": "sse"
    }
  }
}

Using the MCP SDK (Node.js)

Connect with the official MCP SDK:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";

const transport = new StreamableHTTPClientTransport(
  new URL("https://brand.alterspective.com.au/mcp")
);
const client = new Client({ name: "my-app", version: "1.0.0" });
await client.connect(transport);

// List available tools
const tools = await client.listTools();
console.log(tools);

// Call a tool
const result = await client.callTool("validate_colors", {
  foreground: "#FFFFFF",
  background: "#ABDD65"
});
console.log(result); // { isValid: false, violations: [...] }

Direct HTTP (Any Language)

The MCP endpoint accepts standard JSON-RPC over HTTP:

# Step 1: Initialize session
curl -X POST https://brand.alterspective.com.au/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"my-app","version":"1.0"}},"id":1}'

# Response includes Mcp-Session-Id header — use it for subsequent requests

# Step 2: List tools
curl -X POST https://brand.alterspective.com.au/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -H "Mcp-Session-Id: <session-id>" \
  -d '{"jsonrpc":"2.0","method":"tools/list","params":{},"id":2}'

# Step 3: Call a tool
curl -X POST https://brand.alterspective.com.au/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -H "Mcp-Session-Id: <session-id>" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"get_critical_rules","arguments":{"category":"logo"}},"id":3}'

OpenAI Function Calling Bridge

Convert MCP tools to OpenAI function-calling format:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
import OpenAI from "openai";

// Connect to MCP
const transport = new StreamableHTTPClientTransport(
  new URL("https://brand.alterspective.com.au/mcp")
);
const mcpClient = new Client({ name: "openai-bridge", version: "1.0.0" });
await mcpClient.connect(transport);

// Get tools and convert to OpenAI format
const { tools } = await mcpClient.listTools();
const openaiTools = tools.map(t => ({
  type: "function",
  function: {
    name: t.name,
    description: t.description,
    parameters: t.inputSchema
  }
}));

// Use with OpenAI
const openai = new OpenAI();
const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [{ role: "user", content: "Check if white text on #ABDD65 is accessible" }],
  tools: openaiTools
});