Back to Details

capacitor-mcp

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Capacitor MCP Tools

Capacitor MCP 工具

Guide to using Model Context Protocol (MCP) for Capacitor mobile development automation.
面向Capacitor移动开发自动化的Model Context Protocol（MCP）使用指南。

When to Use This Skill

何时使用本技能

  • User wants to automate mobile development
  • User asks about MCP integration
  • User wants AI-assisted mobile testing
  • User needs programmatic device control
  • User wants to stream logs via MCP
  • 用户想要自动化移动开发流程
  • 用户询问MCP集成相关问题
  • 用户需要AI辅助的移动测试
  • 用户需要程序化的设备控制
  • 用户想要通过MCP实现日志流传输

What is MCP?

什么是MCP？

MCP (Model Context Protocol) is an open standard for connecting AI models to external tools and data sources. For Capacitor development, MCP enables:
  • Automated app deployment
  • Real-time log streaming
  • Device management
  • Screenshot capture
  • Automated testing
MCP（Model Context Protocol）是用于将AI模型连接到外部工具和数据源的开放标准。在Capacitor开发中，MCP可实现：
  • 自动化应用部署
  • 实时日志流传输
  • 设备管理
  • 截图捕获
  • 自动化测试

Setting Up MCP for Capacitor

为Capacitor配置MCP

1. Install MCP Server

1. 安装MCP Server

bash
undefined
bash
undefined

Install the Capacitor MCP server

Install the Capacitor MCP server

bun add -g @anthropic/mcp-server-capacitor
undefined
bun add -g @anthropic/mcp-server-capacitor
undefined

2. Configure MCP

2. 配置MCP

Create 
~/.config/mcp/capacitor.json
:
json
{
  "mcpServers": {
    "capacitor": {
      "command": "mcp-server-capacitor",
      "args": ["--project", "/path/to/your/capacitor/app"]
    }
  }
}
创建 
~/.config/mcp/capacitor.json
：
json
{
  "mcpServers": {
    "capacitor": {
      "command": "mcp-server-capacitor",
      "args": ["--project", "/path/to/your/capacitor/app"]
    }
  }
}

3. Available MCP Tools

3. 可用的MCP工具

iOS MCP Tools

iOS MCP工具

Device Management

设备管理

typescript
// List available iOS devices
mcp.ios.listDevices()
// Returns: [{ name: "iPhone 15", udid: "xxx", state: "Booted" }]

// Boot a simulator
mcp.ios.bootSimulator({ name: "iPhone 15 Pro" })

// Shutdown simulator
mcp.ios.shutdownSimulator({ udid: "xxx" })
typescript
// List available iOS devices
mcp.ios.listDevices()
// Returns: [{ name: "iPhone 15", udid: "xxx", state: "Booted" }]

// Boot a simulator
mcp.ios.bootSimulator({ name: "iPhone 15 Pro" })

// Shutdown simulator
mcp.ios.shutdownSimulator({ udid: "xxx" })

App Deployment

应用部署

typescript
// Build iOS app
mcp.ios.build({
  scheme: "App",
  configuration: "Debug",
  destination: "platform=iOS Simulator,name=iPhone 15"
})

// Install app on device
mcp.ios.install({
  device: "booted",
  appPath: "./ios/App/build/Debug-iphonesimulator/App.app"
})

// Launch app
mcp.ios.launch({
  device: "booted",
  bundleId: "com.yourapp.id"
})
typescript
// Build iOS app
mcp.ios.build({
  scheme: "App",
  configuration: "Debug",
  destination: "platform=iOS Simulator,name=iPhone 15"
})

// Install app on device
mcp.ios.install({
  device: "booted",
  appPath: "./ios/App/build/Debug-iphonesimulator/App.app"
})

// Launch app
mcp.ios.launch({
  device: "booted",
  bundleId: "com.yourapp.id"
})

Log Streaming

日志流传输

typescript
// Stream logs from iOS device
const logStream = mcp.ios.streamLogs({
  device: "booted",
  predicate: 'process == "App"',
  level: "debug"
})

logStream.on('log', (entry) => {
  console.log(entry.timestamp, entry.level, entry.message)
})

// Stop streaming
logStream.stop()
typescript
// Stream logs from iOS device
const logStream = mcp.ios.streamLogs({
  device: "booted",
  predicate: 'process == "App"',
  level: "debug"
})

logStream.on('log', (entry) => {
  console.log(entry.timestamp, entry.level, entry.message)
})

// Stop streaming
logStream.stop()

Screenshots

截图功能

typescript
// Capture screenshot
mcp.ios.screenshot({
  device: "booted",
  outputPath: "./screenshot.png"
})

// Record video
mcp.ios.recordVideo({
  device: "booted",
  outputPath: "./recording.mp4",
  duration: 30 // seconds
})
typescript
// Capture screenshot
mcp.ios.screenshot({
  device: "booted",
  outputPath: "./screenshot.png"
})

// Record video
mcp.ios.recordVideo({
  device: "booted",
  outputPath: "./recording.mp4",
  duration: 30 // seconds
})

Android MCP Tools

Android MCP工具

Device Management

设备管理

typescript
// List connected Android devices
mcp.android.listDevices()
// Returns: [{ name: "Pixel 8", serial: "xxx", state: "device" }]

// Start emulator
mcp.android.startEmulator({ avd: "Pixel_8_API_34" })

// Kill emulator
mcp.android.killEmulator({ serial: "emulator-5554" })
typescript
// List connected Android devices
mcp.android.listDevices()
// Returns: [{ name: "Pixel 8", serial: "xxx", state: "device" }]

// Start emulator
mcp.android.startEmulator({ avd: "Pixel_8_API_34" })

// Kill emulator
mcp.android.killEmulator({ serial: "emulator-5554" })

App Deployment

应用部署

typescript
// Build Android app
mcp.android.build({
  variant: "debug",
  projectPath: "./android"
})

// Install APK
mcp.android.install({
  serial: "emulator-5554",
  apkPath: "./android/app/build/outputs/apk/debug/app-debug.apk"
})

// Launch app
mcp.android.launch({
  serial: "emulator-5554",
  package: "com.yourapp.id",
  activity: ".MainActivity"
})
typescript
// Build Android app
mcp.android.build({
  variant: "debug",
  projectPath: "./android"
})

// Install APK
mcp.android.install({
  serial: "emulator-5554",
  apkPath: "./android/app/build/outputs/apk/debug/app-debug.apk"
})

// Launch app
mcp.android.launch({
  serial: "emulator-5554",
  package: "com.yourapp.id",
  activity: ".MainActivity"
})

Log Streaming

日志流传输

typescript
// Stream logcat
const logStream = mcp.android.logcat({
  serial: "emulator-5554",
  package: "com.yourapp.id",
  level: "D"
})

logStream.on('log', (entry) => {
  console.log(entry.tag, entry.level, entry.message)
})

// Stop streaming
logStream.stop()

// Get recent logs
const recentLogs = mcp.android.getLogcat({
  serial: "emulator-5554",
  lines: 100,
  filter: "Capacitor:*"
})
typescript
// Stream logcat
const logStream = mcp.android.logcat({
  serial: "emulator-5554",
  package: "com.yourapp.id",
  level: "D"
})

logStream.on('log', (entry) => {
  console.log(entry.tag, entry.level, entry.message)
})

// Stop streaming
logStream.stop()

// Get recent logs
const recentLogs = mcp.android.getLogcat({
  serial: "emulator-5554",
  lines: 100,
  filter: "Capacitor:*"
})

Screenshots

截图功能

typescript
// Capture screenshot
mcp.android.screenshot({
  serial: "emulator-5554",
  outputPath: "./screenshot.png"
})

// Record screen
mcp.android.recordScreen({
  serial: "emulator-5554",
  outputPath: "./recording.mp4",
  duration: 30
})
typescript
// Capture screenshot
mcp.android.screenshot({
  serial: "emulator-5554",
  outputPath: "./screenshot.png"
})

// Record screen
mcp.android.recordScreen({
  serial: "emulator-5554",
  outputPath: "./recording.mp4",
  duration: 30
})

Capacitor CLI MCP Tools

Capacitor CLI MCP工具

Project Management

项目管理

typescript
// Sync web assets to native
mcp.capacitor.sync({ platform: "ios" })
mcp.capacitor.sync({ platform: "android" })

// Run capacitor commands
mcp.capacitor.run({
  platform: "ios",
  target: "iPhone 15 Pro"
})

// Open native IDE
mcp.capacitor.open({ platform: "ios" })
typescript
// Sync web assets to native
mcp.capacitor.sync({ platform: "ios" })
mcp.capacitor.sync({ platform: "android" })

// Run capacitor commands
mcp.capacitor.run({
  platform: "ios",
  target: "iPhone 15 Pro"
})

// Open native IDE
mcp.capacitor.open({ platform: "ios" })

Plugin Management

插件管理

typescript
// List installed plugins
mcp.capacitor.listPlugins()

// Add plugin
mcp.capacitor.addPlugin({ name: "@capgo/capacitor-native-biometric" })

// Update plugins
mcp.capacitor.updatePlugins()
typescript
// List installed plugins
mcp.capacitor.listPlugins()

// Add plugin
mcp.capacitor.addPlugin({ name: "@capgo/capacitor-native-biometric" })

// Update plugins
mcp.capacitor.updatePlugins()

Automated Testing with MCP

基于MCP的自动化测试

UI Testing

UI测试

typescript
// Define test scenario
async function testLogin() {
  // Launch app
  await mcp.ios.launch({ bundleId: "com.yourapp.id" })

  // Wait for app ready
  await mcp.ios.waitForElement({
    device: "booted",
    accessibility: "login-button"
  })

  // Capture initial state
  await mcp.ios.screenshot({ outputPath: "./test-login-1.png" })

  // Tap element
  await mcp.ios.tap({
    device: "booted",
    accessibility: "login-button"
  })

  // Type text
  await mcp.ios.typeText({
    device: "booted",
    accessibility: "email-input",
    text: "test@example.com"
  })

  // Assert element exists
  const element = await mcp.ios.findElement({
    device: "booted",
    accessibility: "welcome-message"
  })

  if (element) {
    console.log("Login test passed!")
  }
}
typescript
// Define test scenario
async function testLogin() {
  // Launch app
  await mcp.ios.launch({ bundleId: "com.yourapp.id" })

  // Wait for app ready
  await mcp.ios.waitForElement({
    device: "booted",
    accessibility: "login-button"
  })

  // Capture initial state
  await mcp.ios.screenshot({ outputPath: "./test-login-1.png" })

  // Tap element
  await mcp.ios.tap({
    device: "booted",
    accessibility: "login-button"
  })

  // Type text
  await mcp.ios.typeText({
    device: "booted",
    accessibility: "email-input",
    text: "test@example.com"
  })

  // Assert element exists
  const element = await mcp.ios.findElement({
    device: "booted",
    accessibility: "welcome-message"
  })

  if (element) {
    console.log("Login test passed!")
  }
}

Performance Testing

性能测试

typescript
// Monitor performance during test
async function performanceTest() {
  // Start performance monitoring
  const perfMonitor = mcp.ios.startPerformanceMonitoring({
    device: "booted",
    metrics: ["cpu", "memory", "fps"]
  })

  // Run test scenario
  await runTestScenario()

  // Stop and get results
  const results = perfMonitor.stop()

  console.log("Average CPU:", results.cpu.average)
  console.log("Peak Memory:", results.memory.peak)
  console.log("Average FPS:", results.fps.average)
}
typescript
// Monitor performance during test
async function performanceTest() {
  // Start performance monitoring
  const perfMonitor = mcp.ios.startPerformanceMonitoring({
    device: "booted",
    metrics: ["cpu", "memory", "fps"]
  })

  // Run test scenario
  await runTestScenario()

  // Stop and get results
  const results = perfMonitor.stop()

  console.log("Average CPU:", results.cpu.average)
  console.log("Peak Memory:", results.memory.peak)
  console.log("Average FPS:", results.fps.average)
}

MCP Server Implementation

MCP Server 实现

Creating Custom MCP Tools

创建自定义MCP工具

typescript
// mcp-server.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js"
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"

const server = new Server({
  name: "capacitor-mcp",
  version: "1.0.0"
}, {
  capabilities: {
    tools: {}
  }
})

// Register iOS log streaming tool
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "ios_stream_logs") {
    const { device, predicate } = request.params.arguments

    const process = spawn("xcrun", [
      "simctl", "spawn", device, "log", "stream",
      "--predicate", predicate
    ])

    // Stream logs back to client
    process.stdout.on("data", (data) => {
      server.sendNotification("log", { data: data.toString() })
    })

    return { content: [{ type: "text", text: "Log streaming started" }] }
  }
})

// Start server
const transport = new StdioServerTransport()
await server.connect(transport)
typescript
// mcp-server.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js"
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"

const server = new Server({
  name: "capacitor-mcp",
  version: "1.0.0"
}, {
  capabilities: {
    tools: {}
  }
})

// Register iOS log streaming tool
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "ios_stream_logs") {
    const { device, predicate } = request.params.arguments

    const process = spawn("xcrun", [
      "simctl", "spawn", device, "log", "stream",
      "--predicate", predicate
    ])

    // Stream logs back to client
    process.stdout.on("data", (data) => {
      server.sendNotification("log", { data: data.toString() })
    })

    return { content: [{ type: "text", text: "Log streaming started" }] }
  }
})

// Start server
const transport = new StdioServerTransport()
await server.connect(transport)

Integration Examples

集成示例

Claude Desktop Integration

Claude Desktop 集成

Add to 
~/.config/claude/claude_desktop_config.json
:
json
{
  "mcpServers": {
    "capacitor": {
      "command": "node",
      "args": ["/path/to/capacitor-mcp-server/index.js"],
      "env": {
        "CAPACITOR_PROJECT": "/path/to/your/app"
      }
    }
  }
}
添加至 
~/.config/claude/claude_desktop_config.json
：
json
{
  "mcpServers": {
    "capacitor": {
      "command": "node",
      "args": ["/path/to/capacitor-mcp-server/index.js"],
      "env": {
        "CAPACITOR_PROJECT": "/path/to/your/app"
      }
    }
  }
}

VS Code Integration

VS Code 集成

Install MCP extension and configure:
json
// .vscode/settings.json
{
  "mcp.servers": {
    "capacitor": {
      "command": "mcp-server-capacitor",
      "args": ["--project", "${workspaceFolder}"]
    }
  }
}
安装MCP扩展并配置：
json
// .vscode/settings.json
{
  "mcp.servers": {
    "capacitor": {
      "command": "mcp-server-capacitor",
      "args": ["--project", "${workspaceFolder}"]
    }
  }
}

Available MCP Servers for Mobile

可用的移动开发MCP Server

ServerDescription
mcp-server-capacitor
Capacitor project management
mcp-server-ios
iOS device/simulator control
mcp-server-android
Android device/emulator control
mcp-server-appium
Mobile UI testing
Server描述
mcp-server-capacitor
Capacitor项目管理
mcp-server-ios
iOS设备/模拟器控制
mcp-server-android
Android设备/模拟器控制
mcp-server-appium
移动UI测试

Resources

资源