feat: phoenix builder can run phoenix apis via MCP now to verify things

Author: abose

phoenix-builder-mcp/mcp-tools.js

@@ -193,6 +193,39 @@ export function registerTools(server, processManager, wsControlServer, phoenixDe
         }
     );
 
+    server.tool(
+        "exec_js",
+        "Execute JavaScript in the Phoenix Code browser runtime and return the result. " +
+        "Code runs async in the page context with access to: " +
+        "$ (jQuery) for DOM queries/clicks, " +
+        "brackets.test.CommandManager, brackets.test.EditorManager, brackets.test.ProjectManager, " +
+        "brackets.test.DocumentManager, brackets.test.FileSystem, brackets.test.FileUtils, " +
+        "and 50+ other modules on brackets.test.* — " +
+        "supports await.",
+        {
+            code: z.string().describe("JavaScript code to execute in Phoenix"),
+            instance: z.string().optional().describe("Target a specific Phoenix instance by name (e.g. 'Phoenix-a3f2'). Required when multiple instances are connected.")
+        },
+        async ({ code, instance }) => {
+            try {
+                const result = await wsControlServer.requestExecJs(code, instance);
+                return {
+                    content: [{
+                        type: "text",
+                        text: result !== undefined ? String(result) : "(undefined)"
+                    }]
+                };
+            } catch (err) {
+                return {
+                    content: [{
+                        type: "text",
+                        text: JSON.stringify({ error: err.message })
+                    }]
+                };
+            }
+        }
+    );
+
     server.tool(
         "get_phoenix_status",
         "Check the status of the Phoenix process and WebSocket connection.",

phoenix-builder-mcp/ws-control-server.js

@@ -78,6 +78,19 @@ export function createWSControlServer(port) {
                     break;
                 }
 
+                case "exec_js_response": {
+                    const pending5 = pendingRequests.get(msg.id);
+                    if (pending5) {
+                        pendingRequests.delete(msg.id);
+                        if (msg.error) {
+                            pending5.reject(new Error(msg.error));
+                        } else {
+                            pending5.resolve(msg.result);
+                        }
+                    }
+                    break;
+                }
+
                 case "reload_response": {
                     const pending3 = pendingRequests.get(msg.id);
                     if (pending3) {
@@ -282,6 +295,41 @@ export function createWSControlServer(port) {
         });
     }
 
+    function requestExecJs(code, instanceName) {
+        return new Promise((resolve, reject) => {
+            const resolved = _resolveClient(instanceName);
+            if (resolved.error) {
+                reject(new Error(resolved.error));
+                return;
+            }
+
+            const { client } = resolved;
+            if (client.ws.readyState !== 1) {
+                reject(new Error("Phoenix client \"" + resolved.name + "\" is not connected"));
+                return;
+            }
+
+            const id = ++requestIdCounter;
+            const timeout = setTimeout(() => {
+                pendingRequests.delete(id);
+                reject(new Error("exec_js request timed out (30s)"));
+            }, 30000);
+
+            pendingRequests.set(id, {
+                resolve: (data) => {
+                    clearTimeout(timeout);
+                    resolve(data);
+                },
+                reject: (err) => {
+                    clearTimeout(timeout);
+                    reject(err);
+                }
+            });
+
+            client.ws.send(JSON.stringify({ type: "exec_js_request", id, code }));
+        });
+    }
+
     function getBrowserLogs(sinceLast, instanceName) {
         const resolved = _resolveClient(instanceName);
         if (resolved.error) {
@@ -332,6 +380,7 @@ export function createWSControlServer(port) {
         requestScreenshot,
         requestReload,
         requestLogs,
+        requestExecJs,
         getBrowserLogs,
         clearBrowserLogs,
         isClientConnected,

src/brackets.js

@@ -328,7 +328,9 @@ define(function (require, exports, module) {
         ViewCommandHandlers.restoreFontSize();
         ProjectManager.getStartupProjectPath().then((initialProjectPath)=>{
             ProjectManager.openProject(initialProjectPath).always(function () {
-                _initTest();
+                if (Phoenix.isTestWindow || window._phoenixBuilder) {
+                    _initTest();
+                }
 
                 // If this is the first launch, and we have an index.html file in the project folder (which should be
                 // the samples folder on first launch), open it automatically. (We explicitly check for the

src/phoenix-builder/phoenix-builder-boot.js

@@ -329,6 +329,26 @@
         }, 100);
     });
 
+    // --- Register built-in handler for exec_js_request ---
+    // Evaluates arbitrary JS in the page context and returns the result.
+    registerHandler("exec_js_request", function (msg) {
+        const AsyncFunction = (async function () {}).constructor;
+        const fn = new AsyncFunction(msg.code);
+        fn().then(function (result) {
+            _sendMessage({
+                type: "exec_js_response",
+                id: msg.id,
+                result: _serializeArg(result)
+            });
+        }).catch(function (err) {
+            _sendMessage({
+                type: "exec_js_response",
+                id: msg.id,
+                error: (err && err.stack) || (err && err.message) || String(err)
+            });
+        });
+    });
+
     // --- Expose API for AMD module ---
     window._phoenixBuilder = {
         connect: connect,