# 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:
   ```bash
   npm install
   ```

## Building

Build the TypeScript code:

```bash
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](./CONFIGURATION.md) for detailed setup instructions.

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

## Usage

### Quick Start

1. Configure credentials (see CONFIGURATION.md)
2. Start the MCP server:
   ```bash
   npm start
   ```
3. Use with Claude Code by adding to `.claude/settings.json`

### Running the Server

```bash
npm start
```

Or for development with automatic rebuilding:

```bash
npm run dev
```

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

### Workflow Example

See [WORKFLOW.md](./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:

```typescript
// 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](./CONFIGURATION.md) - Setup and configuration guide
- [WORKFLOW.md](./WORKFLOW.md) - Complete workflow examples
- [TOOLS.md](./TOOLS.md) - Detailed tool reference

## External Resources

- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
- [MCP SDK Repository](https://github.com/modelcontextprotocol/typescript-sdk)
- [MCP Examples](https://github.com/modelcontextprotocol/servers)
- [Zoho Projects API](https://www.zoho.com/projects/help/rest-api/)
- [SonarQube Documentation](https://docs.sonarqube.org/)

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