MCPresso☕
立即将API注入MCP服务器
MCPresso是OpenAPI从式样书自动MCP (Model Context Protocol) 生成服务器并进行管理和分发Web应用程序。仅在浏览器中完全运行，不需要安装，任何人都可以立即开始使用。
📋 目次
📖 概要
MCPresso是现有的OpenAPI装入规格说明书MCP自动生成作为服务器工作的代码。解决以下问题：
- ✅ MCP化的屏障: OpenAPI从MCP自动手动转换到服务器
- ✅ 管理难题：多个MCP集中管理服务器
- ✅ 部署难题：无需构建服务器环境，仅通过浏览器完成
目标用户
- API开発者
- LLM应用程序开发人员
- MCP想制作对应工具的个人、组织
- 不擅长技术环境建设的用户
✨ 主要功能
1. OpenAPI式样书的管理
- 文件上传:
.yaml、.json支持格式 - 拖放：直观操作
- 验证: OpenAPI 3.0/3.1合规性检查
- 管理多个规格书：浏览和重用
2.项目管理
- 自定义项目标题：使用自由名称创建项目（必填、带验证）
- 现有规格书的再利用：已注册OpenAPI从规格书创建新项目
- 项目列表：列出所有项目
- 下载活动服务器：直接从项目列表ZIP可下载
3. MCP服务器生成
- TypeScript対応: Node.js在环境中运行MCP生成服务器
- 自动代码生成: OpenAPI从端点MCP自动转换为工具
- 配置文件生成:
package.json、tsconfig.json等自动生成
4.工具管理功能
- 工具列表显示：在服务器详细信息页面上显示工具列表
- 添加自定义工具：手动添加工具（工具名称、说明、端点和参数定义）
- 工具编辑: Monaco Editor使用编辑代码
- AI生成机能: AI使用自动生成工具实现代码
- 复数AI供应商支持：OpenAI、Anthropic、Azure OpenAI服务、Amazon Bedrock、Custom API
5.服务器管理和部署
- 活动服务器设置：为每个项目设置一个活动服务器
- 本地部署：本地启动和停止生成的服务器
- 状态监视：实时检查服务器运行状态
- 代码预览：在浏览器中查看生成的代码
6.导出功能
- ZIP格式下载：将生成的服务器代码ZIP作为文件下载
- 完整的项目结构：包含依赖关系的完整项目文件
7. AI设定管理
- Settings页: AI管理供应商设置
- 支持多供应商：OpenAI、Anthropic、Azure OpenAI服务、Amazon Bedrock、Custom API
- API Key管理：安全保存到本地存储
- 端点和模型设置：可根据每个供应商进行设置
🛠 技术栈
前端
- 框架结构：React 19+TypeScript 5.9
- 构建工具：快7
- 状態管理状态：5
- 路由选择：React Router v7
- 造型：顺风CSS v3
- 数据库：索引数据库（Dexie.js 4）
主要库
@apidevtools/swagger-parser: OpenAPI式样书的解析和验证js-yaml: YAML文件透视jszip: ZIP文件生成buffer: Node.js Buffer浏览器兼容性@monaco-editor/react：代码编辑器@heroicons/react：图标库dexie: IndexedDB包装器（数据持久化）
AI生成机能
- 支持的供应商：OpenAI、Anthropic、Azure OpenAI服务、Amazon Bedrock、Custom API
- 用途：自动生成工具实现代码
- 设定管理: Settings在工作空间的边缘API Key和端点
后端（开发服务器集成）
- Node.js: Vite集成到开发服务器API端点
- 子进程: MCP服务器运行管理
- 文件系统：写入和管理服务器代码
🚀 安装，安装
前提条件
- Node.js 18以上
- npm 或yarn
安装
# リポジトリをクローン
git clone
cd MCPresso
# 依存パッケージをインストール
npm install🎯 起动方法
启动开发服务器
npm run dev当开发服务器启动时，通常 http://localhost:5173 对较大场景进行渲染期间已观察到该故障。
构建
npm run build构建结果为 dist/ 输出到目录。
预览
npm run preview本地预览构建的应用程序。
其他命令
# リントチェック
npm run lint
# 型チェック
npx tsc --noEmit📱 用法
1.创建项目
- 从仪表板或“+新建项目”按钮转到“新建项目”页
- 输入项目标题
- 通过以下方法之一OpenAPI添加规格书：
- 上传新式样书：拖放或选择文件 - 使用现有规格说明书：已注册OpenAPI从规格书中选择
- 「Create Project」来修改标记元素的显示属性
2.生成服务器
- 在项目详细信息页面上，单击生成服务器按钮
- 生成完成后「Generated Servers」服务器显示在节中
3.设置活动服务器
- 单击在“项目详细信息”页面上生成的服务器的“设置活动”按钮
- 当服务器处于活动状态时，请参阅#Active」显示徽章
4.启动/停止服务器
单击功能区上
- 使用“部署和启动”按钮启动活动服务器
- 使用停止服务器按钮停止正在运行的服务器
从项目列表中
- 在“项目列表”页面上，使用每个项目的“开始”按钮启动
- 使用停止按钮停止正在运行的服务器
- 状态为🟢 Running」或者，单击⚫ Stopped」中显示的项
5.确认和下载代码
- 检查服务器详细信息页面上生成的代码
- 根据需要ZIP作为文件下载
6. OpenAPI式样书的管理
- 从侧面菜单中选择“OpenAPI Specs”
- 确认已注册的规格说明书一览表
- 「+ Upload New Spec」添加新规格
7. AI配置配置配置
- 从侧面菜单中选择“设置”
- AI选择供应商（OpenAI、Anthropic、Azure OpenAI Service、Amazon Bedrock、Custom API）
- API Key的双曲正切值
- 根据需要设置端点和模型名称
- 「Save Settings」来修改标记元素的显示属性
支持供应商：
- 开放人工智能: GPT-4、GPT-3.5-Turbo等等
- Anthropic: Claude 3 Opus、Claude 3 Sonnet等等
- Azure OpenAI服务: Azure上主机OpenAI模型
- 亚马逊基岩: AWS Bedrock经过Claude模型
- 自定义API: OpenAI兼容API端点
8.创建自定义工具
MCPresso可以从“服务器详细信息”页添加和编辑自定义工具。
8.1基本工具添加
- 单击“服务器详细信息”页上的“+添加”按钮
- 输入工具信息：
- 工具名称：工具名称（例如： fetch_users） - 仅适用于字母数字、连字符和下划线 - 1-50文字、必须入力 - 描述：工具说明（可选） - HTTP方法：获取/发布/放置/删除/修补 - 端点: API端点URL（必需的 - 参数: JSON Schema格式参数定义
- 「Create Tool」来修改标记元素的显示属性
8.2编辑和AI生成
- 从工具列表中选择要编辑的工具
- 「Edit」按钮关闭对话框
- 使用以下方法之一编辑实现：
- 手动编集: Monaco Editor编辑直接代码 - AI生成：在“AI Prompt”字段中描述请求「Generate with AI」来修改标记元素的显示属性
- 「Save」单击保存更改
8.3创建具有登录验证的工具示例
登录到每个API的，之GET中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。
示例1:登录工具
首先，创建登录工具：
工具设置：
- 工具名称:
login - 描述:
ユーザーログインを実行してアクセストークンを取得 - HTTP方法:
POST - 端点:
https://api.example.com/auth/login - 参数:
{
"type": "object",
"properties": {
"email": {
"type": "string",
"format": "email"
},
"password": {
"type": "string",
"format": "password"
}
},
"required": ["email", "password"]
}实施代码（手动编辑或AI生成）：
// グローバル変数でトークンを保存
let authToken: string | null = null;
export async function login(args: { email: string; password: string }) {
try {
const response = await fetch('https://api.example.com/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: args.email,
password: args.password
}),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// トークンを保存
authToken = data.token || data.access_token;
return {
content: [{
type: "text",
text: JSON.stringify({
success: true,
message: "Login successful",
token: authToken ? "***" : "Not found"
}, null, 2)
}]
};
} catch (error) {
return {
content: [{
type: "text",
text: `Error: ${error instanceof Error ? error.message : String(error)}`
}],
isError: true
};
}
}示例2:需要验证GET请求工具
使用验证标记API的工具：
工具设置：
- 工具名称:
get_users - 描述:
ユーザー一覧を取得（認証が必要） - HTTP方法:
GET - 端点:
https://api.example.com/users - 参数:
{
"type": "object",
"properties": {
"limit": {
"type": "number",
"description": "取得件数の上限"
},
"offset": {
"type": "number",
"description": "オフセット"
}
}
}实施代码：
// グローバル変数でトークンを取得（login.tsと同じスコープに配置）
declare let authToken: string | null;
export async function get_users(args: { limit?: number; offset?: number }) {
try {
// 認証チェック
if (!authToken) {
return {
content: [{
type: "text",
text: JSON.stringify({
error: "Authentication required. Please login first using the login tool.",
code: "UNAUTHORIZED"
}, null, 2)
}],
isError: true
};
}
// クエリパラメータの構築
const params = new URLSearchParams();
if (args.limit) params.append('limit', args.limit.toString());
if (args.offset) params.append('offset', args.offset.toString());
const queryString = params.toString();
const url = `https://api.example.com/users${queryString ? '?' + queryString : ''}`;
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}` // 認証トークンをヘッダーに追加
},
});
if (!response.ok) {
if (response.status === 401) {
// トークンが無効な場合、ログインを促す
authToken = null;
return {
content: [{
type: "text",
text: JSON.stringify({
error: "Authentication token expired. Please login again.",
code: "TOKEN_EXPIRED"
}, null, 2)
}],
isError: true
};
}
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return {
content: [{
type: "text",
text: JSON.stringify(data, null, 2)
}]
};
} catch (error) {
return {
content: [{
type: "text",
text: `Error: ${error instanceof Error ? error.message : String(error)}`
}],
isError: true
};
}
}示例3:多个GET添加端点
同样的模式，其他的GET也可以添加端点：
get_user_by_id 工具：
- 工具名称:
get_user_by_id - 描述:
指定IDのユーザー情報を取得 - HTTP方法:
GET - 端点:
https://api.example.com/users/{id} - 参数:
{
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "ユーザーID"
}
},
"required": ["id"]
}实施代码：
declare let authToken: string | null;
export async function get_user_by_id(args: { id: string }) {
try {
if (!authToken) {
return {
content: [{
type: "text",
text: JSON.stringify({
error: "Authentication required. Please login first.",
code: "UNAUTHORIZED"
}, null, 2)
}],
isError: true
};
}
const response = await fetch(`https://api.example.com/users/${args.id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
});
if (!response.ok) {
if (response.status === 401) {
authToken = null;
return {
content: [{
type: "text",
text: JSON.stringify({
error: "Authentication token expired. Please login again.",
code: "TOKEN_EXPIRED"
}, null, 2)
}],
isError: true
};
}
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return {
content: [{
type: "text",
text: JSON.stringify(data, null, 2)
}]
};
} catch (error) {
return {
content: [{
type: "text",
text: `Error: ${error instanceof Error ? error.message : String(error)}`
}],
isError: true
};
}
}8.4认证令牌的共享方法
重要：在当前实现中，每个工具文件都是独立的，因此全局变量中的令牌共享是正常的Node.js在环境中不工作。
建议的解决方案：
- 创建共享模块:
src/auth.ts 文件并管理凭据：
// src/auth.ts
let authToken: string | null = null;
export function setAuthToken(token: string | null) {
authToken = token;
}
export function getAuthToken(): string | null {
return authToken;
}
export function isAuthenticated(): boolean {
return authToken !== null;
}- 使用每个工具导入:
import { getAuthToken, setAuthToken, isAuthenticated } from '../auth.js';
export async function login(args: { email: string; password: string }) {
// ... ログイン処理 ...
const token = data.token;
setAuthToken(token);
// ...
}
export async function get_users(args: { limit?: number; offset?: number }) {
if (!isAuthenticated()) {
// エラー処理
}
const token = getAuthToken();
// トークンを使用してAPIを呼び出す
}- index.ts导入共享模块:
import { setAuthToken, getAuthToken } from './auth.js';8.5常见模式
模式1:需要认证的多个GET端点
login创建工具- 每个GET为端点创建工具
- 在所有工具上实施验证检查
模式2:错误处理
- 401错误：禁用验证标记-提示重新登录
- 403错误：权限不足→返回错误消息
- 500错误：服务器错误-返回错误详细信息
模式3:验证参数
- 检查必需参数
- 模具检查
- 值范围检查
📁 项目结构
MCPresso/
├── src/
│ ├── components/ # Reactコンポーネント
│ │ ├── common/ # 共通コンポーネント
│ │ ├── forms/ # フォームコンポーネント
│ │ ├── editors/ # エディタコンポーネント
│ │ ├── viewers/ # ビューアーコンポーネント
│ │ └── layout/ # レイアウトコンポーネント
│ ├── pages/ # ページコンポーネント
│ │ ├── HomePage.tsx
│ │ ├── ProjectListPage.tsx
│ │ ├── ProjectNewPage.tsx
│ │ ├── ProjectDetailPage.tsx
│ │ ├── ServerDetailPage.tsx
│ │ ├── OpenAPISpecListPage.tsx
│ │ └── SettingsPage.tsx
│ ├── services/ # ビジネスロジック層
│ │ ├── db/ # データベース設定
│ │ ├── interfaces/ # インターフェース定義
│ │ └── implementations/ # 実装
│ ├── stores/ # Zustandストア
│ ├── templates/ # コードテンプレート
│ │ └── typescript/ # TypeScriptサーバーテンプレート
│ ├── types/ # TypeScript型定義
│ └── utils/ # ユーティリティ関数
├── server/ # サーバーサイドコード
│ └── MCPServerManager.ts # MCPサーバー管理
├── docs/ # ドキュメント
├── public/ # 静的ファイル
└── screenshots/ # スクリーンショット（エビデンス）🔧 开发指南
开发环境设置
- 克隆存储库
npm install在中安装依赖包npm run dev启动开发服务器
代码样式
- TypeScript：启用严格的类型检查
- 埃斯林特：维护代码质量
- 更漂亮：统一代码格式
数据库架构
应用程序IndexedDB对较大场景进行渲染期间已观察到该故障。模式变更时 src/services/db/database.ts 中所述修改相应参数的值。
部署的服务器
已生成MCP服务器是 .mcp-servers/ 存储在目录中并在本地运行。每个服务器都被管理为独立的进程/api/servers 可以通过端点进行控制。
API端点
集成到开发服务器API端点：
POST /api/servers/deploy：部署服务器启动POST /api/servers/:id/stop：停止服务器GET /api/servers/:id/status：获取服务器状态GET /api/servers：获取所有服务器的列表
📝 许可证
MIT许可证
🤝 分发
欢迎普尔请求和伊修的报告。了解更多信息 docs/ 请参阅目录中的文档。
📚 相关文档
🐛 故障排除
服务器未启动
- 确认是否使用了端口5173
node_modules删除npm install重新运行- 在浏览器控制台中检查错误
OpenAPI无法读取文件
- YAML/JSON确认格式是否正确
- OpenAPI 3.0/3.1中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积
- 在浏览器控制台中查看错误消息
未显示数据
- 使用浏览器开发者工具IndexedDB确认
- 清除浏览器存储并重试
______________________________________________________________________
MCPresso☕ -立即将API注入MCP服务器