Transforming portfolio creation with Google Gemini AI and Model Context Protocol

Home page of renderer

https://www.youtube.com/watch?v=Txzplqg6oJo

πŸš€ Executive Summary

Renderer is an innovative portfolio framework that leverages Google Gemini to revolutionize how developers create and manage their online presence. By combining a configuration-first architecture with AI assistance through Model Context Protocol (MCP), users can generate, validate, and customize complete portfolios using natural language.

Key Innovation

Instead of wrestling with complex frameworks, users simply describe what they want, and Gemini handles the technical complexityβ€”generating configurations, validating code, and providing instant guidance.

Renderer Docs Home page

Live Links

🎯 Problem & Solution

The Problem

Developers face critical pain points when building portfolios:

Our Solution

A static, configuration-driven framework enhanced by Google Gemini AI that:

🧠 Google Gemini Integration

Dual-Layer AI Architecture

1. Gemini AI Studio (Ideation & Content Creation)

Used during initial development for:

Why Gemini: Its advanced reasoning capabilities helped transform technical achievements into compelling narratives.

2. Gemini CLI (Development Workflow)

Terminal-native AI for rapid development:

# Generate configuration files
gemini "Create a resume.toml with experience and education sections"

# Content refinement
gemini "Rewrite this Markdown to be more technical and concise"

# Validation
gemini "Check this TOML file for schema errors"

# Documentation
gemini "Explain how to add dark mode to my portfolio"
Enter fullscreen mode Exit fullscreen mode

Advantage: Seamlessly integrates with Git-based workflows and plain-text files.

3. Model Context Protocol (MCP) Server (AI Assistant)

Our breakthrough innovationβ€”a persistent AI assistant that understands Renderer's architecture:

MCP Server Capabilities:

πŸ—οΈ Technical Architecture

Core System 

Renderer Framework
β”œβ”€β”€ Configuration Layer (TOML)      # Human & AI readable
β”œβ”€β”€ Content Layer (Markdown)        # Plain text documents
β”œβ”€β”€ Presentation Layer (HTML/CSS/JS) # Vanilla web tech
└── AI Layer (Gemini + MCP)        # Intelligent assistance
Enter fullscreen mode Exit fullscreen mode

Why This Stack Works

Configuration-Driven Design:

Static-First Approach:

AI-Assistable Architecture:

Resume Section

Projects Section

πŸ€– MCP Server Deep Dive

Architecture 

Renderer MCP Server
β”œβ”€β”€ GitHub Integration          # Access to framework repository
β”œβ”€β”€ Documentation Engine        # Semantic search across docs
β”œβ”€β”€ TOML Validator             # Schema validation
β”œβ”€β”€ Template Generator         # Config creation
β”œβ”€β”€ Example Provider           # Contextual snippets
└── Feature Search             # Capability discovery
Enter fullscreen mode Exit fullscreen mode

Available Tools

  1. explore_renderer_docs

    • Natural language documentation queries
    • Returns relevant sections with examples

  2. validate_toml_config

    • Schema validation
    • Syntax checking
    • Improvement suggestions

  3. generate_starter_template

    • Complete project scaffolding
    • Customized to user needs
    • Ready-to-deploy configurations

  4. get_config_example

    • Annotated configuration samples
    • Context-aware suggestions
    • Best practices included

  5. search_renderer_features

    • Feature discovery
    • Implementation guides
    • Integration examples

Setup & Usage 

# Install globally
npm install -g renderer-mcp-server

# Use with Gemini CLI for AI assistance
gemini "Generate a portfolio configuration for John Doe with projects, resume, and blog"

# Or integrate with any MCP-compatible client
# The MCP server works with Google AI Studio API and Gemini models
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ Real-World Use Cases

Use Case 1: Rapid Portfolio Generation

User: "I need a portfolio showcasing 5 projects, my resume, and a contact form"

Gemini + MCP Response:

  1. Generates complete projects.toml with 5 project templates
  2. Creates resume.toml with standard sections
  3. Configures contact.html with form validation
  4. Provides deployment instructions
  5. Time saved: 2-3 hours β†’ 10 minutes

Use Case 2: Configuration Validation

User: Uploads existing home.toml file

MCP Server:

Use Case 3: Feature Discovery

User: "How do I add analytics dashboard to my projects page?"

Gemini Response:

[analytics]
enabled = true
title = "Project Analytics"

[analytics.charts]
weekly_activity = true
project_distribution = true
Enter fullscreen mode Exit fullscreen mode

Plus step-by-step integration guide.

πŸ“Š Impact & Results

Quantifiable Improvements

Metric Before After Improvement
Setup Time 4-6 hours 15-20 minutes 85% reduction
Configuration Errors Common Prevented ~90% reduction
Documentation Search 10-15 minutes Instant Near-instant
Portfolio Updates 30-45 minutes 5 minutes 83% faster

User Benefits

🌟 Key Features

Portfolio Capabilities

AI-Enhanced Workflows

πŸŽ“ Technical Implementation

Configuration Example 

# home.toml - Fully AI-generatable
[hero]
name = "Nishikanta Ray"
title = "Full-Stack Developer"
intro = [
    "Building developer-first tools and AI-assisted workflows",
    "Specialized in static-first architectures and minimal frameworks"
]

[hero.actions]
primary_text = "View Projects"
primary_link = "projects.html"
secondary_text = "Contact Me"
secondary_link = "contact.html"

[sections]
enabled_sections = ["projects", "skills", "experience"]

[theme]
mode = "auto"  # auto, light, or dark
accent_color = "#3b82f6"
Enter fullscreen mode Exit fullscreen mode

MCP Tool Usage 

// User prompt: "Create a blog config for tech writing"

// MCP generates:
{
  blog: {
    title: "Tech Blog",
    description: "Insights on web development",
    author: "Your Name"
  },
  settings: {
    posts_per_page: 6,
    enable_comments: true,
    enable_search: true,
    enable_categories: true
  },
  posts: [
    {
      id: "starter-post",
      title: "Welcome to My Blog",
      date: "2026-01-22",
      tags: ["introduction"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

πŸš€ Getting Started

Option 1: AI-Assisted Setup (Recommended) 

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

# 2. Use Gemini CLI for AI assistance:
gemini "Create a portfolio configuration for [Your Name] with projects and resume"

# 3. Deploy to any static host
# Netlify, Vercel, GitHub Pages, Cloudflare Pages
Enter fullscreen mode Exit fullscreen mode

Option 2: Manual Setup 

# Clone repository
git clone https://github.com/NishikantaRay/renderer.git

# Serve locally
python -m http.server 8000
# or
npx serve .

# Configure via TOML files in config/
# Edit content in Markdown files
Enter fullscreen mode Exit fullscreen mode

πŸ“š Resources

Documentation

Repositories

Quick Start Commands 

# Try the MCP server
npm install -g renderer-mcp-server

# Clone and run locally
git clone https://github.com/NishikantaRay/renderer.git
cd renderer && npx serve .

# Generate portfolio with Gemini CLI
gemini "Create a complete portfolio configuration for me"
Enter fullscreen mode Exit fullscreen mode

πŸ‘€ About the Creator

Nishikanta Ray - Full-Stack Developer specializing in:

Connect:

πŸŽ‰ Conclusion

Renderer demonstrates the transformative potential of Google Gemini when applied to real-world developer workflows. By combining static-first architecture with intelligent AI assistance through MCP, we've created a system that:

This project proves that AI isn't just for chatbotsβ€”it's a fundamental tool for reimagining how we build and maintain software.

Built with Google Gemini | Powered by MCP | Made for Developers

Start building your AI-assisted portfolio today at renderer.nishikanta.in πŸš€