English | 简体中文

McpSynergy Client is a solution that implements UI component rendering on the client side based on the MCP protocol. It can render interactive UI components in your intelligent chat box, further enhancing the capabilities of AI assistants.

• Rapid Development: Fast development experience based on Vite 6, supporting hot updates and instant builds.
• Type Safety: Complete type support with TypeScript, making development more reliable.
• Modularity: Monorepo architecture implemented with Turborepo, supporting multi-package management and code sharing.
• Unified Standards: Code formatting with Prettier ensures consistent code style.
• Full Stack Solution: Implements frontend and backend hot update mechanisms within Vite plugins, updating configuration files.

McpSynergy Client supports multiple installation methods:

• Use Quick Start to quickly experience the project.
• Add to Existing Project for gradual adoption.
• Create New Project if you need a complete development environment.

# Clone the repository
git clone [email protected]:McpSynergy/client.git

# Install dependencies
pnpm install

# Start development server
pnpm dev

You can find McpSynergy Client documentation at:

• Quick Start
• Project Structure
• Contributing Guide

Here's a simple example:

import { ChatComponent } from "@mcp-synergy/react";

// AI model request
const data = request('url')
const content = data?.content
const meta = data?.meta;
const props = meta?.componentProps;

return <ChatComponent name={meta.toolName} props={props} fallback={<></>} />

This example will render the UI component required by the server-side MCP.

.
├── apps/                # Applications directory
│   └── antd-example/   # Ant Design example application
├── packages/           # Shared packages directory
├── packages-private/   # Private packages directory
└── ...

• Framework: React 19
• Build Tool: Vite 6
• Language: TypeScript
• Package Manager: pnpm 7.8.0
• Monorepo: Turborepo
• Code Style: Prettier
• Dependency Management: syncpack

We welcome contributions of any kind, including but not limited to:

• Submitting bug reports
• Proposing new features
• Improving documentation
• Submitting code fixes

Please read our Code of Conduct to understand our expected behavior standards.

Please read our Contributing Guide to learn how to participate in project development.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

McpSynergy Client is ISC licensed.

• React Documentation
• Vite Documentation
• TypeScript Documentation
• Turborepo Documentation