Chapter 5: Add Working Context

ACME Banking now has a running assistant, but it still needs one more thing before it can be useful in a customer service workflow: awareness of what the advisor is doing.

When an advisor opens the client-management workspace and selects a client, the supporting apps already write the selected client to the workspace context. Working Context lets io.Assist track that workspace context and pass it to the agent automatically. Instead of asking the advisor to repeat the client name, the assistant can answer questions such as "who is my client" by using the selected client from the current workspace.

In this chapter, you will configure Working Context in both assistant apps:

Angular io-assist-angular
React io-assist-react

You can update either implementation, or both if you are comparing the framework integrations.

important

Working Context can also be configured in MCP Web. That approach exposes the current context snapshot as a system tool, and it is useful when you can't extend the assistant app directly.

In this guide, you will configure Working Context in the io.Assist apps for reliability. If Working Context is available only as an MCP tool, the LLM must decide to call that tool before it can use the current context. That choice can be inconsistent. When Working Context is configured in the assistant, io.Assist sends a fresh context snapshot with every request to the backend, so the agent always receives the selected client context alongside the user's message.

Working Context is the main library introduced in this chapter:

Why Working Context Matters

An AI assistant becomes much more valuable when it understands the user's current business situation.

Without Working Context, the assistant sees only the chat message:

who is my client

With Working Context, the assistant also receives structured context from io.Connect:

{
  "selectedClient": {
    "description": "The ACME Banking client currently selected in the workspace.",
    "value": {
      "id": "CL-10031",
      "portfolioId": "PF-8817",
      "firstName": "Daniel",
      "lastName": "Kovacs",
      "fullName": "Daniel Kovacs",
      "segment": "Wealth",
      "advisor": "S. Ivanova",
      "riskProfile": "Growth"
    }
  }
}

This changes the assistant from a generic chat surface into a workspace-aware assistant. It can understand the selected client, refer to the client's metadata, and combine that context with tools exposed through MCP Web.

Install Working Context

From the frontend package root:

cd io-assist-anywhere-start

Install Working Context in the root package:

npm install --save-dev @interopio/working-context

The frontend package already has @interopio/workspaces-api at the root because the platform and browser client apps use io.Connect Workspaces. In this chapter, the assistant apps will use that same shared dependency.

After installation, the root package.json should include Working Context:

package.json
{
  "devDependencies": {
    "@interopio/working-context": "^1.1.1",
    "@interopio/workspaces-api": "^4.4.0"
  }
}

Your file will contain the rest of the existing dependencies too.

Angular Implementation

Open:

apps/io-assist-angular/src/app/app.config.ts

Add the Working Context and Workspaces imports:

apps/io-assist-angular/src/app/app.config.ts
import { IoIntelWorkingContextFactory } from "@interopio/working-context";
import IOWorkspaces from "@interopio/workspaces-api";

Add a Working Context schema below AGENT_SERVER_URL:

apps/io-assist-angular/src/app/app.config.ts
const WORKING_CONTEXT_CONFIG = {
    schema: {
        selectedClient: {
            type: "object",
            description: "The ACME Banking client currently selected in the workspace.",
            source: {
                context: {
                    location: { workspace: { target: "my" } },
                    path: "selectedClient",
                },
            },
        },
    },
} as const;

This schema tells Working Context to read the selectedClient property from the assistant's current workspace context. The target: "my" value is important: it means the assistant tracks the workspace that contains the assistant window.

Update the provideIoAssist() configuration:

apps/io-assist-angular/src/app/app.config.ts
export const appConfig: ApplicationConfig = {
    providers: [
        provideBrowserGlobalErrorListeners(),
        provideIoAssist({
            connectConfig: {
                browser: {
                    factory: IOBrowser,
                    config: {
                        libraries: [IOWorkspaces],
                        modals: {
                            dialogs: {
                                enabled: true,
                            },
                        },
                    },
                },
            },
            defaultAgentName: "io-agent",
            workingContext: {
                factory: IoIntelWorkingContextFactory,
                config: WORKING_CONTEXT_CONFIG,
            },
            aiWebConfig: {
                agentServer: {
                    baseUrl: AGENT_SERVER_URL,
                },
                mcp: {
                    clientsConfig: {
                        enforceStrictCapabilities: false,
                        capabilities: {},
                    },
                    ioIntel: {
                        web: {
                            enabled: true,
                        },
                    },
                },
            },
        }),
    ],
};

The Angular assistant can now initialize io.Connect Browser with the Workspaces library and pass a Working Context instance to io.Assist.

React Implementation

Open:

apps/io-assist-react/src/App.tsx

Add the Working Context and Workspaces imports:

apps/io-assist-react/src/App.tsx
import { IoIntelWorkingContextFactory } from '@interopio/working-context'
import IOWorkspaces from '@interopio/workspaces-api'

Add a Working Context schema below AGENT_SERVER_URL:

apps/io-assist-react/src/App.tsx
const workingContextConfig = {
  schema: {
    selectedClient: {
      type: 'object',
      description: 'The ACME Banking client currently selected in the workspace.',
      source: {
        context: {
          location: { workspace: { target: 'my' } },
          path: 'selectedClient',
        },
      },
    },
  },
} as const

Update the static assistant configuration:

apps/io-assist-react/src/App.tsx
const staticConfig: IoAssistStaticConfig = {
  connectConfig: {
    browser: {
      factory: IOBrowser,
      config: {
        libraries: [IOWorkspaces],
        modals: {
          dialogs: {
            enabled: true,
          },
        },
      },
    },
  },
  defaultAgentName: 'io-agent',
  workingContext: {
    factory: IoIntelWorkingContextFactory,
    config: workingContextConfig,
  },
  aiWebConfig: {
    agentServer: {
      baseUrl: AGENT_SERVER_URL,
    },
    mcp: {
      clientsConfig: {
        enforceStrictCapabilities: false,
        capabilities: {},
      },
      ioIntel: {
        web: {
          enabled: true,
        },
      },
    },
  },
}

The React assistant now uses the same Working Context configuration as the Angular assistant.

What The New Configuration Does

Property	Why it is needed
`connectConfig.browser.config.libraries`	Adds `IOWorkspaces` to the io.Connect Browser initialization. Without the Workspaces API, the assistant cannot read the workspace context that contains the selected client.
`workingContext.factory`	Provides the Working Context factory that io.Assist uses to create a context collector for the assistant app.
`workingContext.config`	Defines which context properties the assistant should collect. In this guide, it tracks only `selectedClient` to keep the example focused.
`schema.selectedClient.type`	Declares that `selectedClient` is an object. The selected client contains multiple fields such as `id`, `portfolioId`, `fullName`, `segment`, and `riskProfile`.
`schema.selectedClient.description`	Gives the agent a human-readable explanation of the context property. This helps the agent understand what the value represents.
`source.context.location.workspace.target`	Points Working Context at the assistant's current workspace. Using `"my"` keeps the assistant scoped to the workspace where it is running.
`source.context.path`	Reads the `selectedClient` property from the workspace context. This matches the value written by the Client List app.

The important flow is:

The advisor selects a client in the Client List app.
The Client List app writes selectedClient to the workspace context.
The assistant tracks that workspace context through Working Context.
io.Assist includes the tracked context in the conversation with the backend.
The agent can answer questions using the selected client without the advisor repeating that information.

Build The Assistant Apps

Build the Angular assistant:

npm run build --workspace io-assist-angular

Build the React assistant:

npm run build --workspace io-assist-react

You may see framework bundling warnings about CommonJS dependencies or large chunks. Those warnings are acceptable for this guide as long as the builds complete successfully.

Run The Full Local System

Start the backend in one terminal:

cd agentic-backend
npm start

Start the frontend package in another terminal:

cd io-assist-anywhere-start
npm start

Open the platform:

http://localhost:4200

Load the client-management workspace from the Launchpad. The workspace opens the Client List and Client Portfolio apps.

Verify Working Context

Select a client in the Client List app. For example, select Daniel Kovacs.

Then launch either io-assist-angular or io-assist-react from the platform and send this message:

who is my client

The assistant should answer with information about the selected client. It should understand that "my client" refers to the client selected in the client-management workspace.

This test requires io.Assist to be running inside the same workspace as the selected client. In this guide, Working Context is configured to read from the workspace that contains the io.Assist window. If io.Assist is opened as a standalone window, it won't have a current workspace context, so "who is my client" won't have a selected client to use.

You can also click View Context in the assistant UI. The Working Context panel should include a selectedClient property with the selected client's metadata.

At this point, ACME Banking's assistant is connected to the platform, the backend, MCP Web, and the user's current workspace context. In the next chapters, you will use that context to make the assistant take more useful actions.

Related API References​

Why Working Context Matters​

Install Working Context​

Angular Implementation​

React Implementation​

What The New Configuration Does​

Build The Assistant Apps​

Run The Full Local System​

Verify Working Context​

Related API References