Renderer MCP Server

AI-powered assistant for the Renderer portfolio framework

Helps users explore documentation, validate configurations, generate templates, and customize their portfolios through natural language.

Features • Installation • Usage • Tools • Configuration

🌟 Features

• 📚 Interactive Documentation - Search and explore Renderer docs with natural language queries

• ✅ Configuration Validation - Validate TOML configs with detailed error messages

• 🎨 Template Generation - Generate starter templates customized to your needs

• 💡 Smart Examples - Get configuration examples with explanations

• 🔍 Feature Discovery - Search for specific Renderer features and capabilities

• 📖 Setup Guides - Step-by-step guides for beginners and advanced users

• 🗂️ Repository Browser - Browse Renderer repository files and directories

Related MCP server: Components Build MCP

📦 Installation

NPM (Recommended)

npm install -g renderer-mcp-server

From Source

git clone https://github.com/NishikantaRay/renderer-mcp-server.git
cd renderer-mcp-server
npm install
npm run build
npm link

🚀 Usage

With Claude Desktop

1. Install the server:

   npm install -g renderer-mcp-server

2. Configure Claude Desktop:

   Edit your Claude config file:

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

   • Windows: %APPDATA%\Claude\claude_desktop_config.json

   Add the server configuration:

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

3. Get a GitHub Token (Optional but recommended):

   • Go to https://github.com/settings/tokens

   • Create a new token with repo scope

   • Add it to the config above

4. Restart Claude Desktop

With Other MCP Clients

Any MCP-compatible client can use this server:

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

const client = new Client({
  name: "my-client",
  version: "1.0.0",
});

// Connect to the server
await client.connect({
  command: "renderer-mcp",
  env: {
    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
  },
});

🛠️ Available Tools

1. explore_renderer_docs

Search and explore Renderer framework documentation.

Query: "How do I configure dark mode?"
Returns: Relevant documentation sections

2. get_renderer_file

Get contents of specific files from the Renderer repository.

Path: "config/home.toml"
Returns: File contents with syntax highlighting

3. list_renderer_files

List files and directories in the Renderer repository.

Path: "config"
Returns: Directory listing with file types

4. validate_toml_config

Validate TOML configuration files.

Config Content: "[profile]\nname = 'John'"
Config Type: "home"
Returns: Validation results with suggestions

5. generate_starter_template

Generate customized starter templates.

Input: { name: "John Doe", github: "johndoe", include_projects: true }
Returns: Complete project structure and configs

6. get_config_example

Get example configurations with explanations.

Config Type: "projects"
Returns: Annotated example configuration

7. search_renderer_features

Search for specific features.

Feature: "analytics"
Returns: Feature documentation and examples

8. get_setup_guide

Get setup instructions.

Level: "beginner" | "advanced"
Returns: Step-by-step setup guide

📋 Configuration

Environment Variables

• GITHUB_TOKEN (optional): GitHub personal access token for higher API rate limits

  • Without token: 60 requests/hour

  • With token: 5000 requests/hour

  • Scope required: public_repo

Custom Repository

By default, the server connects to NishikantaRay/renderer. To use a fork or different repository:

Edit src/constants.ts:

export const DEFAULT_CONFIG: RendererConfig = {
    owner: "your-username",
    repo: "your-repo",
    branch: "main"
};

📁 Project Structure

renderer-mcp-server/
├── src/
│   ├── index.ts           # Main server entry point
│   ├── types.ts           # TypeScript type definitions
│   ├── constants.ts       # Tool definitions and config
│   ├── github.ts          # GitHub API interactions
│   └── tools/             # Tool implementations
│       ├── validator.ts   # TOML validation
│       ├── template.ts    # Template generation
│       ├── examples.ts    # Configuration examples
│       ├── features.ts    # Feature search
│       └── guides.ts      # Setup guides
├── build/                 # Compiled JavaScript
├── package.json
├── tsconfig.json
└── README.md

🔧 Development

Prerequisites

• Node.js 18 or higher

• npm or yarn

• TypeScript 5.3+

Setup

# Clone the repository
git clone https://github.com/NishikantaRay/renderer-mcp-server.git
cd renderer-mcp-server

# Install dependencies
npm install

# Build
npm run build

# Watch mode (for development)
npm run watch

Testing

# Build the project
npm run build

# Test with MCP inspector
npx @modelcontextprotocol/inspector renderer-mcp

📝 Example Interactions

Generate a Portfolio

User: "Create a portfolio template for John Doe with GitHub and LinkedIn"

Server: Generates complete starter template with:

• Customized TOML configurations

• Project structure

• Setup instructions

• Next steps

Validate Configuration

User: "Validate this TOML: [profile]\nname = 'Jane'"

Server:

• ✅ Validates syntax

• Checks for required fields

• Provides suggestions

• Shows parsed structure

Explore Features

User: "How do I add dark mode to my portfolio?"

Server: Returns documentation about:

• Theme configuration

• Available options

• Implementation details

• Code examples

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository

2. Create a feature branch: git checkout -b feature/amazing-feature

3. Make your changes

4. Add tests if applicable

5. Commit: git commit -m 'Add amazing feature'

6. Push: git push origin feature/amazing-feature

7. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices

• Keep functions small and focused

• Add JSDoc comments for public APIs

• Update README for new features

• Test thoroughly before submitting

📄 License

MIT License - see LICENSE file for details

🔗 Related Projects

• Renderer - The portfolio framework this server supports

• Model Context Protocol - The protocol specification

• MCP SDK - Official MCP SDK

💬 Support

• Issues: GitHub Issues

• Discussions: GitHub Discussions

• Renderer Docs: Documentation

🙏 Acknowledgments

• Built with Model Context Protocol SDK

• Powers the Renderer framework

• Inspired by the MCP community

Made with ❤️ by Nishikanta Ray

⭐ Star this repo if you find it helpful!