Web To Ios MCP

🚀 Web to iOS MCP

The Web to iOS MCP is an MCP server that converts web applications (Vite/Next.js/React) into iOS apps using Capacitor. It automatically detects frameworks such as Vite, Next.js, and Create React App, and generates detailed specifications and configuration files for iOS conversion using Capacitor.

🚀 Quick Start

The Web to iOS MCP server simplifies the process of converting web applications into iOS apps. It offers a range of features to automate the conversion process, from framework detection to generating configuration files.

✨ Features

🔍 1. Automatic Framework Detection

• Vite + React/Vue: Analyzes package.json and vite.config.ts.
• Next.js: Detects App Router / Pages Router.
• Create React App: Detects react-scripts.
• Others: Supports Parcel, Webpack, etc.

Detection details include:

• Framework name and version.
• Build output directory.
• Routing method.
• Major libraries in use (e.g., React Router, Supabase).

📝 2. Automatic Generation of iOS Conversion Specifications

Based on the project's configuration, it generates detailed specifications including:

• Analysis of the current technology stack.
• Installation steps for Capacitor.
• Framework-specific configuration changes (different for Vite/Next.js).
• Recommended settings for capacitor.config.ts.
• Additional scripts for package.json.
• iOS-specific optimizations (Safe Area, Status Bar, etc.).
• Troubleshooting guide.

⚙️ 3. Automatic Generation of Configuration Files

• capacitor.config.ts: Optimized settings for the project.
• Suggestions for build configuration changes.
• Additional items for .gitignore.

✅ 4. Migration Readiness Checklist

• Checks the Xcode environment.
• Verifies the installation of CocoaPods.
• Confirms necessary dependencies.
• Ensures successful builds.

💻 Usage Examples

MCP Resources

This MCP server provides the following documents as MCP resources, which can be accessed directly from Claude Code.

web-to-ios://guides/implementation

Implementation Guide - A guide for iOS migration implementation.

It offers a comprehensive implementation guide:

• Problem identification and risk management before implementation.
• Design principles (KISS, YAGNI, Fail Fast, etc.).
• Best practices for performance optimization.
• Quality checklist.
• Definition of MVP (Minimum Viable Product).

web-to-ios://guides/troubleshooting

Common Issues & Solutions - A troubleshooting guide.

Covers common problems and solutions:

• Build errors (CocoaPods, Xcode signing, etc.).
• Runtime errors (white screen, routing, environment variables).
• Vite-specific issues (base settings, HMR, etc.).
• Next.js-specific issues (Static Export, image optimization, etc.).
• Issues with Supabase integration.
• UI/UX issues (Safe Area, status bar, keyboard).
• Performance issues.

MCP Tools

detect_web_framework

Detects the framework and configuration of a web project.

Input:

• projectPath: Path to the project directory.

Output:

{
  "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

Generates detailed specifications for iOS conversion.

Input:

• projectPath: Path to the project directory.
• appName: Name of the app (e.g., "Spark Vault").
• bundleId: Bundle ID (e.g., "com.ogadix.sparkvault").

Output:

• Detailed specifications in Markdown format.

generate_capacitor_config

Generates the Capacitor configuration file.

Input:

• appName: Name of the app.
• appId: Bundle ID.
• webDir: Build output directory (e.g., "dist").
• framework: Name of the framework (e.g., "vite").

Output:

• Contents of the capacitor.config.ts file.

analyze_migration_readiness

Checks the readiness for iOS migration.

Input:

• projectPath: Path to the project directory.

Output:

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

📚 Documentation

Supported Frameworks

✅ Supported (v1.0)

• Vite + React
• Vite + Vue
• Next.js (App Router / Pages Router)
• Create React App

🔜 Planned for Future Support

• Astro
• SvelteKit
• Remix
• Nuxt.js

Technology Stack

• TypeScript: Ensures type safety.
• Node.js: Execution environment.
• MCP SDK: @modelcontextprotocol/sdk
• Dependent Libraries:
  • fs-extra: File operations.
  • glob: File search.
  • JSON/YAML parsers.

📦 Installation

# After publishing on NPM
npm install -g web-to-ios-mcp

# Or, for local development
git clone https://github.com/Gaku52/web-to-ios-mcp.git
cd web-to-ios-mcp
npm install
npm run build

🚧 Development Roadmap

Phase 1: Basic Features (v1.0)

• [x] Project concept and specification formulation
• [ ] Framework detection functionality
  • [ ] Vite detection
  • [ ] Next.js detection
  • [ ] CRA detection
• [ ] iOS specification generation
  • [ ] Templates for Vite
  • [ ] Templates for Next.js
• [ ] Capacitor configuration generation
• [ ] Migration readiness check
• [ ] Test case creation
• [ ] Documentation improvement

Phase 2: Extended Features (v1.1+)

• [ ] More detailed dependency analysis
• [ ] Custom plugin recommendation feature
• [ ] Automatic troubleshooting diagnosis
• [ ] Detection and update of existing iOS projects

Phase 3: Android Support (v2.0)

• [ ] Consider renaming the repository to web-to-mobile-mcp
• [ ] Add Android conversion functionality
• [ ] Optimize common settings for iOS/Android

🤝 Contribution

Contributions are welcome!

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add some amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

📄 License

This project is under the MIT License. For details, refer to LICENSE.

👨‍💻 Author

Gaku52

🔗 Related Projects

• Spark Vault - An idea management app planned to be converted to iOS using this MCP.
• Capacitor - A Web to Native converter.

Convert your web app to an iOS app effortlessly with Web to iOS MCP.