Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Chat - Code block

Display code blocks with a language label and copy-to-clipboard button in the chat.

  • Automatic rendering—ChatBox renders code fences from markdown as ChatCodeBlock automatically. No extra config needed.
  • Language label—the language specified in the code fence (for example, ```python) appears in the header bar.
  • Copy button—clicking copies the raw code string to the clipboard and shows a check mark for 2 seconds.
  • Custom highlighter—the standalone section below the chat shows the highlighter prop with a minimal Python keyword colorizer (no library required).
Material UI chat

Styled with your active MUI theme

You
You

Write me a Python function to flatten a nested list.

MUI Assistant
MUI Assistant

Here's a recursive Python function that flattens a nested list:

python
def flatten(lst):
    result = []
    for item in lst:
        if isinstance(item, list):
            result.extend(flatten(item))
        else:
            result.append(item)
    return result

It works by iterating over each item — if the item is itself a list it recurses, otherwise it appends the value directly.

Standalone with custom highlighter
python
def flatten(lst):
    result = []
    for item in lst:
        if isinstance(item, list):
            result.extend(flatten(item))
        else:
            result.append(item)
    return result

Using ChatCodeBlock as a standalone component

Use ChatCodeBlock as a standalone component by passing children (the code string) and an optional language:

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

<ChatCodeBlock language="typescript">
  {`const greet = (name: string) => \`Hello, \${name}!\`;`}
</ChatCodeBlock>;

Custom labels

Set language to any string—it appears as-is in the header:

<ChatCodeBlock language="bash">{`pnpm add @mui/x-chat`}</ChatCodeBlock>

Syntax highlighting

ChatCodeBlock intentionally does not bundle a syntax-highlighting library. Pass a highlighter function to integrate your preferred library (Shiki, Prism, highlight.js, and so on):

import { ChatCodeBlock } from '@mui/x-chat';
import { codeToHtml } from 'shiki';

function ShikiBlock({ code, language }) {
  const [html, setHtml] = React.useState('');

  React.useEffect(() => {
    codeToHtml(code, { lang: language, theme: 'github-light' }).then(setHtml);
  }, [code, language]);

  return (
    <ChatCodeBlock
      language={language}
      highlighter={() => <span dangerouslySetInnerHTML={{ __html: html }} />}
    >
      {code}
    </ChatCodeBlock>
  );
}

Automatic rendering in chat

When using ChatBox, any code fence in a markdown assistant message is automatically rendered as a ChatCodeBlock. This requires no additional configuration—the renderMarkdown() function used internally by ChatMessageContent emits ChatCodeBlock for every code fence it encounters.

To customize the rendering further, override partProps.text.renderText on ChatMessageContent.

API