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 應用。