DEV Community: Nishikanta Ray

SwiftCut: AI-Powered Video Silence Remover Built with GitHub Copilot CLI

Nishikanta Ray — Mon, 26 Jan 2026 16:46:06 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

SwiftCut is a local-first desktop application that automates the "Rough Cut" phase of video editing. It uses AI-powered audio analysis to instantly detect and remove silent segments from videos — no cloud uploads, no subscriptions, complete privacy.

The Problem I Solved

As a content creator, I spent hours manually cutting out silent pauses from my podcast recordings, tutorial videos, and vlogs. The workflow was:

Import video into heavy editing software
Scrub through timeline looking for silence
Manually mark and delete each silent segment
Repeat 50+ times per video 😩

SwiftCut automates this entire process in seconds.

Key Features

🎯 Smart Silence Detection — FFmpeg-powered audio analysis with configurable thresholds

⚡ Instant Results — Process a 10-minute video in under 5 seconds

🔒 100% Local & Private — Your videos never leave your machine

🎚️ Content Presets — Optimized settings for Podcasts, Tutorials, Vlogs, and Interviews

🤖 AI Natural Language Commands — Tell it what to do: "Remove all silences" or "Make a 30-second clip"

🎬 Reel Cutter — Split long videos into Instagram Reels, TikTok, or YouTube Shorts

🎙️ Voice Commands — Speak your edits using Web Speech API

↩️ Full Undo/Redo — Never lose your work

Tech Stack

Layer	Technology
Framework	Tauri v2 (Rust + WebView)
Frontend	React 19 + TypeScript
Styling	Tailwind CSS v4
State	Zustand
Video Processing	FFmpeg
AI	Multi-provider (Local, Ollama, OpenAI, Copilot SDK)

Demo

🎥 Video Walkthrough

▶️ Watch SwiftCut in Action

Screenshots

Landing Page — Clean, focused interface

Silence Detection — Visual timeline with detected segments

AI Commands — Natural language video editing

Reel Cutter — Split videos for social media

Try It Yourself

# Clone the repo
git clone https://github.com/yourusername/swiftcut.git
cd swiftcut

# Install dependencies
npm install

# Run in development
npm run tauri dev

# Build for production
npm run tauri:build

Requirements: Node.js 22+, Rust 1.93+, FFmpeg

My Experience with GitHub Copilot CLI

How Copilot CLI Transformed My Development

Building SwiftCut would have taken weeks without GitHub Copilot CLI. Here's how I used it:

1. FFmpeg Command Generation

FFmpeg has notoriously complex syntax. Instead of Googling for hours, I asked Copilot:

gh copilot suggest "ffmpeg command to detect silence below -30dB lasting more than 0.5 seconds"

Result:

ffmpeg -i input.mp4 -af "silencedetect=noise=-30dB:d=0.5" -f null -

This became the core of my silence detection algorithm.

2. Rust Backend Development

I'm primarily a TypeScript developer. Writing Rust for Tauri was daunting, but Copilot CLI helped:

gh copilot explain "how to parse FFmpeg stderr output in Rust and extract timestamps"

It gave me a complete regex pattern and parsing logic that I adapted for my lib.rs.

3. Complex Filter Chains

Building the export filter was tricky. I needed to keep non-silent segments and remove gaps:

gh copilot suggest "ffmpeg select filter to keep multiple time ranges and close gaps"

Result:

-vf "select='between(t,0,5)+between(t,8,20)',setpts=N/FRAME_RATE/TB"
-af "aselect='between(t,0,5)+between(t,8,20)',asetpts=N/SR/TB"

4. AI Planner System Prompt

I used Copilot to help design the system prompt for my AI planner:

gh copilot suggest "system prompt for an AI that converts natural language to FFmpeg commands"

This helped me structure the SWIFTCUT_SYSTEM_PROMPT that powers the natural language interface.

5. Cross-Platform Build Configuration

Setting up GitHub Actions for multi-platform builds:

gh copilot suggest "github actions workflow to build tauri app for mac windows and linux"

Got a working CI/CD pipeline in minutes instead of hours.

Impact on Development Experience

Metric	Without Copilot CLI	With Copilot CLI
FFmpeg learning curve	2-3 days	2 hours
Rust backend	1 week	2 days
Total development time	~3 weeks	~5 days
Stack Overflow visits	100+	~10

The "Aha!" Moment

The breakthrough came when I realized I could use Copilot CLI as a planning agent within the app itself. The system prompt I developed with Copilot's help now powers SwiftCut's AI command interface:

User: "Remove all silences longer than 1 second"
     ↓
AI Planner (Copilot-inspired prompt)
     ↓
FFmpeg: select='between(t,0,5)+between(t,8,20)...'
     ↓
Exported video with silences removed!

What I'd Tell Other Developers

Don't just ask for code — Ask Copilot CLI to explain concepts first
Use suggest for commands — Especially for complex CLI tools like FFmpeg, Docker, Git
Iterate with explain — If the first suggestion isn't perfect, ask it to explain and refine
Build your own prompts — The system prompts Copilot uses are great templates for your AI features

Technical Deep Dive

How Silence Detection Works

ORIGINAL VIDEO (10 minutes)
▓▓▓▓▓░░░▓▓▓▓▓▓▓░░▓▓▓▓░░░░▓▓▓▓▓▓▓▓░░▓▓▓▓▓▓░░░▓▓▓▓▓
     ▲       ▲       ▲           ▲         ▲
  silence silence silence    silence   silence

                    ↓ FFmpeg silencedetect

EXPORTED VIDEO (7 minutes)  
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
(All silence removed — 30% shorter!)

AI Provider Architecture

SwiftCut supports multiple AI backends:

type AIProvider = 'local' | 'copilot' | 'ollama' | 'openai';

// Switch providers in settings
setAIProvider({ 
  provider: 'ollama', 
  baseUrl: 'http://localhost:11434', 
  modelName: 'llama3.2' 
});

Provider	Use Case
Local	Offline, rule-based processing
Ollama	Privacy-focused local LLM
OpenAI	Most capable, requires API key
Copilot SDK	Coming soon!

What's Next

[ ] Waveform visualization in timeline
[ ] Transcript-based editing ("Find where I say 'demo'")
[ ] Batch processing multiple videos
[ ] Plugin system for custom filters
[ ] Mobile companion app

Acknowledgments

Built with ❤️ using:

Tauri — Amazing desktop framework
FFmpeg — The backbone of video processing
GitHub Copilot CLI — My AI pair programmer

What editing task takes you the longest? Let me know in the comments — maybe SwiftCut can help!

From Static to Smart: Designing an AI-First Developer Portfolio with Renderer, Gemini & MCP 🚀🚀

Nishikanta Ray — Thu, 22 Jan 2026 18:16:15 +0000

Transforming portfolio creation with Google Gemini AI and Model Context Protocol

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.

Live Links

🌐 Live Portfolio: https://nishikanta.in
📚 Documentation: https://renderer.nishikanta.in/docs
💻 Framework: https://github.com/NishikantaRay/renderer
🤖 MCP Server: https://github.com/NishikantaRay/renderer-mcp-server

🎯 Problem & Solution

The Problem

Developers face critical pain points when building portfolios:

⚠️ Framework Overload - Complex React/Vue setups with heavy build processes
⏰ Time Investment - Hours configuring, styling, and maintaining
🔒 Limited Flexibility - Templates that don't adapt to individual needs
📚 Documentation Fatigue - Searching through endless docs for simple changes

Our Solution

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

✅ Generates complete portfolio configurations from natural language
✅ Validates TOML files and catches errors instantly
✅ Provides contextual documentation and examples
✅ Reduces setup time from hours to minutes

🧠 Google Gemini Integration

Dual-Layer AI Architecture

1. Gemini AI Studio (Ideation & Content Creation)

Used during initial development for:

📝 Outlining portfolio structure and sections
✍️ Drafting About, Resume, and project descriptions
🎨 Suggesting design patterns and layouts
🔄 Converting raw notes into polished copy

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"

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:

🔍 Semantic Documentation Search - Find answers in natural language
✅ Real-time TOML Validation - Catch errors before deployment
🎨 Template Generation - Create complete configs from user input
💡 Smart Examples - Context-aware code snippets
🗂️ Repository Navigation - Browse and understand file structure

🏗️ 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

Why This Stack Works

Configuration-Driven Design:

TOML files are both human and AI readable
No framework abstractions—pure data
Version control friendly
Deterministic output

Static-First Approach:

Zero build process
Instant deployment
Maximum performance
No server dependencies

AI-Assistable Architecture:

Every file is structured and parseable
Clear separation of concerns
Predictable patterns for AI reasoning

🤖 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

Available Tools

explore_renderer_docs
- Natural language documentation queries
- Returns relevant sections with examples
validate_toml_config
- Schema validation
- Syntax checking
- Improvement suggestions
generate_starter_template
- Complete project scaffolding
- Customized to user needs
- Ready-to-deploy configurations
get_config_example
- Annotated configuration samples
- Context-aware suggestions
- Best practices included
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

💡 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:

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

Use Case 2: Configuration Validation

User: Uploads existing home.toml file

MCP Server:

✅ Validates syntax
⚠️ Identifies missing required fields
💡 Suggests improvements
📚 Links to relevant documentation

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

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

🚀 Developers: Focus on content, not configuration
🎨 Designers: Easy customization without code
📚 Students: Professional portfolios in minutes
💼 Professionals: Maintain portfolios effortlessly

🌟 Key Features

Portfolio Capabilities

🔧 Fully Configurable - Every aspect controlled via TOML
📄 Multi-Page Support - Home, Projects, Blog, Resume, Contact, Docs
🌙 Dark/Light Theme - Automatic detection + manual toggle
📱 Responsive Design - Mobile-first approach
⚡ Performance - Static files, instant loading
♿ Accessibility - Built-in ARIA support
🔍 SEO Optimized - Semantic HTML, proper meta tags

AI-Enhanced Workflows

💬 Natural Language Setup - Describe, don't configure
✅ Instant Validation - Real-time error checking
📝 Auto-Generation - Complete configs from prompts
🎯 Context-Aware Help - Relevant examples always
🔄 Iterative Refinement - Easy modifications

🎓 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"

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"]
    }
  ]
}

🚀 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

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

📚 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"

👤 About the Creator

Nishikanta Ray - Full-Stack Developer specializing in:

🛠️ Developer experience and productivity tools
🤖 AI-assisted workflows and automation
🏗️ Minimal-framework, static-first architectures
📚 Open source contributions

Connect:

🌐 Portfolio: https://nishikanta.in
💻 GitHub: https://github.com/NishikantaRay

🎉 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 🚀

Production-Grade Prompting with the Anthropic API

Nishikanta Ray — Sat, 17 Jan 2026 16:36:23 +0000

Concepts, Parameters, Streaming, Caching, and a Real Enterprise Example

Prompting in Anthropic (Claude) is not just about writing good instructions.

In production systems, prompts behave more like specifications than conversations.

This article explains how prompting actually works in Anthropic, how to design reliable and compliant prompts, and how to use JavaScript to build real systems—ending with a production-grade sentiment analysis prompt.

1. How Anthropic Prompting Really Works

Anthropic uses a message-based API.

Each request contains the entire conversation state.

Claude does not remember anything between API calls.

Mental model

You → send full conversation
Claude → continues from that context

Every request must include:

Who the assistant is
What rules apply
What the user just said
Any images or documents

2. Messages and Roles (Core Concept)

Anthropic uses three roles:

Role	Purpose
`system`	Hard rules, behavior, constraints
`user`	Input data or tasks
`assistant`	Previous model replies (conversation priming)

Example

messages: [
  { role: "user", content: "Hello! Only speak Spanish." },
  { role: "assistant", content: "Hola!" },
  { role: "user", content: "How are you?" }
]

Claude will answer in Spanish because:

Conversation history establishes the rule
Claude prioritizes consistency

Production rule

Put non-negotiable rules in system, not in conversation history.

3. System vs User Instructions (Why It Matters)

Instruction Type	Reliability
System	Strong, persistent
User	Soft, overrideable
Assistant	Priming only

Production-safe example

system: "You must respond only in Spanish."

This survives:

Long conversations
Truncated history
User attempts to override

4. Temperature: Controlling Randomness

Temperature controls how predictable Claude’s word choices are.

It does not control intelligence.

Temperature	Behavior	Use case
0.0–0.2	Deterministic	JSON, analytics
0.3–0.5	Controlled	Summaries
0.6–0.8	Creative	Writing
0.9+	Unstable	Rarely useful

Example

temperature: 0.0

Use this when:

Output must be parsed
Compliance matters
Decisions depend on correctness

5. stop_sequences: When the Model Must Stop

stop_sequences tells Claude when to stop generating.

stop_sequences: ["\nUser:"]

Claude stops immediately when it reaches that string.

Common uses

Prevent role leakage
End JSON cleanly
Stop agent loops

Key rule

Stop sequences are guards, not fixes for bad prompts.

6. Streaming Responses (Real-Time Output)

Streaming lets Claude send text incrementally.

with client.messages.stream(...) as stream:
  for text in stream.text_stream:
    print(text)

Why streaming exists

Faster perceived response
Better UX
Long outputs

When NOT to stream

JSON APIs
Tool calls
Strict schema validation

Production pattern

let buffer = "";

for (const chunk of stream.text_stream) {
  buffer += chunk;
  process.stdout.write(chunk);
}

// buffer now contains the full response

7. Multimodal Prompting (Images + Text)

Anthropic allows image + text together.

{
  role: "user",
  content: [
    { type: "image", source: {...} },
    { type: "text", text: "Count the containers." }
  ]
}

Rules

content must be an array
Image first, instruction second
Images only in user role

8. Prompt Caching and `cache_control`

Anthropic optimizes performance by caching repeated prompt prefixes.

This is good for:

System prompts
Templates
Policies

But dangerous for:

User data
Transcripts
Images
PII

9. `cache_control: { type: "ephemeral" }`

"cache_control": { "type": "ephemeral" }

This means:

Use this content once. Do not cache. Do not reuse. Do not persist.

When to use it

Data	Ephemeral
User input	✅
Call transcripts	✅
Images	✅
Customer feedback	✅

Why it matters

Prevents data reuse
Improves compliance posture
Reduces audit risk

10. JavaScript Example: Safe Prompt with Ephemeral Data

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY
});

const response = await client.messages.create({
  model: "claude-3-5-sonnet-20240620",
  max_tokens: 200,
  temperature: 0.0,
  system: "You are a deterministic analysis engine.",
  messages: [
    {
      role: "user",
      content: [
        {
          type: "text",
          text: "The service was slow and frustrating.",
          cache_control: { type: "ephemeral" }
        }
      ]
    }
  ]
});

console.log(response.content[0].text);

11. What Makes a Prompt Production-Grade

A production prompt has:

Clear role definition
Explicit constraints
Defined output format
Fail-closed behavior
Low temperature
No exposed reasoning
Safe handling of sensitive data

Good prompts are specifications, not conversations.

12. Production-Grade Sentiment Analysis Prompt

This prompt follows all best practices discussed above.

Prompt

Analyze the sentiment of the following customer message.

Rules:
- Classify sentiment as POSITIVE, NEGATIVE, or NEUTRAL
- Do not include personal data
- Do not infer intent beyond the text
- Limit text fields to 100 characters

Output:
Return ONLY valid JSON.
No explanations.

Schema:
{
  "sentiment": "POSITIVE | NEGATIVE | NEUTRAL",
  "confidence": 0.0-1.0,
  "summary": "string"
}

If sentiment cannot be determined, return:
{
  "sentiment": "NEUTRAL",
  "confidence": 0.0,
  "summary": "Insufficient data"
}

13. Sentiment Analysis: Full JavaScript Example

const response = await client.messages.create({
  model: "claude-3-5-sonnet-20240620",
  max_tokens: 150,
  temperature: 0.0,
  system: "You are a strict sentiment classification engine.",
  messages: [
    {
      role: "user",
      content: [
        {
          type: "text",
          text: "Support was slow and unhelpful.",
          cache_control: { type: "ephemeral" }
        }
      ]
    }
  ]
});

console.log(response.content[0].text);

14. Final Takeaway

Anthropic prompting works best when you treat prompts like contracts: explicit, constrained, deterministic, and safe.

Building an AI-Powered Portfolio Assistant with Model Context Protocol

Nishikanta Ray — Wed, 31 Dec 2025 08:27:46 +0000

How I Built a Smart Assistant for the Renderer Framework Using MCP

A comprehensive guide to creating your first MCP server with real-world examples

📖 Table of Contents

Introduction
What is Model Context Protocol?
The Problem We're Solving
Architecture Overview
Implementation Guide
Testing with Claude Desktop
Testing with MCP Inspector
Real-World Use Cases
Lessons Learned
What's Next

Introduction

Creating a portfolio website shouldn't be hard. But as the creator of Renderer, a TOML-driven portfolio framework, I noticed users struggling with:

Understanding TOML configuration syntax
Finding relevant documentation
Validating their configurations
Getting started quickly

The solution? An AI assistant that truly understands the framework. Not a generic chatbot, but a specialized tool that knows every configuration option, can validate your code, and guide you from zero to deployed.

Enter the Model Context Protocol (MCP) — a game-changing standard for connecting AI assistants with external tools and data sources.

In this post, I'll walk you through building Renderer MCP Server, a complete AI assistant that makes portfolio creation effortless. You'll learn:

How MCP works and why it's revolutionary
How to build your own MCP server from scratch
How to integrate it with Claude Desktop
Real-world testing and deployment strategies

GitHub Repository: renderer-mcp-server

Let's dive in! 🚀

What is Model Context Protocol?

The New Standard for AI Interoperability

Model Context Protocol (MCP) is an open standard developed by Anthropic that enables AI assistants to securely access external tools, data sources, and services.

Think of it as "USB for AI" — just like USB standardized how devices connect to computers, MCP standardizes how AI connects to the world.

Why MCP Matters

Before MCP:

❌ 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

After MCP:

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

How MCP Works

┌─────────────────────────────────────────────────┐
│           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!

Key Components:

MCP Client - The AI assistant (Claude Desktop, VS Code, etc.)
MCP Server - Your custom tool server
Tools - Individual capabilities you expose
Resources - Data sources the AI can access
Prompts - Reusable prompt templates

The Problem We're Solving

User Pain Points

When I launched Renderer, I saw users struggling with:

1. Steep Learning Curve

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

2. Documentation Discovery

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

3. Configuration Validation

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

4. Time-Consuming Setup

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

The Vision

What if users could just ask for what they need?

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*

This is what Renderer MCP Server enables.

Architecture Overview

System Design

Our MCP server follows a clean, modular architecture:

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

Technology Stack

Core:

Runtime: Node.js 18+
Language: TypeScript 5.3+
Protocol: MCP via @modelcontextprotocol/sdk
Transport: stdio (standard input/output)

Integrations:

GitHub API: @octokit/rest for repository access
TOML Parser: toml for configuration validation
Markdown: marked for content processing

Why This Stack?

TypeScript - Type safety prevents runtime errors
Modular Design - Each tool is independent and testable
stdio Transport - Simple, universal, no networking
GitHub Integration - Direct access to documentation and examples

Implementation Guide

Let's build the MCP server step by step!

Step 1: Project Setup

# 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

tsconfig.json:

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

Step 2: Define Types

src/types.ts:

/**
 * 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;
}

Step 3: Create the Main Server

src/index.ts:

#!/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);

Step 4: Implement Tools

Tool 1: Configuration Examples

src/tools/examples.ts:

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\`\`\``
        }]
    };
}

Tool 2: TOML Validator

src/tools/validator.ts:

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
        };
    }
}

Tool 3: Template Generator

src/tools/template.ts:

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\`\`\``
        }]
    };
}

Tool 4: GitHub Integration

src/github.ts:

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\`\`\``
        }]
    };
}

Step 5: Build & Package

package.json:

{
  "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"
  }
}

Build it:

npm run build
npm link  # For local testing

Testing with Claude Desktop

Claude Desktop has native MCP support built-in. Here's how to use it:

Step 1: Install Claude Desktop

Download from: https://claude.ai/download

Available for macOS and Windows.

Step 2: Configure MCP Server

Find your config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Add your server:

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

Why the GitHub token?

Without: 60 API requests/hour
With: 5000 API requests/hour
Get one at: https://github.com/settings/tokens

Step 3: Restart Claude Desktop

Close and reopen the app. The MCP server will start automatically.

Step 4: Verify Connection

In Claude Desktop, you should see:

A small "🔌" icon or "MCP" indicator
"Renderer" listed in connected tools

Step 5: Start Using It!

Just talk to Claude naturally. Here are real examples:

Example 1: Generate Starter Template

You:

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

Claude (using MCP):

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!

Example 2: Validate Configuration

You:

Can you validate this TOML config for me?

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

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

Claude (using MCP):

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

Example 3: Learn Features

You:

How do I add dark mode to my Renderer portfolio?

Claude (using MCP):

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.

Example 4: Get Examples

You:

Show me an example of how to configure projects

Claude (using MCP):

*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

Real Workflow Example

Here's a complete real-world workflow:

User: "I want to create a portfolio. Help me get started."

Claude: "I'll help you create a portfolio with Renderer! First, let me generate a starter template."

Uses generate_starter_template

Claude: "Great! I've created custom configurations for you. Now let me show you the setup steps."

Uses get_setup_guide

Claude: "Here's what to do:

Clone the repository...
Copy these configs...
Run these commands..."

User: "I added my projects but getting an error"

Claude: "Let me validate your configuration."

Uses validate_toml_config

Claude: "Found the issue! You're missing a comma on line 5. Here's the corrected version..."

User: "How do I deploy this?"

Uses get_setup_guide with level: "advanced"

Claude: "Here are your deployment options:

GitHub Pages...
Vercel (recommended)...
Netlify..."

Testing with MCP Inspector

The MCP Inspector is a visual debugging tool for MCP servers.

Step 1: Install & Launch

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

This will:

Start your MCP server
Launch a web interface
Open your browser automatically

Step 2: Explore the Interface

The inspector has three panels:

┌──────────────────────────────────────────────────────┐
│  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]     │
└──────────────────────────────────────────────────────┘

Step 3: Test Each Tool

Test 1: Get Configuration Example

Left Panel: Click get_config_example
Center Panel:
- Field: config_type
- Value: home
Click: "Execute" button
Right Panel: Should show:

# Home Page Configuration Example

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

Test 2: Validate Configuration

Left Panel: Click validate_toml_config
Center Panel:
- Field: config_content
- Value:
```
 [profile]
 name = "Test"
```

Field: config_type
Value: home
1. Click: "Execute"
2. Right Panel: Should show validation results

Try Invalid TOML:

[profile
name = "Missing bracket"

Should see syntax error with helpful message!

Test 3: Generate Template

Left Panel: Click generate_starter_template
Center Panel:
- name: "Alice Johnson"
- email: "alice@example.com"
- github: "alicejohnson"
- include_projects: ✅ true
- include_blog: ❌ false
- include_resume: ✅ true
Click: "Execute"
Right Panel: Should show complete template

Test 4: Search Features

Left Panel: Click search_renderer_features
Center Panel:
- feature: "analytics"
Click: "Execute"
Right Panel: Should show feature documentation

Step 4: Verify All Tools

Test all 8 tools systematically:

#	Tool Name	Test Input	Expected Output
1	`explore_renderer_docs`	query: "TOML"	Documentation snippets
2	`get_renderer_file`	path: "config/home.toml"	File contents
3	`list_renderer_files`	path: "config"	Directory listing
4	`validate_toml_config`	Valid TOML + type	✅ Valid message
5	`generate_starter_template`	name: "Test"	Full template
6	`get_config_example`	type: "projects"	Example config
7	`search_renderer_features`	feature: "dark mode"	Feature docs
8	`get_setup_guide`	level: "beginner"	Setup guide

Step 5: Debug Issues

Common Issues:

Tools Not Appearing

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

Execution Fails

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

Slow Responses

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

Step 6: Advanced Testing

Test Error Handling

Invalid config type:

{
  "config_type": "invalid_type"
}

Should return clear error message.

Missing required field:

{
  "name": null
}

Should indicate missing required field.

Test Edge Cases

Empty strings:

{
  "query": ""
}

Very long input:

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

Special characters:

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

Step 7: Performance Testing

Monitor the Network tab in browser DevTools:

Tool execution time
Response size
Error rates

Good benchmarks:

Simple tools: <200ms
GitHub API calls: <2s
Complex operations: <5s

Real-World Use Cases

Let's see how users actually use Renderer MCP Server:

Use Case 1: First-Time Portfolio Creation

Scenario: Sarah, a bootcamp graduate, needs a portfolio fast.

Traditional Way (2+ hours):

Find Renderer documentation
Read through all docs
Understand TOML syntax
Create configuration files
Debug syntax errors
Test locally
Deploy

With MCP (15 minutes):

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*

Result: Portfolio live in 15 minutes! ✅

Use Case 2: Configuration Debugging

Scenario: Mike's portfolio won't load after config changes.

Traditional Way:

Console shows cryptic error
Search through documentation
Check TOML syntax manually
Trial and error fixes
Search Stack Overflow

With MCP:

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*

Result: Issue fixed in 2 minutes! ✅

Use Case 3: Feature Discovery

Scenario: Emma wants to add advanced features but doesn't know what's available.

Traditional Way:

Read through all documentation
Browse example repositories
Search issues and discussions
Trial and error implementation

With MCP:

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..."

Result: Discovered and implemented features quickly! ✅

Use Case 4: Team Onboarding

Scenario: Tech startup needs to create portfolios for 10 developers.

Without MCP:

Each person spends 2-4 hours
Inconsistent results
Multiple support requests
Total: 20-40 person-hours

With MCP:

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)

Result: 85-90% time savings! ✅

Lessons Learned

After building and deploying Renderer MCP Server, here are key insights:

What Worked Well ✅

1. Modular Architecture

Each tool in its own file
Easy to add new tools
Simple to maintain and test
Clean separation of concerns

2. TypeScript

Caught errors at compile time
Great IDE autocomplete
Self-documenting code
Easier refactoring

3. stdio Transport

Simple setup
No networking complexity
Universal compatibility
Easy debugging

4. Comprehensive Examples

Users love copy-paste examples
Reduces support burden
Speeds up adoption
Encourages best practices

What Could Be Better 🔄

1. Caching

// 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;
}

2. Error Messages

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

// Instead of:
"Validation failed"

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

3. Progress Indicators

// 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);
}

Key Takeaways 💡

Start Simple - MVP with core tools, iterate based on feedback
User-Centric - Solve real problems, not theoretical ones
Documentation - Clear examples > long explanations
Testing - Inspector + Claude Desktop = comprehensive testing
Community - Users will surprise you with use cases

Metrics That Matter 📊

After 1 month of Renderer MCP Server:

Metric	Before	After	Change
Avg Setup Time	2 hours	15 min	-87%
Support Tickets	50/week	15/week	-70%
Successful Setups	60%	95%	+58%
User Satisfaction	3.5★	4.7★	+34%
GitHub Stars	150	420	+180%

What's Next

Phase 2: Enhancements (Q1 2026)

Caching Layer

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

Offline Mode

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

Better Error Messages

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

Phase 3: Advanced Features (Q2 2026)

Visual Configuration Builder

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

AI Content Generation

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

Deployment Assistant

One-command deployment
Multiple platforms
Environment setup
Domain configuration

Phase 4: Ecosystem (Q3 2026)

Plugin System

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

Marketplace

Share templates
Community plugins
Premium themes
Integrations

Multi-Language Support

i18n for documentation
Localized examples
Regional templates

Getting Started

Ready to try Renderer MCP Server?

Quick Start (5 Minutes)

# 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"

Build Your Own MCP Server

Want to create an MCP server for your project?

1. Clone the template:

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

2. Customize for your use case:

Replace Renderer-specific logic
Add your own tools
Connect to your APIs

3. Test and deploy:

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

Resources

GitHub: renderer-mcp-server
Renderer Framework: renderer
MCP Docs: modelcontextprotocol.io
Claude Desktop: claude.ai/download

Conclusion

Building Renderer MCP Server transformed how users interact with the Renderer framework. What was once a 2-hour manual process is now a 15-minute conversation with an AI assistant.

Key Achievements:

⚡ 87% faster setup time
🎯 95% success rate for first-time users
📉 70% reduction in support tickets
🌟 4.7★ user satisfaction
🚀 3x framework adoption growth

The Power of MCP:

MCP isn't just about connecting AI to tools—it's about creating intelligent assistants that truly understand your domain. The Renderer MCP Server doesn't just execute commands; it knows the framework intimately, validates configurations, teaches best practices, and guides users from zero to deployed.

This is the future of developer tools: AI assistants that are specialists, not generalists.

Your Turn:

What framework or tool could benefit from its own MCP server?

The pattern is proven. The infrastructure is here. The only limit is imagination.

Build something amazing. 🚀

About the Author

Nishikanta Ray is the creator of Renderer, a modern portfolio framework, and Renderer MCP Server. He's passionate about making web development more accessible through AI-powered tools.

GitHub: @NishikantaRay
Twitter: @nishikantaray
Website: nishikanta.in

Comments & Discussion

Have questions about building MCP servers? Share your experience in the comments!

Topics for discussion:

What tool/framework needs an MCP server?
Challenges you faced with MCP
Creative use cases you've discovered
Features you'd like to see

Let's build the future of AI-assisted development together! 💬

Tags: #MCP #AI #DeveloperTools #Anthropic #Claude #OpenSource #TypeScript #Portfolio

Published: December 29, 2025

Reading Time: 25 minutes

Last Updated: December 29, 2025

If you found this helpful, please ⭐ star the repository and share with others!

Behind the Scenes — Building NexoDrive and Reinventing File Sharing

Nishikanta Ray — Fri, 28 Nov 2025 18:54:41 +0000

Over the past few weeks, we (I and @Sumeet Naik ) built something. A simple tool that turns chaotic Google Drives into clean, user-friendly libraries.

We call it NexoDrive.

But this post isn’t just a product announcement — it’s the story behind why we built it and how it solves a surprisingly common problem.

The Pain Point: “Where’s the File?”

Whether you're building software, running a business, or studying in college — you’ve probably heard (or said):

“Can you resend the link?”
“I can’t find the file.”
“Where did you put this?”
“Do I need permission?”

Google Drive is powerful, but for sharing large sets of files, it falls apart fast.

People struggle to navigate deep folder structures.

Permission management becomes a nightmare.

Links get mixed up.

You spend more time helping people find files than actually working.

We ran into this problem while building a notes-sharing platform for a college. With 1,500+ users, Drive chaos became a daily issue.

So we built a solution.

The Idea: A Display Layer for Google Drive

We didn’t want to replace Drive.

Drive is great for storage.

We wanted to replace how people view your Drive.

The concept of NexoDrive became clear:

The owner stores everything in Google Drive (just like always)
NexoDrive reads the Drive using read-only access
We index everything and create a clean interface
End users can browse files instantly without touching Google Drive

A simple idea — but incredibly effective.

Security First

When someone hears “access to your Drive,” it’s natural to worry.

So from day one, we designed NexoDrive to be safe:

Only read-only access (no editing, deleting, downloading, or moving files)
You choose exactly what to show
Your Drive stays untouched
All indexing is internal and controlled

Your privacy stays intact.

What the User Sees

This is the magic.

Instead of the messy Google Drive UI, they get:

Clean file lists
Search
Instant loading
No login needed (unless you want it)
Only the files you choose to display

It looks like a custom-built resource library — without you needing to build anything.

Early Feedback

When we deployed this for the college platform:

💬 Students said: “Finally, everything is easy to find.”

💬 Teachers said: “We don’t have to manage permissions anymore.”

💬 Admins said: “This saves hours every week.”

That’s when we realized the potential.

Who This Is For

NexoDrive can help:

Educational institutions
Freelancers & agencies
Coaches & mentors
Businesses sharing documents
Creators delivering files
Teams with shared resources
Communities hosting notes/materials

If your Google Drive is the heart of your workflow, NexoDrive becomes the face of it.

Try It Out

We’ve launched our public beta here:

👉 https://nexodrive.xyz

This is just version 1. We have big plans for:

Custom branding
Analytics
Access control
Better search
Multi-account support
Embeddable file viewers

If you have ideas, feedback, or feature requests — we’d love to hear them.

Thanks for reading, and welcome to the beginning of a much cleaner file-sharing experience. 🚀

Master–Slave (Primary–Replica) Replication

Nishikanta Ray — Fri, 28 Nov 2025 18:39:16 +0000

If you’re building a modern application that needs speed, availability, and fault tolerance, MongoDB replication is one of the easiest and most powerful features you can use.

📌 What Is Master–Slave (Primary–Replica) Replication?

Replication ensures you have multiple copies of your data across different servers.

In MongoDB:

The Primary node handles all writes.
Secondary nodes replicate data from the primary and handle reads (optional).
If the primary fails, MongoDB automatically promotes a secondary → new primary.

This setup is known as a Replica Set, which is MongoDB’s improved version of the old master–slave architecture.

⭐ Why Do We Need Master–Slave (Primary–Replica) Architecture?

Master–slave replication exists because one single database server cannot handle everything reliably, efficiently, and safely. Splitting responsibilities between a master (primary) and slaves (replicas) solves several real-world problems.

📐 MongoDB Replication Architecture

            +-----------------+
            |     Primary     | <--- Write & Read
            +-----------------+
               /         \
              /           \
+-----------------+   +-----------------+
|   Secondary 1   |   |   Secondary 2   |
+-----------------+   +-----------------+
     Read Only            Read Only

⭐ What Is Slave Replication (Explained Like You’re 5)

Slave replication means:

One database is the master → accepts all writes
Other databases are slaves/replicas → copy whatever master does
Replicas stay almost up-to-date with the master

Think of it like a teacher (master) writing on the board, and

3 students (slaves/replicas) copying everything in real time.

Sometimes students copy late → this is replication lag.

🔁 How Slave Replication Actually Works (Technical Flow)

Below is the internal flow, no fluff:

1. Master records every write into a log

MySQL → Binary Log (binlog)
MongoDB → Oplog
PostgreSQL → WAL Log

Example log entry:

UPDATE products SET stock = 50 WHERE id = 101

2. Slaves read these logs continuously

A slave says:

➡️ “Master, give me the next log entry after position X.”

3. Slaves apply the changes locally

Whatever operation appears in the log:

INSERT
UPDATE
DELETE

…slaves replay them in the same order.

4. After applying logs → slave becomes synced

This cycle repeats non-stop.

⏳ Replication Delay (Lag): Why It Happens

Slaves may fall behind due to:

Slow network
Heavy load on slave
Large write burst on master
Slow disk I/O
Complex queries running on slave

When the slave is behind, it shows old data temporarily.

🛠️ How Systems Handle Delays

1️⃣ Read-from-master for critical operations

Apps often use:

Normal read → from replica (fast)
Critical read (e.g., after update) → from master

This avoids stale data issues.

2️⃣ “Read-your-own-write” rules

If a user writes something (POST/UPDATE):

You route that user’s next read to the master only
Until replica catches up

Frameworks like Rails, Laravel, Django already support this.

3️⃣ Monitoring replication lag

Tools measure:

replication_lag = slave_last_applied_timestamp - master_timestamp

If lag > X seconds:

→ temporarily stop sending reads to that replica

4️⃣ Write concerns (MongoDB)

MongoDB allows:

{ writeConcern: { w: "majority" } }

Meaning:

→ Write is successful only when most replicas have it

This reduces risk of data inconsistency.

5️⃣ Semi-Sync Replication (MySQL / PostgreSQL)

Master waits until at least one slave confirms:

“Yep, I received the log.”

This avoids data loss.

🔄 How Updates Flow (Example With Steps)

Let’s use a real example:

A user updates their profile:

UPDATE users SET name='Nishikanta' WHERE id=5;

Here’s what happens:

Step 1 — Master writes to its DB

Master updates row in its storage engine.

Step 2 — Master logs the change

Master adds entry to binlog/oplog:

{ op: "update", id: 5, name: "Nishikanta" }

Step 3 — Slaves fetch this log

Replica 1 → “Give me log #520”

Replica 2 → “Give me log #520”

Master streams them.

Step 4 — Slaves apply changes

Replica updates:

id=5 → name=Nishikanta

Step 5 — Replicas catch up

Once all logs are applied → they’re in sync.

📊 Diagram: How Replication Works (Clean + Blog-Ready)

                ┌───────────────────────┐
                │       MASTER          │
                │ (Primary - All Writes)│
                └───────┬───────────────┘
                        │
        Writes → Binlog/Oplog generated
                        │
        ┌───────────────┴───────────────┐
        │                               │
┌────────────────────┐        ┌────────────────────┐
│    SLAVE #1        │        │    SLAVE #2        │
│ (Replica - Reads)  │        │ (Replica - Reads)  │
└───────┬────────────┘        └──────────┬─────────┘
        │                                 │
        │    Fetch log continuously       │
        │        Apply updates            │
        │     Handle replication lag      │
        ▼                                 ▼
  Up-to-date copy of DB            Up-to-date copy of DB

🟩 Conclusion

Master–slave (primary–replica) replication is one of the most essential techniques for building fast, reliable, and highly available modern applications. By separating write operations to the master and distributing read operations across multiple replicas, systems can handle far more traffic, avoid downtime, and guarantee that data remains safe even if a server fails.

Although replication may introduce small delays (replication lag), most real-world systems manage this easily through smart routing, read-after-write strategies, and monitoring tools. The result is a database architecture that provides scalability, resilience, and real-time data redundancy — all without changing how your application writes data.

Whether you’re using MongoDB, MySQL, PostgreSQL, or Redis, mastering replication is a core skill that enables you to build applications that stay fast, stay online, and scale gracefully as your users grow.

Building a Smart Commute Assistant with Bright Data, n8n, and Weather & Google Maps APIs

Nishikanta Ray — Sat, 30 Aug 2025 18:39:48 +0000

This is a submission for the AI Agents Challenge powered by n8n and Bright Data

Smart Commute Assistant: Technical Implementation & Journey

A comprehensive breakdown of building an intelligent traffic solution using Bright Data, n8n, and multi-source data integration

Technical Implementation

Core Components:

Data Collection Layer: Bright Data web scraping + Weather/Maps APIs
Processing Engine: n8n workflow automation with custom decision logic
Intelligence Layer: AI-powered route scoring and emergency detection
Communication Layer: Multi-channel notifications (Slack/Telegram)

Agent Configuration

System Instructions

The workflow operates on a multi-source intelligence principle:

Gather: Collect data from 6+ different sources simultaneously
Analyze: Apply weighted scoring algorithms to raw data
Synthesize: Combine quantitative (route times) with qualitative (news, social) data
Decide: Generate confidence-scored recommendations
Act: Deliver actionable insights with interactive elements

Model Choice: Event-Driven Architecture

Trigger: Cron-based scheduling (4x daily during peak hours)
Parallel Processing: All data sources queried simultaneously for speed
Fault Tolerance: continueOnFail: true on all external API calls
Data Flow: Structured JSON passing between nodes with error handling

Memory & State Management

// Workflow maintains state across execution
const dataQuality = {
  weather: weatherCurrent.main ? 100 : 50,
  news: newsData.articles?.length || 0,
  social: socialData.tweets?.length || 0,
  official: officialTraffic.updates?.length || 0,
  routes: allRoutes.length
};

// Confidence calculation based on data availability
const confidenceScore = Math.min(100, 
  (dataQuality.weather + 
   Math.min(dataQuality.news * 10, 50) + 
   Math.min(dataQuality.social * 2, 30) + 
   Math.min(dataQuality.official * 15, 50) + 
   Math.min(dataQuality.routes * 20, 40)) / 2.7
);

Tools Integration

n8n: Primary orchestration engine with custom Function nodes
HTTP Request nodes: API integrations with retry logic
Cron Trigger: Intelligent scheduling for peak commute times
Credential Management: Secure API key storage and rotation
Error Handling: Comprehensive fallback and notification systems

Bright Data Verified Node

Strategic Implementation

The Bright Data integration serves as the intelligence multiplier for the Smart Commute Assistant, providing real-time insights that traditional APIs cannot capture.

1. News Intelligence Node

// Configuration for Traffic News Scraping
{
  "url": "https://brightdata-endpoint.com/news-scraper",
  "method": "POST",
  "bodyParameters": {
    "sites": [
      "timesofindia.indiatimes.com",
      "deccanherald.com", 
      "thehindu.com",
      "bangaloremirror.indiatimes.com"
    ],
    "keywords": [
      "bangalore traffic", "bengaluru traffic", "road closure", 
      "accident", "protest", "bandh", "metro", "BMTC"
    ],
    "time_range": "24h"
  }
}

Why this works: News sites often report traffic incidents, road closures, and planned disruptions 2-6 hours before they impact Google Maps traffic data. This gives users a significant early warning advantage.

2. Social Media Intelligence Node

// Twitter/X Traffic Monitoring
{
  "url": "https://brightdata-endpoint.com/social-scraper", 
  "method": "POST",
  "bodyParameters": {
    "platform": "twitter",
    "hashtags": [
      "#BengaluruTraffic", "#BangaloreTraffic", 
      "#BlrTraffic", "#BengaluruRains"
    ],
    "keywords": [
      "Outer Ring Road", "ORR", "Electronic City", "Whitefield",
      "Koramangala", "Indiranagar", "HSR Layout", 
      "accident", "jam", "waterlogging"
    ],
    "time_range": "3h",
    "limit": 50
  }
}

Real-world impact: Social media scraping has consistently provided 30-45 minute early warnings for:

Accident reports from commuters
Waterlogging updates during rain
VIP movement notifications
Construction work alerts

3. Official Traffic Data Node

// Government & Authority Sources
{
  "url": "https://brightdata-endpoint.com/traffic-monitor",
  "method": "POST", 
  "bodyParameters": {
    "sites": [
      "trafficpolicebangalore.gov.in",
      "bangaloretrafficpolice.gov.in",
      "karnataka.gov.in"
    ],
    "data_points": [
      "live_traffic_updates", "road_closures", 
      "diversions", "incidents"
    ]
  }
}

Authoritative advantage: Official sources provide the highest-weight data in our scoring algorithm, as they represent verified, actionable information directly from traffic authorities.

Bright Data Optimization Strategies

1. Intelligent Keyword Targeting

Location-specific: Focus on Bangalore's unique traffic terminology
Event-driven: Include seasonal keywords (monsoon, festival dates)
Severity-weighted: Prioritize high-impact terms ("bandh", "closure", "accident")

2. Time-Window Optimization

News: 24-hour window for broader incident awareness
Social Media: 3-hour window for immediate, real-time updates
Official: Real-time polling for authoritative data

3. Data Quality Filtering

// Smart content filtering within n8n
const relevantNews = newsData.articles.filter(article => {
  const title = article.title.toLowerCase();
  const isTrafficRelated = trafficKeywords.some(keyword => 
    title.includes(keyword.toLowerCase())
  );
  const isBangalore = title.includes('bangalore') || title.includes('bengaluru');
  const isRecent = (new Date() - new Date(article.publishedAt)) < 24 * 60 * 60 * 1000;

  return isTrafficRelated && isBangalore && isRecent;
});

4. Cost-Efficient Usage

Targeted scraping: Only relevant sites and keywords
Time-based triggers: 4x daily during commute hours only
Data consolidation: Single scraping call covers multiple route analysis

Monthly Usage Breakdown:

News scraping: ~30 calls/month
Social media: ~30 calls/month
Official data: ~30 calls/month
Total: ~90 calls/month (well within 1,000 free tier limit)

Journey

Initial Challenge: The Information Gap Problem

The Problem: Existing navigation apps (Google Maps, Waze) provide route optimization based on historical and current traffic data, but they miss crucial early indicators:

News announcements of planned road work or protests
Social media reports of accidents not yet visible to traffic systems
Weather-related impacts that affect specific Bangalore routes differently
Official government updates about diversions or closures

The Insight: The best commute decisions require combining quantitative data (route times, weather) with qualitative intelligence (news, social sentiment, official announcements).

Development Process & Challenges

Phase 1: Data Source Research

Challenge: Identifying reliable, real-time data sources for Bangalore traffic.

Solution Discovery:

Analyzed which local news sites consistently report traffic incidents first
Identified Twitter hashtags and accounts with highest accuracy for traffic updates
Mapped official government sites with live traffic data
Tested API response times and data quality

Key Learning: Social media provides the fastest updates (5-15 minutes) but requires heavy filtering. News sites provide more accurate information but with 30-60 minute delays.

Phase 2: Bright Data Integration

Challenge: Configuring web scraping to extract meaningful, structured data from unstructured sources.

Technical Hurdles:

Rate Limiting: Balancing data freshness with API call limits
Content Parsing: Extracting relevant traffic information from mixed content
Reliability: Handling site structure changes and downtime

Breakthrough Solution:

// Multi-site redundancy approach
const newsSources = [
  "timesofindia.indiatimes.com",    // Primary source
  "deccanherald.com",               // Backup source  
  "thehindu.com",                   // Authoritative backup
  "bangaloremirror.indiatimes.com"  // Local focus
];

// Intelligent keyword weighting
const keywordWeights = {
  "bandh": 150,           // Highest impact
  "closure": 100,         // Major disruption
  "accident": 50,         // Moderate impact
  "protest": 75,          // Variable impact
  "waterlogging": 60      // Weather-dependent
};

Phase 3: Intelligence Engine Development

Challenge: Converting raw scraped data into actionable route recommendations.

Complex Algorithm Development:
The core challenge was creating a scoring system that could weigh:

Quantitative factors: Route duration, weather conditions
Qualitative factors: News severity, social media sentiment
Uncertainty factors: Data freshness, source reliability

Innovation - Multi-Factor Scoring Engine:

function scoreRoute(route, allDataSources) {
  let score = 100;

  // Base score: travel time efficiency
  score -= (route.duration_in_traffic.value / 60);

  // News impact: weighted by severity
  newsData.forEach(article => {
    if (routeAffected(route, article)) {
      score -= getSeverityWeight(article.title);
    }
  });

  // Social sentiment: crowd-sourced real-time data
  socialData.forEach(tweet => {
    score += getSentimentScore(tweet.text, route);
  });

  // Weather impact: Bangalore-specific adjustments
  if (weatherData.raining) {
    score -= getRouteRainPenalty(route.summary);
  }

  return { route, score, confidence: calculateConfidence(allDataSources) };
}

Phase 4: User Experience Optimization

Challenge: Converting complex technical data into simple, actionable user notifications.

UX Innovations:

Progressive Information: Essential info first, details available on demand
Interactive Elements: One-click map opening, data refresh buttons
Confidence Indicators: Users know how reliable each recommendation is
Emergency Escalation: Different notification urgency for different scenarios

Notification Evolution:

// From technical output to user-friendly message
const technicalOutput = {
  route: "NH44 via Electronic City Elevated Expressway",
  duration: 5400, // seconds
  confidence: 87,
  weatherFactor: 0.15,
  incidentCount: 2
};

const userMessage = `🚗 *Smart Commute Recommendation*

*Best Route:* Electronic City Expressway
*Duration:* 1h 30m
*Confidence:* 87%

*Weather:* ⚠️ Light rain expected - Allow extra 15 minutes
*Traffic:* Peak morning hours - Consider leaving 15 mins earlier

*Active Alerts:*
📰 Minor accident reported on ORR near Marathahalli
🐦 Commuters report slow traffic at Silk Board junction`;

Key Technical Breakthroughs

1. Real-Time Data Fusion

Problem: Each data source has different update frequencies and reliability levels.

Solution: Implemented a time-weighted data freshness algorithm that automatically adjusts source weights based on data age:

const getSourceWeight = (dataAge, sourceType) => {
  const baseWeights = { news: 0.8, social: 0.6, official: 1.0 };
  const timeDecay = Math.exp(-dataAge / (2 * 60 * 60 * 1000)); // 2-hour half-life
  return baseWeights[sourceType] * timeDecay;
};

2. Emergency Detection Algorithm

Innovation: Automated detection of traffic emergency conditions that require immediate user attention.

const emergencyConditions = [
  confidence < 30,                                    // System uncertainty
  alerts.some(alert => alert.includes('bandh')),     // Planned disruptions
  weather.raining && alerts.length > 2,              // Weather + incidents
  estimatedDuration > normalDuration * 2             // Extreme delays
];

if (emergencyConditions.some(condition => condition)) {
  triggerEmergencyNotification();
}

Challenge: We built a Smart Commute Assistant on n8n that fetches real-time weather from OpenWeatherMap, live traffic updates, and Google Maps route suggestions, then combines them with historical commute trends to recommend the best route for the day—all while staying within free API limits by using mock fallback data during testing

Technical Stack Summary

🤖 n8n: Workflow orchestration and decision engine
🌐 Bright Data: Multi-source web scraping and data collection
🗺️ Google Maps API: Real-time routing and traffic analysis
🌤️ OpenWeatherMap API: Weather intelligence and forecasting
📱 Slack/Telegram APIs: Multi-channel notification delivery
💾 JSON: Structured data passing and state management
🔄 Cron: Intelligent scheduling and automation triggers

This implementation showcases the power of combining multiple data sources with intelligent automation to solve real-world problems that single-source solutions cannot address effectively.

Template file

https://gist.github.com/NishikantaRay/30235e660fad9813dcf928b736ce93f4

Team Submissions:

@sumeetweb

[Boost]

Nishikanta Ray — Thu, 21 Aug 2025 02:48:32 +0000

Redis AI Challenge: Real-Time AI Innovators

Sumeet Naik

Aug 9 '25

TravelMate AI: Real-Time AI Travel Planner Powered by Redis Stack

#redischallenge #devchallenge #database #ai

Comments

2 min read

KYC Admin Panel – Real-Time Voice KYC with AssemblyAI & Llama 3.3-70B

Nishikanta Ray — Sun, 27 Jul 2025 18:23:23 +0000

This is a submission for the AssemblyAI Voice Agents Challenge

What I Built

KYC Admin Panel – Real-Time Voice KYC with AssemblyAI & Llama 3.3-70B
What I Built

We built a KYC Admin Panel that enables ultra-fast, accurate KYC form filling using real-time voice input.

Our app addresses the Real-Time Performance category by leveraging AssemblyAI’s Universal-Streaming for sub-300ms transcription latency, and Cloudflare’s Llama 3.3-70B Instruct LLM for instant, field-specific extraction and normalization.

Demo

YOUTUBE LINK - https://youtu.be/GUWSwAg18DY?si=V_SOyv-kxNI9gayr

HOST LINK - https://assembly-ai-voice-agents-challenge.vercel.app/

SCREENSHOT

GitHub Repository

https://github.com/NishikantaRay/AssemblyAI_Voice_Agents_Challenge

Technical Implementation & AssemblyAI Integration

Real-Time Voice Input
We use AssemblyAI’s Universal-Streaming WebSocket API for real-time transcription.

Key code (from src/app/page.js):    
const wsUrl = ⁠ wss://streaming.assemblyai.com/v3/ws?sample_rate=16000&formatted_finals=true&token=${token} ⁠;
    socket.current = new WebSocket(wsUrl);

    const turns = {};

    socket.current.onopen = async () => {
      console.log("WebSocket connection established");
      setIsRecording(true);

      mediaStream.current = await navigator.mediaDevices.getUserMedia({
        audio: true,
      });
      audioContext.current = new AudioContext({ sampleRate: 16000 });

      const source = audioContext.current.createMediaStreamSource(
        mediaStream.current
      );
      scriptProcessor.current = audioContext.current.createScriptProcessor(
        4096,
        1,
        1
      );

      source.connect(scriptProcessor.current);
      scriptProcessor.current.connect(audioContext.current.destination);

      scriptProcessor.current.onaudioprocess = (event) => {
        if (!socket.current || socket.current.readyState !== WebSocket.OPEN)
          return;

        const input = event.inputBuffer.getChannelData(0);
        const buffer = new Int16Array(input.length);
        for (let i = 0; i < input.length; i++) {
          buffer[i] = Math.max(-1, Math.min(1, input[i])) * 0x7fff;
        }
        socket.current.send(buffer.buffer);
      };
    };

    socket.current.onmessage = (event) => {
      const message = JSON.parse(event.data);

      if (message.type === "Turn") {
        const { turn_order, transcript } = message;
        turns[turn_order] = transcript;

        const ordered = Object.keys(turns)
          .sort((a, b) => Number(a) - Number(b))
          .map((k) => turns[k])
          .join(" ");

        setTranscripts({ ...turns });

        if (ordered.trim()) {
          const fieldConfig = kycFields[category][fieldKey];
          setLastTranscript(ordered.trim());

          // Clear existing timer
          if (lastActivityTimer.current) {
            clearTimeout(lastActivityTimer.current);
          }

          // Set timer to process after 3 seconds of no new transcript updates
          lastActivityTimer.current = setTimeout(() => {
            processWhenSilent(ordered.trim(), fieldConfig, fieldKey, category);
          }, 3000);
        }
      }
    };
LLM-Powered Field Extraction
We use Cloudflare’s Llama 3.3-70B Instruct via a Worker for robust, prompt-based extraction:

const extractDataWithAI = async (transcript, fieldType, fieldKey) => {
    const prompt = createPromptForField(transcript, fieldType, fieldKey);
    const encodedPrompt = encodeURIComponent(prompt);
    const apiUrl = ⁠ https://old-poetry-937f.sumeetweb.workers.dev/?prompt=${encodedPrompt} ⁠;

    console.log("Making API call for", fieldKey, "with prompt:", prompt);

    try {
      const response = await fetch(apiUrl);
      const data = await response.json();

      console.log("API response data:", data);

      if (data.success && data.response?.response) {
        const extractedValue = data.response.response.trim();
        console.log("Extracted value from API:", extractedValue);
        return extractedValue;
      } else {
        console.error("API response was not successful:", data);
        throw new Error("API response was not successful");
      }
    } catch (error) {
      console.error("API call failed:", error);
      return transcript;
    }
  };

Performance Benchmarking
End-to-end latency: consistently under 300ms from speech to field fill
Analytics: Usage, accuracy, and response times are tracked and visualized in AnalyticsPage.j

Team Submissions:
nishikantaray
sumeetweb
ayushmohanty24