MCP Fabric (Aethara AI)

MCP织物

用于管理MCP（模型上下文协议）服务器的生产就绪Next.js 14应用程序。大规模部署、观察和编排代理系统。

特性

• 注册表资源管理器 -浏览和发现MCP工具、资源和提示
• 天文台 -D3.js实时可视化代理消息传递
• 控制台 -带有事件流和操作详细信息的拆分窗格仪表板
• 操场 -用于测试MCP呼叫的交互式Monaco编辑器
• 多用户 -使用隔离数据上下文进行租户切换
• 实时 -SSE集成用于实时遥测更新

技术栈

• 框架：React+Vite+TypeScript
• 样式：顺风CSS+shadcn/ui
• 动画：帧运动
• 可视化：D3.js+插件
• 编辑：摩纳哥编辑
• 状态状态：

快速开始

先决条件

• Node.js 20+
• npm或纱线

安装

# Clone the repository
git clone https://github.com/your-org/mcpfabric.git
cd mcpfabric

# Install dependencies
npm install

# Start development server
npm run dev

该应用程序将在 http://localhost:5173.

为生产而建

npm run build

构建的文件将位于 dist/ 目录。

Docker部署

使用Docker Compose

# Build and start
docker-compose up -d

# View logs
docker-compose logs -f

# Stop
docker-compose down

该应用程序将在 http://localhost:3000.

使用Docker

# Build image
docker build -t mcpfabric .

# Run container
docker run -d -p 3000:80 --name mcpfabric mcpfabric

配置

复制 .env.example 到 .env 并配置：

cp .env.example .env

关键环境变量：

项目结构

app/
├── src/
│   ├── components/
│   │   ├── custom/          # Custom components
│   │   ├── layout/          # Header, Footer
│   │   └── ui/              # shadcn/ui components
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utilities and mock data
│   ├── pages/               # Page components
│   ├── sections/            # Page sections
│   ├── store/               # Zustand store
│   └── types/               # TypeScript types
├── public/                  # Static assets
├── Dockerfile
├── docker-compose.yml
└── README.md

页面

定制

添加新工具

编辑 src/lib/mock-data.ts:

export const mockTools: MCPTool[] = [
  {
    id: 'your-tool-id',
    name: 'your.tool.name',
    description: 'Tool description',
    version: '1.0.0',
    category: 'tool',
    tags: ['tag1', 'tag2'],
    inputSchema: {
      type: 'object',
      properties: {
        param1: { type: 'string' }
      },
      required: ['param1']
    }
  }
];

主题化

在中编辑CSS变量 src/index.css:

:root {
  --background: 240 10% 4%;
  --foreground: 0 0% 98%;
  --accent: 270 100% 60%;
  /* ... */
}

API集成

应用程序需要以下API终结点：

MCP代理

POST /api/mcp
Content-Type: application/json

{
  "jsonrpc": "2.0",
  "id": "1",
  "method": "tools/call",
  "params": { ... }
}

SSE流

GET /api/stream

Event: message
Data: { "event_type": "...", "payload": { ... } }

发展

# Run linter
npm run lint

# Type check
npm run type-check

# Run tests
npm test

贡献

1. 分叉存储库
2. 创建要素分支
3. 提交您的更改
4. 推到分支
5. 打开拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

支持

• 文档： docs.mcpfabric.space
• 问题：
• 不一致： 加入我们的社区