Ship API tools as JavaScript plugins.

1. Minimal plugin file

Every plugin exports a `manifest`, optional `transformApp`, command handlers, and optional request/response hooks. Use stable IDs for every UI node so Inspect, Recorder, and other plugins can target your components.

module.exports = {
  manifest: {
    id: "hello-plugin",
    name: "Hello Plugin",
    version: "1.0.0",
    priority: 100,
    permissions: ["ui.transform", "plugin.storage"]
  },

  transformApp: function(app, api) {
    api.ui.remove(app, "helloPluginCard");
    api.ui.append(app, "rightPanel", {
      type: "card",
      id: "helloPluginCard",
      children: [
        { type: "text", id: "helloPluginTitle", value: "Hello Plugin" },
        { type: "button", id: "helloPluginRun", text: "Run", command: "helloPlugin.run" }
      ]
    });
    return app;
  },

  commands: {
    "helloPlugin.run": function(ctx) {
      return { __action: "showMessage", title: "Hello", message: "Plugin ran." };
    }
  }
};

2. Add UI with `transformApp(app, api)`

Use `api.ui.append`, `api.ui.prepend`, `api.ui.insertBefore`, `api.ui.insertAfter`, and `api.ui.remove` to place plugin UI in the workspace. Common targets include `rightPanel`, `mainPanel`, `pluginList`, `requestTopBar`, `headersEditor`, `bodyEditor`, `responseViewer`, `urlInput`, and `sendButton`.

3. Command return actions

Commands return action objects. Use `multi` when you need several operations in order.

return {
  __action: "multi",
  actions: [
    { __action: "ui.setValue", targetId: "urlInput", value: "https://api.example.com/users" },
    { __action: "setFields", fields: { "activeRequest.method": "GET" } },
    { __action: "triggerTarget", targetId: "core.request.sendButton" }
  ]
};

4. Inspect, Recorder, and `ctx.dollar` selectors

Long-press a visible element in the app and choose Inspect. Copy the exact selector or command body from the inspect panel into your plugin or into the AI builder. Recorder uses the same target model, so recorded workflows can be replayed as plugin commands.

var url = ctx.dollar("#urlInput").val();
ctx.dollar("#requestNameInput").val("Copied from URL");
ctx.dollar("#bodyEditor").val("url=" + url);
return ctx.dollar("#bodyEditor");

Supported selectors are `#id`, `.className`, type names, role names, exact `id` or `targetId`, and exact label text. Prefer Inspect-provided IDs such as `#urlInput`, `#bodyEditor`, `#response.body.line.2`, `#kvTable.Headers.add.key`, and `#core.headers.addButton`.

5. Request and response hooks

Use hooks to prepare requests, validate data, store results, or chain follow-up requests. Hooks can return a request, a response, or an action.

module.exports = {
  manifest: { id: "response-tools", name: "Response Tools", version: "1.0.0" },

  hooks: {
    beforeRequest: function(ctx) {
      ctx.request.headers["X-From-Plugin"] = "yes";
      return ctx.request;
    },

    afterResponse: function(ctx) {
      return {
        __action: "multi",
        actions: [
          { __action: "setPluginData", key: "responseTools.lastBody", value: ctx.responseBody },
          { __action: "pluginBus.output", name: "response.lastBody", value: ctx.responseBody }
        ]
      };
    }
  }
};

To send and then show the response, call `core.request.send` with an explicit `afterSendCommand`, then read `ctx.responseBody`, `ctx.response`, or `ctx.payload.response` in that command.

6. Plugin bus: pass data between plugins

The plugin bus is the shared lane for plugin-to-plugin data. Use it when another plugin, request interpolation, or the inspector should be able to see an output.

commands: {
  "authTools.publishToken": function(ctx) {
    return {
      __action: "multi",
      actions: [
        { __action: "pluginBus.output", name: "auth.token", value: "abc123" },
        { __action: "pluginBus.publish", channel: "auth.token.changed", data: { source: "authTools" } }
      ]
    };
  },

  "authTools.useToken": function(ctx) {
    var token = ctx.bus.input("auth.token", "");
    return { __action: "setFields", fields: { "activeRequest.headers": { "Authorization": "Bearer " + token } } };
  }
}

Private bus names start with `_` or contain `.private.`, `:private:`, or `/private/`. Use clear public names like `auth.token`, `customer.selected`, `response.cleaned`, or `pluginId.outputName`.