Appinventor Mcp

MIT App Inventor MCP Bridge

> Build Android apps with AI. No drag-and-drop required.

A Chrome extension that exposes MIT App Inventor's internal APIs as an MCP server. AI agents like Claude Code send structured tool calls; the extension translates them into live JS injections inside App Inventor.

Result: What takes 30+ minutes of manual drag-and-drop takes seconds with natural language.

https://github.com/user-attachments/assets/placeholder-demo.mp4

How It Works

Claude Code (or any MCP client)
    | stdio (JSON-RPC 2.0)
    v
Native Messaging Host (Node.js)         select the `extension/` folder
4. Copy the extension ID

### 3. Register native messaging host

```bash
./extension/host/install.sh    # macOS/Linux (handles Chrome + Arc)
extension\host\install.bat     # Windows

Update allowed_origins in the generated manifest with your extension ID from step 2.

4. Configure your MCP client

Claude Code

Add to ~/.claude.json under mcpServers:

{
  "appinventor": {
    "type": "stdio",
    "command": "node",
    "args": ["/absolute/path/to/extension/host/index.js"]
  }
}

Restart Claude Code.

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "appinventor": {
      "command": "node",
      "args": ["/absolute/path/to/extension/host/index.js"]
    }
  }
}

Restart Cursor.

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "appinventor": {
      "command": "node",
      "args": ["/absolute/path/to/extension/host/index.js"]
    }
  }
}

Restart Windsurf.

Cline (VS Code)

Open Cline settings in VS Code, go to MCP Servers, click Add Server, and enter:

• Name: appinventor
• Command: node
• Args: /absolute/path/to/extension/host/index.js

Or edit ~/.vscode/cline_mcp_settings.json:

{
  "mcpServers": {
    "appinventor": {
      "command": "node",
      "args": ["/absolute/path/to/extension/host/index.js"]
    }
  }
}

Continue (VS Code / JetBrains)

Add to ~/.continue/config.json:

{
  "mcpServers": [
    {
      "name": "appinventor",
      "command": "node",
      "args": ["/absolute/path/to/extension/host/index.js"]
    }
  ]
}

Zed

Add to Zed settings (settings.json):

{
  "context_servers": {
    "appinventor": {
      "command": {
        "path": "node",
        "args": ["/absolute/path/to/extension/host/index.js"]
      }
    }
  }
}

OpenCode

Add to ~/.config/opencode/config.toml:

[mcp.appinventor]
command = "node"
args = ["/absolute/path/to/extension/host/index.js"]

Any MCP Client

The server speaks standard MCP over stdio (JSON-RPC 2.0, protocol version 2024-11-05). Point your client at:

command: node
args:    /absolute/path/to/extension/host/index.js

Usage

1. Open a project at ai2a.appinventor.mit.edu
2. Start building — no manual edit needed. Claude automatically force-touches the component tree to establish the MCP connection:

You: "Add a Button and Label to Screen1"
Claude: [calls add_components] -> Components added, page reloading...

You: "When Button1 is clicked, set Label1 text to 'Hello World'"
Claude: [calls add_blocks] -> Event handler injected

Development

Running Tests

cd extension
npm install
npm test                 # 147 tests
npm run test:coverage    # with coverage report

Coverage thresholds: 80% on branches, functions, lines, statements.

Project Structure

extension/
  manifest.json          # MV3 manifest
  background.js          # Service worker (WS bridge, auto-reconnect)
  content.js             # Content script (message relay, session cache)
  page-bridge.js         # MAIN world script (GWT/Blockly access)
  host/
    index.js             # MCP server (stdio + WebSocket)
    install.sh           # Native messaging host installer
    package.json
  lib/
    mcp-handler.js       # MCP protocol parsing/routing
    tool-handlers.js     # Tool implementations
    scm-builder.js       # SCM JSON tree builder
    gwt-rpc.js           # GWT-RPC request builder
    bky-builder.js       # BKY XML generator
    validators.js        # Input validation
__tests__/               # 18 test files

Methodology

TDD (Red -> Green -> Refactor). No production code without a failing test first.

Troubleshooting

| Problem | Fix | |---------|-----| | Chrome extension not connected | Check service worker console for Connected to host. Verify host is running: lsof -i :8765 | | Session params not captured | Claude will force-touch the component tree automatically. If it still fails, try switching to Designer view | | save2 failed with status 500 | Refresh App Inventor tab, make a manual edit to re-capture session params | | Blockly workspace not available | Switch to Blocks editor view | | Extension request timed out | Page may have reloaded mid-request -- retry |

Known Limitations

• Page reloads after component changes (~3s) -- batch changes to minimize reloads
• Screenshot tool not yet implemented
• No official App Inventor API exists -- relies on reverse-engineered GWT-RPC and Blockly internals

License

MIT

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: rhyumiranda
• Source: rhyumiranda/appinventor-mcp
• License: MIT

Install and usage instructions live in the source repository linked above.