MCP Ag Grid

AG Grid MCP服务器

Header Image

一种模型上下文协议（MCP）服务器，通过无头浏览器自动化使用AG Grid提供数据可视化和操作功能。此服务器使Claude能够创建、操作和导出具有排序、过滤和统计分析等高级功能的数据网格。

特性

🚀 核心能力

• 网格创建：使用自定义列定义和数据创建AG Grid实例
• 数据管理：动态更新、筛选和排序网格数据
• 导出功能：将网格数据导出为CSV或Excel格式
• 统计分析：生成全面的数据统计和摘要
• 多网格支持：同时管理多个网格实例
• 资源访问：通过MCP资源公开网格数据和元数据

🛠️ 技术特性

• 无头浏览器自动化：使用Puppeter进行可靠的网格渲染
• TypeScript：完全打字，具有全面的错误处理功能
• ES模块：现代JavaScript模块系统
• MCP协议：与Claude Desktop的原生集成
• 样品数据：销售、员工和财务数据的真实测试数据集

安装

先决条件

• Node.js 18+
• npm或纱线
• Chrome/Chromium浏览器（由Puppeteer自动处理）

从源代码安装

# Clone the repository
git clone 
cd mcp-ag-grid

# Install dependencies
npm install

# Build the project
npm run build

# Test the installation
npm test

作为软件包安装

# Install globally
npm install -g ag-grid-mcp-server

# Or install locally
npm install ag-grid-mcp-server

Claude桌面配置

1.添加到Claude桌面配置

编辑您的Claude Desktop配置文件：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ag-grid": {
      "command": "node",
      "args": ["/path/to/mcp-ag-grid/build/server.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

2.替代方案：使用npx（如果全局安装）

{
  "mcpServers": {
    "ag-grid": {
      "command": "ag-grid-mcp-server"
    }
  }
}

3.开发配置

对于使用源代码映射进行开发和调试：

{
  "mcpServers": {
    "ag-grid": {
      "command": "node",
      "args": ["--enable-source-maps", "/path/to/mcp-ag-grid/build/server.js"],
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "*"
      }
    }
  }
}

使用示例

1.创建基本网格

Create a sales data grid with the following data:
- Product: iPhone 15, MacBook Pro, iPad Air
- Price: $999, $1999, $599  
- Quantity: 10, 5, 15
- Revenue: calculated field

服务器将创建一个具有可排序、可过滤列的AG网格，并返回网格ID以供进一步操作。

2.数据分析

Generate a statistical summary of the sales grid including:
- Total revenue
- Average price
- Best selling product
- Profit margins by product

3.高级过滤

Apply filters to show only:
- Products with revenue > $5000
- Sales from North America region
- Status = "completed"

4.数据导出

Export the filtered sales data as:
1. CSV format for spreadsheet analysis
2. Excel format with formatting

可用工具

create_grid

使用列定义和数据创建新的AG Grid实例。

参数:

• columnDefs：列定义数组
• rowData：数据对象数组
• gridOptions：可选的附加网格配置

update_grid_data

更新现有网格中的数据。

参数:

• gridId：网格标识符
• rowData：用新数据替换当前数据

apply_grid_filter

使用AG grid的过滤器模型将过滤器应用于网格。

参数:

• gridId：网格标识符
• filterModel：AG网格过滤器配置

export_grid

以指定格式导出网格数据。

参数:

• gridId：网格标识符
• format：“csv”或“excel”
• filename：可选自定义文件名

get_grid_stats

获取电网的全面统计数据和当前状态。

参数:

• gridId：网格标识符

execute_grid_method

在网格上执行任何AG Grid API方法。

参数:

• gridId：网格标识符
• method：AG Grid API方法名称
• params：可选方法参数

可用资源

grid://list

列出所有具有基本元数据的活动网格。

grid://schema/{gridId}

返回特定网格的列定义和数据类型。

grid://data/{gridId}

从网格（前10行）返回示例数据以供预览。

grid://summary/{gridId}

返回网格数据的综合统计分析。

样品数据

服务器包括真实的样本数据集：

销售数据

• 产品分类信息
• 区域销售数据
• 收入和利润计算
• 客户和销售代表信息

员工数据

• 部门人力资源记录
• 工资和薪酬数据
• 性能评级
• 经理层次结构

财务数据

• 交易记录
• 账户余额
• 商户和类别信息
• 贷方/借方分类

生成示例数据：

npm run sample-data

发展

以开发模式运行

# Start with auto-reload
npm run dev

# Start with debugging
npm run dev:debug

# Run tests in watch mode  
npm run test:watch

建筑

# Development build with source maps
npm run build

# Production build (optimized)
npm run build:prod

# Clean build directory
npm run clean

测试

# Run full test suite
npm test

# Run tests in development mode
npm run test:dev

# Validate code and run tests
npm run validate

故障排除

常见问题

1.未找到铬

Error: Could not find Chrome/Chromium

解决方案：安装Chrome或设置 PUPPETEER_EXECUTABLE_PATH:

export PUPPETEER_EXECUTABLE_PATH=/path/to/chrome

2.拒绝许可

Error: EACCES: permission denied

解决方案：确保server.js文件可执行：

chmod +x build/server.js

3.模块分辨率错误

Error: Cannot find module

解决方案：确保安装了所有依赖项：

npm install
npm run build

4.克劳德桌面连接问题

检查:

• 配置文件路径正确
• 配置中的服务器路径是绝对的
• JSON配置中没有语法错误
• 配置更改后重新启动Claude Desktop

调试模式

启用详细日志记录：

DEBUG=* npm run dev

或设置环境变量：

{
  "env": {
    "DEBUG": "*",
    "NODE_ENV": "development"
  }
}

性能调整

为了获得更好的性能：

• 使用生产构建(npm run build:prod)
• 限制并发网格实例
• 对大型数据集使用数据采样
• 为大量行数启用网格虚拟化

api参考

网格配置

interface GridConfig {
  columnDefs: ColumnDef[];
  rowData: Record[];
  gridOptions?: Record;
}

interface ColumnDef {
  field: string;
  headerName?: string;
  width?: number;
  type?: 'text' | 'number' | 'date' | 'boolean';
  sortable?: boolean;
  filter?: boolean;
  resizable?: boolean;
}

过滤器模型示例

// Text filter
{
  columnField: {
    filterType: 'text',
    type: 'contains',
    filter: 'searchTerm'
  }
}

// Number range filter  
{
  columnField: {
    filterType: 'number',
    type: 'inRange',
    filter: 100,
    filterTo: 500
  }
}

// Date filter
{
  columnField: {
    filterType: 'date',
    type: 'greaterThan',
    dateFrom: '2023-01-01'
  }
}

贡献

1. 分叉存储库
2. 创建要素分支
3. 通过测试进行更改
4. 跑 npm run validate
5. 提交拉取请求

许可证

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

支持

对于问题和疑问：

• 在GitHub上创建问题
• 检查故障排除部分
• 查看AG Grid文档以了解高级功能

______________________________________________________________________

内置于❤️ 用于Claude Desktop集成