Skip to main content

Chapter 7: Add Code Mode

The assistant can now find ACME Banking clients, discover applications and workspaces, and open the right workflow. Each of those steps is currently a separate tool call: the agent calls a tool, reads the full result, decides on the next call, and repeats. As requests grow to several dependent steps, those round trips and intermediate results add up.

LLMs are good at writing code, and Code Mode puts that to work. Instead of calling tools one at a time, the agent writes a short JavaScript program that calls the tools it needs, uses one result to choose the next call, and returns only the information needed for the answer. Code Mode runs that program in an isolated WebAssembly sandbox that can reach only the tools AI Web registered. In this chapter, you will enable Code Mode in AI Web, inside either or both io.Assist apps, so the agent can orchestrate the tools from the connected MCP Web server through code.

Install Code Mode​

From the frontend package root, install the Code Mode library:

cd io-assist-anywhere-start
npm install --save-dev @interopio/code-mode

Code Mode runs the agent's JavaScript in a separate WebAssembly environment. The browser must be able to load its WASM file. Copy node_modules/@interopio/code-mode/dist/emscripten-module.wasm into apps/io-assist-angular/public/quickjs/ and apps/io-assist-react/public/quickjs/ for whichever assistant apps you use. Create the quickjs directory if it does not exist. Each app should serve the file at /quickjs/emscripten-module.wasm.

The Code Mode package version and WASM file must stay in sync. When updating the package, copy the asset again before building or deploying the apps.

Angular Implementation​

Open apps/io-assist-angular/src/app/app.config.ts. Add the browser factory import:

apps/io-assist-angular/src/app/app.config.ts
import { IoCodeModeFactory } from "@interopio/code-mode/browser";

Add codeMode alongside the existing agentServer and mcp entries in aiWebConfig. Keep those existing entries unchanged:

apps/io-assist-angular/src/app/app.config.ts
codeMode: {
  factory: IoCodeModeFactory,
  config: {
    wasmLocation: "/quickjs/emscripten-module.wasm",
    },
},

React Implementation​

Open apps/io-assist-react/src/App.tsx and add the same browser factory import:

apps/io-assist-react/src/App.tsx
import { IoCodeModeFactory } from "@interopio/code-mode/browser";

Add codeMode inside staticConfig.aiWebConfig, next to the existing agentServer and mcp entries. Keep those entries unchanged:

apps/io-assist-react/src/App.tsx
codeMode: {
  factory: IoCodeModeFactory,
  config: {
    wasmLocation: '/quickjs/emscripten-module.wasm',
  },
},

You can configure just one assistant app if you are following only the Angular or React path. Do not also enable server-side Code Mode on the MCP Web server: AI Web already owns the combined tool catalog for this client.

Try a Multi-Tool Request​

Start the backend from agentic-backend with npm start, then start the frontend from io-assist-anywhere-start with npm start. Open http://localhost:4200 and launch the assistant app you updated.

Ask:

Find Amelia Reed and open the client-management workspace with her portfolio selected.

The agent should look up the tools it needs, then write a program that finds the client through get_clients, locates the relevant workspace, and opens it with Amelia's client context. Code Mode runs that program in the sandbox, so intermediate results stay inside the program instead of going back to the agent. The exact sequence depends on the agent and available tools; confirm the workspace opens with the right client rather than expecting a particular tool-call transcript.

If Code Mode cannot start, check that the WASM file is available at /quickjs/emscripten-module.wasm in the assistant app you opened. If the assistant cannot find the workspace, verify the application and workspace descriptions added in Chapter 6.

Code running in the sandbox can call ordinary tools, but tools that display an interactive UI still need to reach io.Assist directly. In the next chapter, you will enable MCP Apps so the advisor can preview a workspace before restoring it.