STARWARCLOUD STARWAR.AI
返回市场
悟道-mcp服务器

悟道-mcp服务器

作者：Jellypod-Inc9 星标更新：2025-09-12
安装使用来源：spider==github.com

项目介绍

封面

Satori MCP Server

这是一个使用Satori从React组件生成美丽图像的MCP（模型上下文协议）服务器。通过AI助手如Claude可以直接创建社交卡片、博客标题、引语和自定义图像。

<div> <a href="https://jellypod.ai"><img alt="jellypod logo" src="https://img.shields.io/badge/MADE%20BY%20jellypod.ai-000000.svg?style=for-the-badge&labelColor=000"></a> <a href="https://github.com/Jellypod-Inc/satori-mcp-server/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/badge/LICENSE-MPL--2.0-blue?style=for-the-badge&labelColor=000000"></a> </div>

特性

  • 🎨 从JSX生成图像 - 将React组件转换为PNG图像
  • 📝 内置模板 - 社交卡片、博客标题和引语设计
  • 🔤 支持Google字体 - 访问数百种字体
  • 🚀 MCP协议 - 无缝与Claude Desktop和其他MCP客户端配合工作
  • 🛠️ TypeScript - 完全类型化！

安装

先决条件

  • Node.js 20+
  • pnpm（推荐）或npm

克隆并安装

git clone https://github.com/Jellypod-Inc/satori-mcp-server.git
cd satori-mcp-server
pnpm install

使用Claude Desktop配置

要使用托管版本的MCP服务器，请将其添加到您的Claude Desktop配置中：

{
  "mcpServers": {
    "satori": {
      "type": "http",
      "url": "https://satori.jellypod.ai/mcp"
    }
  }
}

开发

# 启动带有热重载的开发服务器
pnpm dev

# 运行测试
pnpm test

# 运行特定测试
pnpm test:generate-image
pnpm test:generate-image-from-template

# 构建生产环境
pnpm build

# 启动生产服务器
pnpm start

测试

要测试MCP服务器，请使用模型上下文协议（MCP）检查器：https://modelcontextprotocol.io/legacy/tools/inspector

您可以运行它：

pnpm dlx @modelcontextprotocol/inspector

然后启动本地MCP服务器，并在检查器中连接到localhost。

环境变量

您需要配置Vercel Blob存储以保存生成的图像文件。 从您的Vercel仪表板获取此信息：https://vercel.com/docs/storage/vercel-blob

export const BLOB_READ_WRITE_TOKEN = process.env.BLOB_READ_WRITE_TOKEN;

可用工具

1. generate_image

从自定义JSX内容生成图像。

参数：

  • jsx (字符串，必需)：作为字符串的JSX内容
  • width (数字，默认值：600)：图像宽度（像素）
  • height (数字，默认值：400)：图像高度（像素）
  • outputPath (字符串，必需)：保存图像的位置
  • googleFonts (数组，可选)：要加载的Google字体

示例：

{
  jsx: '<div style={{background: "linear-gradient(to right, #667eea, #764ba2)", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center"}}><h1 style={{color: "white", fontSize: "60px"}}>Hello World</h1></div>',
  width: 1200,
  height: 630,
  outputPath: "output/hello.png",
  googleFonts: [
    { name: "Inter", weight: 700, style: "normal" }
  ]
}

2. generate_from_template

使用预构建模板生成图像。

参数：

  • template (字符串，必需)：模板名称("social-card", "blog-header", "quote")
  • params (对象，必需)：特定于模板的参数
  • outputPath (字符串，必需)：保存图像的位置
  • width (数字，可选)：覆盖模板宽度
  • height (数字，可选)：覆盖模板高度

示例：

{
  template: "social-card",
  params: {
    title: "宣布Satori MCP服务器",
    description: "使用AI生成美丽的图像",
    backgroundColor: "#2563eb"
  },
  outputPath: "output/announcement.png"
}

3. list_templates

列出所有可用模板及其描述。

无需参数

返回一个包含模板名称和描述的列表。

模板

社交卡片 (1200x630)

适合社交媒体分享卡片。

参数：

  • title (字符串，必需)：主标题
  • description (字符串，可选)：辅助文本
  • backgroundColor (字符串，可选)：背景颜色（默认值：#1a1a1a）

博客标题 (1200x480)

适用于博客文章标题。

参数：

  • title (字符串，必需)：博客文章标题
  • author (字符串，必需)：作者姓名
  • date (字符串，必需)：发布日期
  • category (字符串，可选)：文章类别

引语 (1080x1080)

正方形格式用于励志引语。

参数：

  • quote (字符串，必需)：引语文本
  • author (字符串，可选)：引语作者
  • backgroundColor (字符串，可选)：背景颜色

创建自定义模板

在src/templates/中添加新模板：

import React from "react";
import type { Template } from "./index";

export const myTemplate: Template = {
  name: "my-template",
  description: "我的自定义模板",
  defaultSize: { width: 1200, height: 630 },
  googleFonts: [
    { name: "Inter", weight: 700, style: "normal" }
  ],
  generate: (params: { title: string }) => {
    return (
      <div style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#000",
        color: "#fff",
        fontFamily: "Inter"
      }}>
        <h1>{params.title}</h1>
      </div>
    );
  },
};

然后在src/templates/index.ts中注册它：

import { myTemplate } from "./my-template";

export const templates: Record<string, Template> = {
  // ... 已有模板
  "my-template": myTemplate,
};

测试

项目包括对所有工具和模板的全面测试：

# 运行所有测试
pnpm test

# 测试输出保存在tests/output/
# 生成图像以验证实际功能

测试结构：

  • 每个模板有多组测试案例（基本、边界情况、自定义样式）
  • 工具测试正确的MCP响应格式
  • 实际生成PNG图像以验证输出

架构

构建使用：

  • xmcp - TypeScript框架用于MCP服务器
  • Satori - 将HTML/CSS转换为SVG
  • @resvg/resvg-js - 将SVG转换为PNG
  • Google Fonts API - 动态字体加载

大图像处理

服务器不会响应base64编码的图像，而是将图像保存到Vercel Blob存储中，并响应指向对象的引用URL。大多数MCP客户端和响应都有大小限制。

该URL公开访问，但通过附加到文件名的大随机字符串进行混淆。

贡献

欢迎贡献！请随时提交拉取请求。

  1. 分叉仓库
  2. 创建功能分支 (git checkout -b feature/amazing-feature)
  3. 提交更改 (git commit -m '添加精彩功能')
  4. 推送到分支 (git push origin feature/amazing-feature)
  5. 打开拉取请求

许可证

Mozilla公共许可证第2.0版 - 详情见LICENSE文件

致谢

支持

对于问题和疑问，请使用GitHub Issues页面。