Browser Compatibility

​

What Works in Browser

​

What’s Node-only

​

Request Context in the Browser

• A request keeps its turn until it returns and everything it started has unwound. Background jobs, workflows and tasks take a turn of their own after the request that started them.
• A request that waits on its client (an elicitation answer, a roots/list reply, the elicitation fallback) steps aside while it waits, so the client can call the server before answering.
• Concurrent calls inside one request (a tool that starts two tool calls with Promise.all) cannot be told apart once they overlap. They are refused with AsyncContextOverlapError instead of reading each other’s context. Run such calls one after another.
• A workflow runs its ready steps one at a time, whatever its maxConcurrency: steps running at once would overlap in the workflow’s turn. Each step runs once, and the workflow takes about the sum of its steps.
• A tool must not call its own server through a DirectClient or DirectMcpServer; it would wait for its own turn. Call other tools through this.scope flows instead. A request that waits more than 10 seconds for its turn logs a warning that says so.
• Timers and promises a tool starts without awaiting run in whichever request holds the turn, so they must not read request context.

​

Key Persistence in Browser

import { createKeyPersistence } from '@frontmcp/utils';

// Auto-detect best backend
const store = createKeyPersistence();

// Explicit backend
const indexedDbStore = createKeyPersistence({ type: 'indexeddb' });
const localStorageStore = createKeyPersistence({ type: 'localstorage' });

​

Storage Adapters in Browser

import { IndexedDBStorageAdapter, LocalStorageAdapter, MemoryStorageAdapter } from '@frontmcp/utils';

// IndexedDB — best for structured data, large values
const idb = new IndexedDBStorageAdapter({ dbName: 'my-app', storeName: 'state' });

// localStorage — simpler, synchronous-friendly
const ls = new LocalStorageAdapter({ prefix: 'my-app:' });

// Memory — ephemeral, works everywhere
const mem = new MemoryStorageAdapter();

​

Agent LLM Adapters in Browser

import { OpenAIAdapter, AnthropicAdapter } from '@frontmcp/sdk';

// OpenAI — requires `npm install openai`
const openai = new OpenAIAdapter({
  model: 'gpt-4o',
  apiKey: 'sk-...',
});

// Anthropic — requires `npm install @anthropic-ai/sdk`
const anthropic = new AnthropicAdapter({
  model: 'claude-sonnet-4-20250514',
  apiKey: 'sk-ant-...',
});

​

ESM Dynamic Loading in Browser

• Cache: Memory-only (no disk persistence). Bundles are stored in an in-memory Map.
• Module evaluation: Bundles are evaluated via Blob + URL.createObjectURL instead of writing to the file system.
• Same API: No code changes needed — the environment is auto-detected.

​

Crypto Operations

import {
  sha256Hex,
  generateCodeVerifier,
  generateCodeChallenge,
  encryptAesGcm,
  decryptAesGcm,
  randomBytes,
  randomUUID,
  base64urlEncode,
  base64urlDecode,
} from '@frontmcp/utils';

// All of these work identically in both environments
const hash = await sha256Hex('data');
const verifier = generateCodeVerifier();
const challenge = await generateCodeChallenge(verifier);