Chat - Echo adapter

Echo user messages back through the chat runtime to prototype UI without a backend.

Echoing user messages

The adapter below echoes whatever you type after the default 400 ms simulated network delay. The reply arrives as a single text chunk once the delay elapses — the Echo adapter doesn't simulate token-by-token streaming. For real streamed output, swap in createAiSdkAdapter.

Echo

Assistant

Type anything — I echo it back with a small delay.

Edit code

'use client';
import { ChatBox } from '@mui/x-chat';
import { createEchoAdapter } from '@mui/x-chat/headless';

const CONVERSATION_ID = 'echo-demo';

const initialConversations = [{ id: CONVERSATION_ID, title: 'Echo' }];

const initialMessages = [
  {
    id: 'welcome',
    conversationId: CONVERSATION_ID,
    role: 'assistant' as const,
    status: 'sent' as const,
    parts: [
      {
        type: 'text' as const,
        text: 'Type anything — I echo it back with a small delay.',
      },
    ],
  },
];

const adapter = createEchoAdapter({
  respond: (text) => `You typed: "${text || 'nothing'}".`,
});

export default function EchoAdapterDemo() {
  return (
    <ChatBox
      adapter={adapter}
      initialActiveConversationId={CONVERSATION_ID}
      initialConversations={initialConversations}
      initialMessages={initialMessages}
      sx={{
        height: 500,
        border: '1px solid',
        borderColor: 'divider',
        borderRadius: 1,
      }}
    />
  );
}

'use client';
import { ChatBox } from '@mui/x-chat';
import { createEchoAdapter } from '@mui/x-chat/headless';

const CONVERSATION_ID = 'echo-demo';

const initialConversations = [{ id: CONVERSATION_ID, title: 'Echo' }];

const initialMessages = [
  {
    id: 'welcome',
    conversationId: CONVERSATION_ID,
    role: 'assistant' as const,
    status: 'sent' as const,
    parts: [
      {
        type: 'text' as const,
        text: 'Type anything — I echo it back with a small delay.',
      },
    ],
  },
];

const adapter = createEchoAdapter({
  respond: (text) => `You typed: "${text || 'nothing'}".`,
});

export default function EchoAdapterDemo() {
  return (
    <ChatBox
      adapter={adapter}
      initialActiveConversationId={CONVERSATION_ID}
      initialConversations={initialConversations}
      initialMessages={initialMessages}
      sx={{
        height: 500,
        border: '1px solid',
        borderColor: 'divider',
        borderRadius: 1,
      }}
    />
  );
}

Press Enter to start editing

Usage

Use respond to set the reply text and delayMs to control the response delay:

import { createEchoAdapter } from '@mui/x-chat/headless';

const adapter = createEchoAdapter({
  respond: (text) => `Mock reply for: ${text}`,
  delayMs: 200,
});

Canned replies

Return different replies based on the input to script deterministic flows for demos and tests:

Canned replies

Assistant

Try asking about "pricing" or "support".

Edit code

<ChatBox
  adapter={adapter}
  initialActiveConversationId={CONVERSATION_ID}
  initialConversations={initialConversations}
  initialMessages={initialMessages}
  sx={{
    height: 500,
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 1,
  }}
/>

<ChatBox
  adapter={adapter}
  initialActiveConversationId={CONVERSATION_ID}
  initialConversations={initialConversations}
  initialMessages={initialMessages}
  sx={{
    height: 500,
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 1,
  }}
/>

Press Enter to start editing

Options

createEchoAdapter() returns a complete ChatAdapter, so it plugs into the same adapter prop as any production adapter.

Option	Type	Default	Description
`respond`	`(text: string) => string`	`text => 'You said: "…". Replace this demo adapter with your own API call.'`	Builds the assistant reply from the user's text.
`delayMs`	`number`	`400`	Milliseconds to wait before emitting the reply. Simulates network/model latency so the UI doesn't feel jarringly instant.

Cancellation: the adapter honors the abort signal passed to sendMessage(). Calling stopStreaming() from the useChat hook — or switching conversations — while the simulated delay is pending closes the stream without emitting a reply. See Streaming for the cancellation lifecycle.

When to use it

Prototyping: get a chat surface running before any backend exists, so you can iterate on layout, theming, and message rendering.
Smoke tests: drive <ChatBox> through full send/receive cycles in your test suite without a real LLM.
Demos and Storybook: ship examples that run anywhere — no API keys, no network, identical output every run.

Swap to a real adapter (for example createAiSdkAdapter) when you're ready to wire a backend.

Chat - Echo adapter

Echoing user messages

Usage

Canned replies

Options

When to use it

See also