React Development Workflow MCP Server

React Development Workflow MCP Server

A Model Context Protocol (MCP) server implementation in TypeScript that streamlines the React development workflow by integrating Zoho Projects, Git, and SonarQube tools.

What is MCP?

The Model Context Protocol (MCP) is a standard for connecting AI assistants with data sources and tools. This server provides an integrated workflow for React developers to manage tasks, create branches, and ensure code quality in real-time.

Features

This server provides the following tools:

Core Workflow Tools

• fetch_zoho_task: Fetch task details from Zoho Projects by task ID
• create_feature_branch: Create git branches (feat/ or fix/) based on task information
• check_sonarqube_issues: Check for SonarQube code quality issues in a branch
• auto_fix_sonarqube_issues: Automatically fix common SonarQube issues detected in code
• update_task_status: Update task status in Zoho Projects (Open, In Progress, Completed)
• generate_implementation_report: Generate a summary report of implementation and quality fixes

Utility Tools

• get_time: Get the current time, optionally in a specific timezone
• echo: Echo back a message

Workflow Overview

The typical workflow is:

1. fetch_zoho_task - Retrieve task details from Zoho Projects
2. create_feature_branch - Create a git branch with proper naming convention
3. Check code during implementation - While implementing, continuously use check_sonarqube_issues
4. auto_fix_sonarqube_issues - Fix detected quality issues in real-time
5. update_task_status - Update Zoho with progress
6. generate_implementation_report - Create a final report of work completed

Installation

1. Clone this repository
2. Install dependencies:

   npm install

Building

Build the TypeScript code:

npm run build

Setup & Configuration

Before using this MCP, you need to set up:

1. Zoho Projects - API credentials for fetching tasks
2. SonarQube - Project configuration and authentication token
3. Git - User configuration for branch creation

See CONFIGURATION.md for detailed setup instructions.

⚠️ Security: Always keep credentials in .env.local (not committed). See SECURITY.md for best practices.

Usage

Quick Start

1. Configure credentials (see CONFIGURATION.md)
2. Start the MCP server:

   npm start

1. Use with Claude Code by adding to .claude/settings.json

Running the Server

npm start

Or for development with automatic rebuilding:

npm run dev

The server will run on stdio and communicate using the MCP protocol.

Workflow Example

See WORKFLOW.md for a complete example of how to use this MCP in your React development workflow.

Using with VS Code

This project includes a .vscode/mcp.json configuration file that allows you to debug the MCP server directly in VS Code. The server will be available as "workflow-mcp" in your MCP client.

Development

Project Structure

mcp-demo/
├── src/
│   └── index.ts          # Main server implementation
├── build/                # Compiled JavaScript (generated)
├── .github/
│   └── copilot-instructions.md  # GitHub Copilot instructions
├── .vscode/
│   └── mcp.json          # VS Code MCP configuration
├── package.json
├── tsconfig.json
└── README.md

Adding New Tools

To add a new tool:

1. Define a Zod schema for input validation
2. Add the tool definition to the ListToolsRequestSchema handler
3. Implement the tool logic in the CallToolRequestSchema handler

Example:

// 1. Define schema
const MyToolSchema = z.object({
  input: z.string().describe("Input parameter"),
});

// 2. Add to tools list
{
  name: "my_tool",
  description: "Description of what the tool does",
  inputSchema: {
    type: "object",
    properties: {
      input: {
        type: "string",
        description: "Input parameter",
      },
    },
    required: ["input"],
  },
}

// 3. Handle the tool call
case "my_tool": {
  const parsed = MyToolSchema.parse(args);
  return {
    content: [
      {
        type: "text",
        text: `Result: ${parsed.input}`,
      },
    ],
  };
}

Dependencies

• @modelcontextprotocol/sdk: MCP SDK for TypeScript
• zod: Schema validation library
• typescript: TypeScript compiler
• @types/node: Node.js type definitions

Scripts

• npm run build - Compile TypeScript to JavaScript
• npm start - Run the compiled server
• npm run dev - Build and run the server
• npm test - Run tests (placeholder)

License

ISC

Documentation

• CONFIGURATION.md - Setup and configuration guide
• WORKFLOW.md - Complete workflow examples
• TOOLS.md - Detailed tool reference

External Resources

• Model Context Protocol Documentation
• MCP SDK Repository
• MCP Examples
• Zoho Projects API
• SonarQube Documentation

About This Project

This MCP was built to solve a real React development workflow problem:

The Problem: Developers waste 2-3 hours per week context-switching between Zoho Projects, Git, and SonarQube while implementing features.

The Solution: A single integrated MCP that:

1. Fetches tasks from Zoho
2. Creates proper git branches
3. Continuously checks code quality
4. Fixes issues in real-time
5. Updates task status automatically
6. Generates implementation reports

Time Saved: 2-3 hours per week per developer