Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP Playgroundadd 15 and 27 for me"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Playground
MCP (Model Context Protocol) server với hỗ trợ cả hai phương thức transport:
Pure MCP SDK (Stdio) - Standard input/output transport
SSE Transport (Server-Sent Events) - HTTP-based transport
Tính năng
✅ Hỗ trợ Pure MCP SDK với Stdio transport
✅ Hỗ trợ SSE (Server-Sent Events) transport
✅ Các công cụ (tools) ví dụ: echo, add, get_time, generate_uuid
✅ Các tài nguyên (resources) ví dụ: server info, example data
✅ TypeScript với type safety đầy đủ
✅ Development mode với hot reload
Cài đặt
npm installSử dụng
1. Stdio Transport (Pure MCP SDK)
Chạy server với stdio transport:
# Development mode
npm run dev
# Production mode
npm run build
npm startServer sẽ giao tiếp qua stdin/stdout, phù hợp cho việc tích hợp với Claude Desktop hoặc các MCP clients khác.
Cấu hình cho Claude Desktop
Thêm vào file cấu hình Claude Desktop (claude_desktop_config.json):
{
"mcpServers": {
"mcp-playground": {
"command": "node",
"args": ["/path/to/mcp-playground/dist/index.js"]
}
}
}Hoặc trong development mode:
{
"mcpServers": {
"mcp-playground": {
"command": "npx",
"args": ["tsx", "/path/to/mcp-playground/src/index.ts"]
}
}
}2. SSE Transport (Server-Sent Events)
Chạy server với SSE transport:
# Development mode
npm run dev:sse
# Production mode
npm run build
npm run start:sseServer sẽ chạy trên http://localhost:3000 với các endpoints:
GET /health- Health checkGET /sse- SSE connection endpointPOST /messages- Client message endpoint
Kết nối với SSE Client
Sử dụng MCP Client để kết nối:
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
const transport = new SSEClientTransport(
new URL("http://localhost:3000/sse")
);
const client = new Client(
{
name: "example-client",
version: "1.0.0",
},
{
capabilities: {},
}
);
await client.connect(transport);API
Tools (Công cụ)
echo
Phản hồi lại tin nhắn được gửi.
Input:
{
"message": "Hello, World!"
}Output:
Echo: Hello, World!add
Cộng hai số với nhau.
Input:
{
"a": 5,
"b": 3
}Output:
5 + 3 = 8get_time
Trả về thời gian hiện tại của server.
Input:
{}Output:
Current server time: 2024-01-15T10:30:00.000Zgenerate_uuid (chỉ SSE)
Tạo UUID ngẫu nhiên.
Input:
{}Output:
Generated UUID: 123e4567-e89b-12d3-a456-426614174000Resources (Tài nguyên)
info://server
Thông tin về MCP server.
data://example
Dữ liệu JSON ví dụ.
stats://connections (chỉ SSE)
Thống kê kết nối.
Cấu trúc dự án
mcp-playground/
├── src/
│ ├── index.ts # Stdio transport server
│ └── sse-server.ts # SSE transport server
├── dist/ # Compiled JavaScript
├── package.json
├── tsconfig.json
└── README.mdDevelopment
# Build project
npm run build
# Watch mode (auto rebuild)
npm run watch
# Run stdio server in dev mode
npm run dev
# Run SSE server in dev mode
npm run dev:sseKiểm thử
Test Stdio Transport
# Chạy server
npm run dev
# Gửi JSON-RPC request qua stdin (trong terminal khác)
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | npm run devTest SSE Transport
# Chạy server
npm run dev:sse
# Test health endpoint
curl http://localhost:3000/health
# Test SSE endpoint (trong browser hoặc với curl)
curl -N http://localhost:3000/sseTài liệu tham khảo
License
MIT