AI Code Block

AI
Code

Syntax-highlighted code with copy and run actions

Interactive Preview

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}

Features

  • Dark theme code display
  • Copy to clipboard with feedback
  • Run code action button
  • Line numbers
  • Language badge and filename
  • Horizontal scroll for long lines

Installation

Syntax-highlighted code block component for AI-generated code snippets.

// Import from component library
import { AICodeBlock } from '@/components/ai'