MCP 服务器

React Development Workflow MCP Server

Integrates Zoho Projects, Git, and SonarQube to automate task management, branch creation, code quality checks, and reporting for React developers.

README

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:

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

Installation

Clone this repository
Install dependencies:
```
npm install
```

Building

Build the TypeScript code:

npm run build

Setup & Configuration

Before using this MCP, you need to set up:

Zoho Projects - API credentials for fetching tasks
SonarQube - Project configuration and authentication token
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

Configure credentials (see CONFIGURATION.md)
Start the MCP server:
```
npm start
```
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:

Define a Zod schema for input validation
Add the tool definition to the ListToolsRequestSchema handler
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}`,
      },
    ],
  };
}