@xiaochen1649/amis-mcp-server

MCP Server for generating AMIS page schemas with AI assistance.

Features

• 🤖 MCP Protocol - Full Model Context Protocol support for AI integration
• 📊 8 Chart Types - Pie, Bar, Line, Funnel, Radar, Gauge, Horizontal Bar, Grouped Bar
• 🎨 Template Engine - Nunjucks-based template rendering
• 🔧 Customizable - Bring your own templates and component store
• 📦 Zero Config - Built-in templates for quick start

Installation

npm install @xiaochen1649/amis-mcp-server

Quick Start

Standalone CLI

# Demo mode (in-memory components)
npx @xiaochen1649/amis-mcp-server --demo

# With SQLite database
npx @xiaochen1649/amis-mcp-server --db ./database.sqlite

MCP Configuration (Claude Desktop / Cursor)

{
  "mcpServers": {
    "amis": {
      "command": "npx",
      "args": ["@xiaochen1649/amis-mcp-server", "--demo"]
    }
  }
}

As Library (Programmatic)

import { createMcpServer } from '@xiaochen1649/amis-mcp-server';

// Implement your component store
const componentStore = {
  async getActiveComponents() {
    // Return components from your database
    return [
      {
        component_id: 'chart_with_ai',
        component_name: 'Chart Panel',
        description: 'Universal chart component',
        template_path: 'components/chart_with_ai.j2',
        params_schema: { /* ... */ },
        default_params: {}
      }
    ];
  },
  async getComponentsByIds(ids: string[]) {
    // Return components by IDs
  }
};

const server = await createMcpServer({
  name: 'my-amis-server',
  version: '1.0.0',
  componentStore
});

await server.start();

Template Rendering Only

import { createRenderer } from '@xiaochen1649/amis-mcp-server';

const renderer = createRenderer('./my-templates');

// Render a single component
const chartSchema = renderer.renderComponent('components/chart_with_ai.j2', {
  chart_type: 'pie',
  title: 'Sales Distribution',
  api_url: '/api/sales/distribution'
});

// Assemble a page
const pageSchema = renderer.assemblePage('dashboard', 'My Dashboard', [
  chartSchema,
  anotherSchema
]);

Using Chart Adapters

import { adapters, getAdapterByType } from '@xiaochen1649/amis-mcp-server';

// Get adapter code for AMIS chart component
const pieAdapter = adapters.pie();
const lineAdapter = adapters.line({ smooth: true, showArea: true });

// Or use the generic getter
const adapter = getAdapterByType('bar');

MCP Tools

list_components

Get all available components with their parameter schemas.

create_chart (简化工具)

快速创建图表组件，只需指定类型和 API。

Parameters:

• chart_type (required) - 图表类型: pie | bar | line | funnel
• api (required) - 数据接口地址
• title - 图表标题
• height - 图表高度 (默认 400)
• drilldown_api - 钻取详情接口

Example:

{
  "chart_type": "pie",
  "api": "/api/sales/distribution",
  "title": "销售分布"
}

create_page (简化工具)

快速创建包含多个组件的页面。

Parameters:

• title - 页面标题
• layout - 布局模式: simple | dashboard
• items (required) - 组件列表

Item 结构:

• type (required) - 组件类型: chart | table
• api (required) - 数据接口地址
• chart_type - 图表类型 (type=chart 时)
• title - 组件标题
• columns - 表格列定义 (type=table 时)

Example:

{
  "title": "销售分析",
  "layout": "dashboard",
  "items": [
    { "type": "chart", "chart_type": "pie", "api": "/api/sales/by-region", "title": "区域分布" },
    { "type": "chart", "chart_type": "line", "api": "/api/sales/trend", "title": "销售趋势" },
    { "type": "table", "api": "/api/sales/list", "title": "销售明细" }
  ]
}

generate_page_schema (完整配置)

Generate AMIS page schema from component list. 支持完整的组件配置。

Parameters:

• title - Page title
• layout - Layout mode: simple | dashboard
• components - Array of component references (single page mode)
• tabs - Array of tab configurations (multi-tab mode)

Example:

{
  "title": "Sales Dashboard",
  "layout": "dashboard",
  "components": [
    {
      "component_id": "chart_with_ai",
      "params": {
        "chart_type": "pie",
        "title": "Revenue by Region",
        "api_url": "/api/sales/by-region"
      }
    }
  ]
}

Built-in Templates

chart_with_ai.j2

Universal chart component with analysis panel.

Parameters: | Parameter | Type | Description | |-----------|------|-------------| | chart_type | string | Chart type: pie/bar/line/funnel/radar/gauge/horizontal-bar/grouped-bar | | title | string | Chart title | | api_url | string | Data API URL | | api_method | string | HTTP method (default: get) | | height | number | Chart height (default: 400) | | enable_drilldown | boolean | Enable drill-down (default: true) | | drilldown_api | string | Drill-down API URL | | analysis_label | string | Analysis section label | | suggestion_label | string | Suggestion section label |

stats_cards.j2

Statistics cards component with flexible layout.

alert.j2

Alert/notification component.

Custom Templates

Create your own templates using Nunjucks syntax:

{# my-component.j2 #}
{
  "type": "card",
  "header": {
    "title": "{{ title }}"
  },
  "body": {{ content | tojson }}
}

Error Codes

| Code | Description | |------|-------------| | 1001 | Invalid parameters | | 1002 | Missing required parameter | | 1003 | Invalid JSON format | | 2002 | Component not found | | 3001 | Template render failed |

License

MIT