Claude Code integration for Mendix Studio Pro 11.6. Embeds an interactive Claude Code terminal directly inside Studio Pro's dockable pane system.
Studio Pro 11.6
└─ Claude Code pane (web extension, xterm.js)
└─ WebSocket (ws://localhost:3456/terminal)
└─ Bridge Server (Node.js)
└─ node-pty (Windows ConPTY)
└─ claude CLI
Uses Claude Code credentials (Max subscription or API key)
Two components:
| Component | Path | Purpose |
|---|---|---|
claude-bridge-server |
Local Node.js server | Spawns claude CLI in a PTY, exposes via WebSocket |
claude-code-bridge |
Studio Pro web extension | xterm.js terminal UI in a dockable pane |
- Node.js >= 18
- Claude Code CLI installed and authenticated:
npm i -g @anthropic-ai/claude-code claude login - Mendix Studio Pro 11.6 with Extension Development Mode enabled:
- Edit > Preferences > Advanced > Extension Development Mode = ON
- Or launch with
--enable-extension-development
cd claude-bridge-server
npm install # first time only
npm startOr from the root folder:
start-bridge.batYou should see:
Claude Bridge Server v0.2.0
http://127.0.0.1:3456/health — Health check
ws://127.0.0.1:3456/terminal — Terminal WebSocket
cd claude-code-bridge
npm install # first time only
npm run buildThis builds the extension and copies it to:
C:/Mendix Projects/MendixApp/extensions/claude-code-bridge/
To change the deploy target, edit
appDirinclaude-code-bridge/build-extension.mjs.
- Open your Mendix project in Studio Pro 11.6
- Press F4 to reload extensions
- Go to Extensions > Claude Code in the menu bar
- Click Test Connection, then Launch Terminal
- You now have a full Claude Code terminal inside Studio Pro
mxCoPilot/
├── README.md
├── start-bridge.bat # Quick-start script for Windows
├── claude-bridge-server/ # Bridge server (Node.js)
│ ├── server.ts # Express + WebSocket + node-pty
│ ├── package.json
│ └── tsconfig.json
└── claude-code-bridge/ # Studio Pro web extension
├── src/
│ ├── main/index.ts # Extension entry: registers dockable pane + menu item
│ ├── ui/index.tsx # Terminal UI: xterm.js + WebSocket client
│ ├── lib/extensions-api.ts # Local shim for @mendix/extensions-api
│ ├── types/ # TypeScript declarations for Mendix modules
│ └── manifest.json # Extension manifest
├── build-extension.mjs # esbuild entry point
├── build.helpers.mjs # esbuild config (externals, loaders, deploy plugin)
├── package.json
└── tsconfig.json
-
extensions-api shim:
@mendix/extensions-apiis not in Studio Pro's browser import map. We bundle a local shim (src/lib/extensions-api.ts) that wraps@mendix/component-frameworkand@mendix/model-access-sdk— both of which ARE in the import map. -
WebSocket bypasses HttpProxyApi: Studio Pro's
HttpProxyApionly supports HTTP. Extensions run in iframes without a sandbox attribute, so direct WebSocket connections to localhost work. -
node-pty + ConPTY: On Windows 11, node-pty uses the native ConPTY API for full terminal emulation (colors, cursor movement, interactive prompts).
-
CSS injection: xterm.js CSS is imported as text (esbuild
textloader) and injected into the iframe's<head>at runtime, since the component host can't load external CSS files.
| Issue | Fix |
|---|---|
| Extension not in menu | Ensure Extension Development Mode is on, press F4 |
| "WebSocket error" in terminal | Start the bridge server first (npm start in claude-bridge-server) |
| "File not found" in server log | Claude CLI not installed. Run npm i -g @anthropic-ai/claude-code |
| "Nested session" error | The CLAUDECODE env var is set. The server strips it automatically, but if running manually, unset it first |
| Extension deploys to wrong app | Edit appDir in claude-code-bridge/build-extension.mjs |