Satori MCP服务器
一个MCP（模型上下文协议）服务器，使用 萨托利.直接通过Claude等人工智能助手创建社交卡、博客标题、引文和自定义图像。
特性
- 🎨 从JSX生成图像 -将React组件转换为PNG图像
- 📝 内置模板 -社交卡片、博客标题和引用设计
- 🔤 谷歌字体支持 -访问数百种字体
- 🚀 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"
}
}
}发展
# Start development server with hot reload
pnpm dev
# Run tests
pnpm test
# Run specific tests
pnpm test:generate-image
pnpm test:generate-image-from-template
# Build for production
pnpm build
# Start production server
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（string，必填）：JSX内容为字符串width（数字，默认值：600）：图像宽度（像素）height（数字，默认值：400）：图像高度（像素）outputPath（string，必填）：保存图像的位置googleFonts（数组，可选）：要加载的Google字体
例子：
{
jsx: '
Hello World
',
width: 1200,
height: 630,
outputPath: "output/hello.png",
googleFonts: [
{ name: "Inter", weight: 700, style: "normal" }
]
}2. generate_from_template
使用预构建的模板生成图像。
参数：
template（字符串，必填）：模板名称（“社交卡”、“博客标题”、“引用”）params（object，必填）：模板特定参数outputPath（string，必填）：保存图像的位置width（数字，可选）：覆盖模板宽度height（数字，可选）：覆盖模板高度
例子：
{
template: "social-card",
params: {
title: "Announcing Satori MCP Server",
description: "Generate beautiful images with 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: "My custom template",
defaultSize: { width: 1200, height: 630 },
googleFonts: [
{ name: "Inter", weight: 700, style: "normal" }
],
generate: (params: { title: string }) => {
return (
{params.title}
);
},
};然后在中注册 src/templates/index.ts:
import { myTemplate } from "./my-template";
export const templates: Record = {
// ... existing templates
"my-template": myTemplate,
};测试
该项目包括对所有工具和模板的全面测试：
# Run all tests
pnpm test
# Test outputs are saved in tests/output/
# Images are generated to verify actual functionality测试结构：
- 每个模板都有多个测试用例（基本、边缘用例、自定义样式）
- 测试工具的MCP响应格式是否正确
- 生成实际PNG图像以验证输出
建筑
内置：
- xmcp -MCP服务器的TypeScript框架
- 萨托利 -将HTML/CSS转换为SVG
- @resvg/resvgjs -将SVG转换为PNG
- Google字体API-动态字体加载
大图像处理
服务器不会使用base64编码的图像进行响应，而是将图像保存到Vercel Blob存储中，并使用对象的引用url进行响应。大多数MCP客户端和响应都有大小限制。
该url是可公开访问的，但在文件名后附加了一个大的随机字符串。
贡献
欢迎投稿！请随时提交拉取请求。
- 分叉存储库
- 创建功能分支(
git checkout -b feature/amazing-feature) - 提交您的更改(
git commit -m 'Add amazing feature') - 推到分支(
git push origin feature/amazing-feature) - 打开拉取请求
许可证
Mozilla公共许可证版本2.0-请参阅 许可证 详细信息文件
致谢
支持
有关问题和疑问，请使用 页面。