Dev/add playground

README.md

@@ -18,10 +18,12 @@ This is a TypeScript-based MCP server that provides chart generation capabilitie
   - [VIS_REQUEST_SERVER](#-private-deployment)
   - [SERVICE_ID](#%EF%B8%8F-generate-records)
   - [DISABLED_TOOLS](#%EF%B8%8F-tool-filtering)
+- [📤 Output Format](#-output-format)
 - [📠 Private Deployment](#-private-deployment)
 - [🗺️ Generate Records](#%EF%B8%8F-generate-records)
 - [🎛️ Tool Filtering](#%EF%B8%8F-tool-filtering)
 - [🔨 Development](#-development)
+- [📦 Playground](#-playground)
 - [📄 License](#-license)
 
 ## ✨ Features
@@ -59,6 +61,7 @@ Now 25+ charts supported.
 > [!NOTE]
 > The above geographic visualization chart generation tool uses [AMap service](https://lbs.amap.com/) and currently only supports map generation within China.
 
+
 ## 🤖 Usage
 
 To use with `Desktop APP`, such as Claude, VSCode, [Cline](https://cline.bot/mcp-marketplace), Cherry Studio, Cursor, and so on, add the MCP server config below. On Mac system:
@@ -236,6 +239,64 @@ You can disable specific chart generation tools using the `DISABLED_TOOLS` envir
 
 **Available tool names for filtering** See the [✨ Features](#-features).
 
+## 📤 Output Format
+
+When you call any chart generation tool (e.g., `generate_line_chart`, `generate_pie_chart`), the MCP Server returns a response in the following format:
+
+### Standard Chart Response
+
+```typescript
+{
+  content: [
+    {
+      type: "text",
+      text: "https://antv-studio.alipay.com/api/gpt-vis?spec=..." // Chart image URL
+    }
+  ],
+  _meta: {
+    description: "Charts spec configuration, you can use this config to generate the corresponding chart.",
+    spec: {
+      type: "line",       
+      data: [...],        
+      title: "...",        
+      axisXTitle: "...",   
+      axisYTitle: "...", 
+      // ... other chart-specific properties
+    }
+  }
+}
+```
+
+### Usage Examples
+
+#### Using the Image URL
+
+You can directly use the `content[0].text` URL to display the chart image:
+
+```html
+<img src="https://antv-studio.alipay.com/api/gpt-vis?spec=..." alt="Chart" />
+```
+
+#### Using the Chart Spec
+
+For interactive charts, use the `_meta.spec` with GPT-Vis:
+
+```tsx
+import { GPTVis } from '@antv/gpt-vis';
+
+const chartSpec = response._meta.spec;
+
+// Render with GPT-Vis
+<GPTVis>
+  {`\`\`\`vis-chart
+${JSON.stringify(chartSpec, null, 2)}
+\`\`\``}
+</GPTVis>
+```
+
+
+
+
 ## 🔨 Development
 
 Install dependencies:
@@ -268,6 +329,7 @@ Start the MCP server with Streamable transport:
 node build/index.js -t streamable
 ```
 
+
 ## 📄 License
 
 MIT@[AntV](https://github.com/antvis).

playground/.env.example

@@ -0,0 +1,32 @@
+# 环境变量配置
+# ========================================
+# LLM API 配置 (选择其中一种)
+# ========================================
+
+# 方案 1: 阿里云百炼平台 (推荐 - 国内访问快速稳定)
+# 获取 API Key: https://bailian.console.aliyun.com/
+VITE_OPENAI_API_KEY=sk-your-bailian-api-key
+VITE_OPENAI_BASE_URL=https://dashscope.aliyuncs.com/compatible-mode/v1
+VITE_OPENAI_MODEL=qwen-plus
+
+# 可用的百炼模型:
+# - qwen-turbo: 快速响应,性价比高
+# - qwen-plus: 平衡性能和成本
+# - qwen-max: 最强性能
+# - qwen-long: 支持长文本
+
+# 方案 2: OpenAI 官方 API
+# VITE_OPENAI_API_KEY=sk-your-openai-api-key
+# VITE_OPENAI_BASE_URL=https://api.openai.com/v1
+# VITE_OPENAI_MODEL=gpt-4o-mini
+
+# 方案 3: 其他兼容 OpenAI 的服务
+# VITE_OPENAI_API_KEY=your-api-key
+# VITE_OPENAI_BASE_URL=https://your-llm-api.com/v1
+# VITE_OPENAI_MODEL=your-model-name
+
+# ========================================
+# 说明
+# ========================================
+# 如果没有配置 API Key,系统会自动使用降级方案(基于规则的图表生成)
+# 降级模式无需 API Key,但功能较为基础

playground/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+test-bailian.sh
+.env

playground/README.md

@@ -0,0 +1,92 @@
+# MCP Chart Demo - Conversational Chart Generation
+
+This is a conversational chart generation demo application based on MCP Server Chart and @antv/gpt-vis.
+
+## Features
+
+- 🤖 Natural Language Interaction: Describe requirements through conversation
+- 📊 Smart Chart Generation: Call MCP Server Chart service to generate chart configurations
+- 🎨 Rich Visualizations: Render various types of charts using @antv/gpt-vis
+- 💬 Smooth Chat Experience: Chat interface based on Ant Design X
+- 🧠 LLM Intelligence: Support for Alibaba Cloud Bailian/OpenAI and other LLM platforms
+
+## Quick Start
+
+### 1. Install Dependencies
+
+```bash
+cd playground
+npm install
+```
+
+### 2. Start MCP Server
+
+Start MCP Server in SSE mode from the project root directory:
+
+```bash
+# In project root directory
+npm run build
+node build/index.js -t sse
+```
+
+The service will start at `http://localhost:1122/sse`.
+
+### 3. Start Playground
+
+Create a `.env` file based on `.env.example` and configure `VITE_OPENAI_API_KEY` and other settings:
+
+```env
+VITE_OPENAI_API_KEY=your_openai_api_key
+
+``` 
+
+Then, start the playground application:
+
+```bash
+cd playground
+npm run dev
+```
+
+The application will start at `http://localhost:3000`.
+
+
+
+## Development Guide
+
+### Modify MCP Server Address
+
+If the MCP Server is running at a different address, modify the proxy configuration in `vite.config.ts`:
+
+```typescript
+export default defineConfig({
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://your-mcp-server:port',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+});
+```
+
+### Customize Chart Styles
+
+You can customize the chart theme by modifying the `ConfigProvider` in `App.tsx`:
+
+```tsx
+<ConfigProvider
+  theme={{
+    algorithm: theme.darkAlgorithm, // Use dark theme
+  }}
+>
+  {/* ... */}
+</ConfigProvider>
+```
+
+
+## License
+
+MIT
+

playground/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MCP Chart 对话 Demo</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      background: #f5f5f5;
+    }
+
+    #root {
+      width: 100%;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/index.tsx"></script>
+</body>
+</html>

playground/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "mcp-chart-demo",
+  "version": "1.0.0",
+  "description": "MCP Server Chart Demo with GPT-Vis",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/x": "^1.0.0",
+    "@antv/gpt-vis": "^0.5.9",
+    "antd": "^5.22.5",
+    "antd-style": "^3.7.1",
+    "axios": "^1.7.9",
+    "openai": "^4.104.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.0.7"
+  }
+}