Web To Ios MCP

🚀 Web to iOS MCP

Web to iOS MCP 是一个 MCP 服务器，用于借助 Capacitor 将 Web 应用程序（如 Vite、Next.js、React 等）转换为 iOS 应用。它能自动检测多种 Web 框架，并为 iOS 转换生成详细的规格文档和配置文件。

🚀 快速开始

你可以按照以下步骤安装 Web to iOS MCP：

# NPM 发布后全局安装
npm install -g web-to-ios-mcp

# 或者，进行本地开发
git clone https://github.com/Gaku52/web-to-ios-mcp.git
cd web-to-ios-mcp
npm install
npm run build

✨ 主要特性

🔍 1. 框架自动检测

• Vite + React/Vue：解析 package.json 和 vite.config.ts 文件。
• Next.js：可检测 App Router 和 Pages Router。
• Create React App：检测 react-scripts。
• 其他：支持 Parcel、Webpack 等框架。

检测内容包括：

• 框架名称和版本。
• 构建输出目录。
• 路由方式。
• 所使用的主要库（如 React Router、Supabase 等）。

📝 2. iOS 转换规格书自动生成

根据项目配置，生成包含以下内容的详细规格书：

• 当前技术栈分析。
• Capacitor 安装步骤。
• 框架特定的配置更改（区分 Vite 和 Next.js）。
• capacitor.config.ts 的推荐配置。
• package.json 的追加脚本。
• iOS 特定的优化（如安全区域、状态栏等）。
• 故障排除指南。

⚙️ 3. 配置文件自动生成

• capacitor.config.ts：为项目优化的配置。
• 构建配置的更改建议。
• .gitignore 的追加项。

✅ 4. 迁移准备检查清单

• 检查 Xcode 环境。
• 检查 CocoaPods 安装情况。
• 确认所需依赖项。
• 确认构建是否成功。

💻 使用示例

MCP 资源

此 MCP 服务器提供以下文档作为 MCP 资源，可直接从 Claude Code 访问。

web-to-ios://guides/implementation

实施指南 - iOS 迁移实施指南 提供完整的实施指南，内容涵盖：

• 实施前的问题梳理和风险管理。
• 设计原则（如 KISS、YAGNI、快速失败等）。
• 性能优化的最佳实践。
• 质量检查清单。
• 最小可行产品（MVP）的定义。

web-to-ios://guides/troubleshooting

常见问题与解决方案 - 故障排除指南 涵盖常见问题及解决方案，包括：

• 构建错误（如 CocoaPods、Xcode 签名等）。
• 运行时错误（如白屏、路由、环境变量问题）。
• Vite 特定问题（如 base 配置、HMR 等）。
• Next.js 特定问题（如静态导出、图像优化等）。
• Supabase 集成问题。
• UI/UX 问题（如安全区域、状态栏、键盘等）。
• 性能问题。

MCP 工具

detect_web_framework

检测 Web 项目的框架和配置。 输入：

• projectPath：项目目录路径。

输出：

{
  "framework": "vite",
  "version": "5.0.0",
  "uiLibrary": "react",
  "buildOutputDir": "dist",
  "routing": "react-router",
  "dependencies": {
    "supabase": "^2.78.0",
    "tailwindcss": "^3.4.0"
  }
}

generate_ios_migration_spec

生成用于 iOS 转换的详细规格书。 输入：

• projectPath：项目目录路径。
• appName：应用名称（例如："Spark Vault"）。
• bundleId：Bundle ID（例如："com.ogadix.sparkvault"）。

输出：

• Markdown 格式的详细规格书。

generate_capacitor_config

生成 Capacitor 配置文件。 输入：

• appName：应用名称。
• appId：Bundle ID。
• webDir：构建输出目录（例如："dist"）。
• framework：框架名称（例如："vite"）。

输出：

• capacitor.config.ts 文件内容。

analyze_migration_readiness

检查 iOS 迁移的准备情况。 输入：

• projectPath：项目目录路径。

输出：

{
  "ready": false,
  "checks": [
    { "name": "Xcode installed", "status": "pass" },
    { "name": "CocoaPods installed", "status": "pass" },
    { "name": "Build successful", "status": "fail", "message": "npm run build failed" }
  ]
}

📚 详细文档

支持的框架

✅ 已支持（v1.0）

• Vite + React
• Vite + Vue
• Next.js（App Router / Pages Router）
• Create React App

🔜 未来计划支持

• Astro
• SvelteKit
• Remix
• Nuxt.js

技术栈

• TypeScript：提供类型安全。
• Node.js：运行环境。
• MCP SDK：@modelcontextprotocol/sdk
• 依赖库：
  • fs-extra：文件操作。
  • glob：文件搜索。
  • JSON/YAML 解析器。

开发路线图

阶段 1：基本功能（v1.0）

• [x] 项目构想与规格制定
• [ ] 框架检测功能
  • [ ] Vite 检测
  • [ ] Next.js 检测
  • [ ] CRA 检测
• [ ] iOS 规格书生成
  • [ ] Vite 模板
  • [ ] Next.js 模板
• [ ] Capacitor 配置生成
• [ ] 迁移准备检查
• [ ] 测试用例创建
• [ ] 文档完善

阶段 2：扩展功能（v1.1+）

• [ ] 更详细的依赖分析
• [ ] 自定义插件推荐功能
• [ ] 故障自动诊断
• [ ] 现有 iOS 项目的检测与更新

阶段 3：支持 Android（v2.0）

• [ ] 考虑将仓库名称更改为 web-to-mobile-mcp
• [ ] 添加 Android 转换功能
• [ ] 优化 iOS/Android 通用配置

🔧 技术细节

Web to iOS MCP 使用 TypeScript 编写，以确保代码的类型安全性，运行在 Node.js 环境中。它借助 MCP SDK（@modelcontextprotocol/sdk）实现核心功能，并依赖 fs-extra 进行文件操作、glob 进行文件搜索，同时使用 JSON/YAML 解析器处理配置文件。

📄 许可证

本项目采用 MIT 许可证，详情请参考 LICENSE。

相关项目

• Spark Vault - 计划使用此 MCP 转换为 iOS 应用的创意管理应用。
• Capacitor - Web 到原生的转换器。

使用 Web to iOS MCP，轻松将你的 Web 应用转换为 iOS 应用。