❌ Each AI tool had custom integration code
❌ Switching AI providers meant rebuilding everything
❌ No standard way to share tools across platforms
❌ Security and permissions were ad-hoc

✅ Write once, use with any MCP-compatible AI
✅ Standard protocol for tool communication
✅ Built-in security and permission model
✅ Growing ecosystem of shared tools

┌─────────────────────────────────────────────────┐
│           AI Assistant (Claude, etc.)            │
│              "MCP Client"                        │
└────────────────────┬────────────────────────────┘
                     │ MCP Protocol
                     │ (JSON-RPC over stdio)
                     ▼
┌─────────────────────────────────────────────────┐
│              Your MCP Server                     │
│         (Custom Tools & Logic)                   │
└────────────────────┬────────────────────────────┘
                     │
        ┌────────────┴────────────┐
        ▼                         ▼
    GitHub API              File System
    Databases              External APIs
    Your Services          Anything!

"How do I configure the home page?"
"What's the syntax for TOML arrays?"
"Where do I put my social media links?"

"I know this feature exists, but where's the doc?"
"How do I search across all documentation?"
"What are all the available configuration options?"

"Why isn't my portfolio loading?"
"Is this TOML syntax correct?"
"What fields am I missing?"

"It took me 2 hours just to get started"
"I had to read all the docs first"
"Too much trial and error"

User: "Create a portfolio for me with projects and resume"
AI: *Generates complete, valid configuration*

User: "Is my home.toml correct?"
AI: *Validates and suggests improvements*

User: "How do I add dark mode?"
AI: *Shows exact configuration with examples*

renderer-mcp-server/
├── src/
│   ├── index.ts              # Main server & routing
│   ├── types.ts              # TypeScript definitions
│   ├── constants.ts          # Tool definitions
│   ├── github.ts             # GitHub API client
│   └── tools/                # Modular tool implementations
│       ├── validator.ts      # TOML validation
│       ├── template.ts       # Template generation
│       ├── examples.ts       # Config examples
│       ├── features.ts       # Feature search
│       └── guides.ts         # Setup guides
├── build/                    # Compiled JavaScript
└── package.json

# Create project structure
mkdir renderer-mcp-server
cd renderer-mcp-server
npm init -y

# Install dependencies
npm install @modelcontextprotocol/sdk @octokit/rest toml marked

# Install dev dependencies
npm install -D typescript @types/node

# Initialize TypeScript
npx tsc --init

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

/**
 * Type definitions for our MCP server
 */

export interface RendererConfig {
    owner?: string;
    repo?: string;
    branch?: string;
}

export interface TemplateOptions {
    name: string;
    email?: string;
    github?: string;
    linkedin?: string;
    twitter?: string;
    includeProjects?: boolean;
    includeBlog?: boolean;
    includeResume?: boolean;
}

export interface ToolArguments {
    query?: string;
    path?: string;
    config_content?: string;
    config_type?: string;
    feature?: string;
    level?: string;
    [key: string]: unknown;
}

#!/usr/bin/env node

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { 
    CallToolRequestSchema, 
    ListToolsRequestSchema 
} from "@modelcontextprotocol/sdk/types.js";

// Initialize MCP Server
const server = new Server(
    {
        name: "renderer-mcp-server",
        version: "1.0.0",
    },
    {
        capabilities: {
            tools: {},
        },
    }
);

// Tool definitions
const TOOLS = [
    {
        name: "get_config_example",
        description: "Get example TOML configuration",
        inputSchema: {
            type: "object",
            properties: {
                config_type: {
                    type: "string",
                    enum: ["home", "projects", "blog", "resume", "social"],
                    description: "Type of configuration needed"
                }
            },
            required: ["config_type"]
        }
    },
    // ... more tools
];

// Handle tool listing
server.setRequestHandler(ListToolsRequestSchema, async () => ({
    tools: TOOLS,
}));

// Handle tool execution
server.setRequestHandler(CallToolRequestSchema, async (request) => {
    const { name, arguments: args } = request.params;

    try {
        switch (name) {
            case "get_config_example":
                return getConfigExample(args.config_type);
            // ... more cases
            default:
                throw new Error(`Unknown tool: ${name}`);
        }
    } catch (error) {
        return {
            content: [{
                type: "text",
                text: `Error: ${error.message}`
            }],
            isError: true
        };
    }
});

// Start server
async function main() {
    const transport = new StdioServerTransport();
    await server.connect(transport);
    console.error("Renderer MCP Server running");
}

main().catch(console.error);

const CONFIG_EXAMPLES = {
    home: `# Home Page Configuration
[profile]
name = "Your Name"
tagline = "Your Role"
email = "your@email.com"

[hero]
title = "Hi, I'm Your Name 👋"
subtitle = "Building amazing things"
show_cta = true

[features]
show_about = true
show_skills = true
show_social = true

[theme]
mode = "auto"  # auto, light, dark
accent_color = "#0066cc"`,
    // ... more examples
};

export function getConfigExample(configType: string) {
    const example = CONFIG_EXAMPLES[configType];
    if (!example) {
        return {
            content: [{
                type: "text" as const,
                text: `Unknown config type: ${configType}`
            }],
            isError: true
        };
    }

    return {
        content: [{
            type: "text" as const,
            text: `# ${configType} Configuration Example\n\n\`\`\`toml\n${example}\n\`\`\``
        }]
    };
}

import { parse as parseToml } from "toml";

export function validateTomlConfig(
    configContent: string, 
    configType: string
) {
    try {
        // Parse TOML
        const parsed = parseToml(configContent);

        // Validate based on type
        const issues: string[] = [];

        switch (configType) {
            case "home":
                if (!parsed.profile) issues.push("Missing 'profile' section");
                if (!parsed.hero) issues.push("Missing 'hero' section");
                break;
            case "projects":
                if (!Array.isArray(parsed.projects)) {
                    issues.push("Missing or invalid 'projects' array");
                }
                break;
            // ... more validations
        }

        if (issues.length === 0) {
            return {
                content: [{
                    type: "text" as const,
                    text: `✅ Valid!\n\nParsed:\n\`\`\`json\n${JSON.stringify(parsed, null, 2)}\n\`\`\``
                }]
            };
        } else {
            return {
                content: [{
                    type: "text" as const,
                    text: `⚠️ Issues:\n${issues.map(i => `- ${i}`).join('\n')}`
                }]
            };
        }
    } catch (error) {
        return {
            content: [{
                type: "text" as const,
                text: `❌ TOML Syntax Error:\n${error.message}`
            }],
            isError: true
        };
    }
}

export function generateStarterTemplate(options: TemplateOptions) {
    const { name, email, github, includeProjects, includeBlog } = options;

    const homeConfig = `[profile]
name = "${name}"
tagline = "Developer & Creator"
${email ? `email = "${email}"` : '# email = "your@email.com"'}

[hero]
title = "Hi, I'm ${name.split(' ')[0]} 👋"
subtitle = "Building amazing things"
show_cta = true
cta_text = "View My Work"
cta_link = "${includeProjects ? '/projects.html' : '#'}"`;

    const socialConfig = `[social]
${github ? `github = "${github}"` : '# github = "username"'}
${email ? `email = "${email}"` : '# email = "your@email.com"'}

[social.settings]
show_icons = true
open_in_new_tab = true`;

    return {
        content: [{
            type: "text" as const,
            text: `# Generated Configuration\n\n## home.toml\n\`\`\`toml\n${homeConfig}\n\`\`\`\n\n## social.toml\n\`\`\`toml\n${socialConfig}\n\`\`\``
        }]
    };
}

import { Octokit } from "@octokit/rest";

let octokit: Octokit | null = null;

export function initGitHub(token?: string) {
    octokit = new Octokit({
        auth: token || process.env.GITHUB_TOKEN
    });
}

export async function getRendererFile(path: string) {
    if (!octokit) throw new Error("GitHub not initialized");

    const { data } = await octokit.repos.getContent({
        owner: "NishikantaRay",
        repo: "renderer",
        path,
        ref: "main"
    });

    if (!("content" in data)) {
        throw new Error("Not a file");
    }

    const content = Buffer.from(data.content, "base64").toString();

    return {
        content: [{
            type: "text" as const,
            text: `# ${path}\n\n\`\`\`\n${content}\n\`\`\``
        }]
    };
}

{
  "name": "renderer-mcp-server",
  "version": "1.0.0",
  "type": "module",
  "bin": {
    "renderer-mcp": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod +x build/index.js",
    "watch": "tsc --watch"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.0.4",
    "@octokit/rest": "^20.0.2",
    "toml": "^3.0.0"
  }
}

npm run build
npm link  # For local testing

{
  "mcpServers": {
    "renderer": {
      "command": "renderer-mcp",
      "env": {
        "GITHUB_TOKEN": "ghp_your_token_here_optional"
      }
    }
  }
}

Create a portfolio starter template for me. 
My name is John Doe, GitHub is johndoe, 
and I want projects and resume sections.

I'll generate a complete starter template for you using the 
Renderer MCP server.

*calls generate_starter_template tool*

Here's your customized configuration:

[Shows complete TOML configs for home.toml, social.toml, 
projects.toml, and resume.toml with your information pre-filled]

To use this:
1. Clone the Renderer repository
2. Copy these configs to the config/ directory
3. Run npm install && npm run dev
4. Your portfolio will be live at localhost:3000!

Can you validate this TOML config for me?

[profile]
name = "Jane Smith"
tagline = "Full Stack Developer"

[hero]
title = "Hi, I'm Jane"

Let me validate that for you.

*calls validate_toml_config tool*

⚠️ Configuration Issues Found:

1. Missing 'hero.subtitle' field (recommended)
2. Missing 'hero.show_cta' field (required)
3. Missing 'features' section

Here's the corrected version:

[profile]
name = "Jane Smith"
tagline = "Full Stack Developer"

[hero]
title = "Hi, I'm Jane"
subtitle = "Building amazing web applications"
show_cta = true
cta_text = "View My Work"
cta_link = "/projects.html"

[features]
show_about = true
show_skills = true
show_social = true

How do I add dark mode to my Renderer portfolio?

Let me search for that feature.

*calls search_renderer_features tool*

# Dark Mode in Renderer

Renderer includes automatic dark mode support!

## Configuration (config/home.toml)

[theme]
mode = "auto"  # Options: auto, light, dark
accent_color = "#0066cc"

## How it works:

- **auto**: Follows system preferences (recommended)
- **light**: Always light theme
- **dark**: Always dark theme

Users can also toggle themes manually with the theme 
switcher button that appears automatically.

The theme preference is saved in localStorage, so it 
persists across sessions.

Show me an example of how to configure projects

*calls get_config_example tool*

Here's a complete example for projects.toml:

# Projects Configuration

[[projects]]
title = "Renderer Framework"
description = "A TOML-driven portfolio system"
tags = ["JavaScript", "TOML", "HTML"]
repo = "https://github.com/username/renderer"
demo = "https://demo.example.com"
docs = "https://docs.example.com"
featured = true
company = "@MyCompany"

[[projects]]
title = "Another Cool Project"
description = "Building something awesome"
tags = ["TypeScript", "React", "Node.js"]
repo = "https://github.com/username/project"
featured = false

## Usage:
1. Copy this to config/projects.toml
2. Customize with your projects
3. Add more [[projects]] blocks as needed

# Run the inspector (no installation needed)
npx @modelcontextprotocol/inspector renderer-mcp

┌──────────────────────────────────────────────────────┐
│  Left Panel       │  Center Panel    │  Right Panel  │
│  (Tools List)     │  (Input Form)    │  (Results)    │
├──────────────────────────────────────────────────────┤
│                                                        │
│  • Tool 1         │  [Input fields]  │  [JSON        │
│  • Tool 2         │  [for selected]  │   Response]   │
│  • Tool 3         │  [tool]          │               │
│  • ...            │                  │               │
│                   │  [Execute Btn]   │  [Formatted   │
│                   │                  │   Output]     │
└──────────────────────────────────────────────────────┘

# Home Page Configuration Example

[profile]
name = "John Doe"
tagline = "Full Stack Developer"
...

[profile
name = "Missing bracket"

Problem: Left panel is empty
Solution: Check terminal for error messages
         Ensure server started successfully

Problem: Error in right panel
Solution: Check input types match schema
         Verify required fields are filled

Problem: Long wait times
Solution: Normal for GitHub API calls
         Add GitHub token for better performance

{
  "config_type": "invalid_type"
}

{
  "name": null
}

{
  "query": ""
}

{
  "config_content": "... 10,000 characters ..."
}

{
  "name": "Test<script>alert('xss')</script>"
}

Sarah: "Create a portfolio for Sarah Chen, full-stack developer, 
       GitHub sarahchen"

Claude: *generates complete template*

Sarah: *copies configs, runs npm install*

Sarah: "How do I deploy this?"

Claude: *provides deployment guide*

Sarah: *deploys to Vercel in 3 clicks*

Mike: "My portfolio broke after I updated config. Can you check it?"
      [pastes config]

Claude: *validates config*
        "Found 2 issues:
         1. Missing closing bracket on line 12
         2. Invalid value for 'mode' field (must be 'auto', 'light', or 'dark')

         Here's the corrected version..."

Mike: *copies fix, portfolio works immediately*

Emma: "What features can I add to my portfolio?"

Claude: *lists features with descriptions*
        "Renderer has these features:
         - Dark mode theme switching
         - @mention system for companies
         - Analytics dashboard
         - Blog with MDX support
         - Project filtering by tags
         - Resume with timeline
         - And more!

         Which would you like to implement?"

Emma: "Tell me about the analytics dashboard"

Claude: *searches features*
        "The analytics dashboard shows:
         - Project view counts
         - GitHub stars
         - Visitor metrics
         - Performance stats

         Here's how to enable it..."

Template: "Generate template for [name], GitHub [username], 
          email [email], include projects and resume"

Each Developer:
1. Ask MCP for template (2 min)
2. Clone and setup (5 min)
3. Customize (10 min)
4. Deploy (3 min)

Total per person: 20 minutes
Total team: 3.5 hours (vs 20-40 hours)

// Current: Every request hits GitHub API
// Better: Cache responses for repeated queries

const cache = new Map();
async function getCachedFile(path) {
    if (cache.has(path)) return cache.get(path);
    const result = await fetchFromGitHub(path);
    cache.set(path, result);
    return result;
}

// Current: Generic error messages
// Better: Actionable, specific errors

// Instead of:
"Validation failed"

// Provide:
"Missing required field 'profile.name' in home.toml (line 5)"

// Current: Silent processing
// Better: Show progress for long operations

async function longOperation() {
    console.error("Fetching documentation...");
    const docs = await fetchDocs();
    console.error("Processing results...");
    return processDocs(docs);
}

// Smart caching for GitHub responses
// Reduce API calls by 80%
// Faster response times

// Work without internet
// Cached documentation
// Local validation

// Line numbers in errors
// Suggested fixes
// Related documentation links

GUI for creating configs
Drag-and-drop interface
Live preview
Export to TOML

Generate project descriptions
Write portfolio copy
Create blog post outlines
SEO optimization

One-command deployment
Multiple platforms
Environment setup
Domain configuration

// Let community create tools
interface Plugin {
    name: string;
    tools: Tool[];
    onLoad: () => void;
}

Share templates
Community plugins
Premium themes
Integrations

i18n for documentation
Localized examples
Regional templates

# 1. Install
npm install -g renderer-mcp-server

# 2. Configure Claude Desktop
# Add to claude_desktop_config.json:
{
  "mcpServers": {
    "renderer": {
      "command": "renderer-mcp"
    }
  }
}

# 3. Restart Claude Desktop

# 4. Start using it!
# Just ask Claude: "Create a portfolio for me"

git clone https://github.com/NishikantaRay/renderer-mcp-server
cd renderer-mcp-server

npm run build
npm link
npx @modelcontextprotocol/inspector your-mcp-server