Code Block

<mcp-code-block>

Code block component with copy button and optional line numbers. Optimized for AI chat interfaces.

AIWeb Component

Overview

Code block component with copy button and optional line numbers. Optimized for AI chat interfaces.

Loading components...

javascript

// Import all components (recommended)
import '@mcpsystem/ui';

// Or import the class for TypeScript
import { McpCodeBlock } from '@mcpsystem/ui';

html

<mcp-code-block language="javascript">
const greeting = "Hello, World!";
</mcp-code-block>

Property	Attribute	Type	Default	Description
`language`	`language`	`string`	-	Programming language for header display
`filename`	`filename`	`string`	-	Optional filename to display in header
`showLineNumbers`	`show-line-numbers`	`boolean`	`false`	Whether to show line numbers
`code`	`code`	`string`	-	Code content (alternative to slot)

Slot	Description
`(default)`	Code content (plain text)

Event	Detail	Description
`mcp-copy`	`{ code: string }`	Fired when code is copied to clipboard

Style internal elements using ::part() selector.

Part	Description
`::part(container)`	The outer container
`::part(header)`	The header with language/filename
`::part(code)`	The code element
`::part(copy-button)`	The copy button
`::part(line-numbers)`	The line numbers gutter

Customize appearance by setting these CSS variables.

Preview

Loading components...

html

<mcp-code-block language="javascript">
const greeting = "Hello, World!";
</mcp-code-block>

Preview

Loading components...

html

<mcp-code-block language="python" show-line-numbers>
    return "Hello, World!"
</mcp-code-block>