Deprecated: This component is deprecated. Use CodeBlock instead, which provides additional features like variant support and line highlighting.

AI Code Block

AI
Deprecated

Syntax-highlighted code display with copy and run actions. Designed for AI-generated code snippets with line numbers, language badges, and interactive controls.

Preview

Interactive code display with actions

Counter.jsxjavascript
1import { useState } from 'react';
2 
3function Counter() {
4  const [count, setCount] = useState(0);
5 
6  return (
7    <button onClick={() => setCount(c => c + 1)}>
8      Count: {count}
9    </button>
10  );
11}

Different Languages

Display code in various programming languages

fibonacci.pypython
1def fibonacci(n):
2    if n <= 1:
3        return n
4    return fibonacci(n-1) + fibonacci(n-2)
5 
6# Calculate first 10 numbers
7for i in range(10):
8    print(fibonacci(i))
api.tstypescript
1interface User {
2  id: string
3  name: string
4  email: string
5}
6 
7async function fetchUser(id: string): Promise<User> {
8  const response = await fetch(`/api/users/${id}`)
9  return response.json()
10}

Without Line Numbers

Clean display for shorter snippets

hello.jsjavascript
console.log('Hello, World!')

Without Actions

Read-only code display

terminalbash
1npm install @eidetic/ui

Props

AICodeBlock component API reference

PropTypeDefaultDescription
codestring'(demo counter code)'The code to display
languagestring'javascript'Programming language for display badge
filenamestring'Counter.jsx'Filename to show in the header
showLineNumbersbooleantrueShow line numbers on the left side
showCopyButtonbooleantrueShow the copy to clipboard button
showRunButtonbooleantrueShow the run code button
onCopy(code: string) => void—Callback when copy is clicked. Falls back to clipboard API if not provided.
onRun(code: string) => void—Callback when run button is clicked
classNamestring—Additional CSS classes for the container

Usage

Import and implementation example

import { AICodeBlock } from '@/blocks/ai-tools/ai-code-block'

export default function Example() {
  return (
    <AICodeBlock
      code={`function hello() {
  console.log('Hello, world!')
}`}
      language="javascript"
      filename="hello.js"
      onCopy={(code) => console.log('Copied:', code)}
      onRun={(code) => console.log('Running:', code)}
    />
  )
}

Features

Built-in functionality

  • Dark theme display: Consistent code highlighting with dark background for readability
  • Copy to clipboard: One-click copy with visual "Copied!" feedback
  • Run action: Optional button to execute code with callback
  • Line numbers: Toggleable line numbering for reference
  • Language badge: Shows programming language and filename in header
  • Horizontal scroll: Preserves formatting for long lines without wrapping
  • Custom callbacks: Handle copy and run actions with your own logic

Accessibility

Accessibility considerations

ARIA Attributes

Semantic pre and code elements for code blocksButtons have visible text labels (Copy, Run)Copied state provides immediate visual feedback

Keyboard Navigation

KeyAction
TabNavigate between Copy and Run buttons
Enter / SpaceActivate the focused button

Notes

  • High contrast text on dark background for readability
  • Line numbers use select-none to prevent accidental selection
  • Copy confirmation is visible for 2 seconds
  • Consider providing alternative text description of code purpose for screen reader users

Related Components

AI Chat MessageAI Streaming TextCode Block