AI Chat Image Generation

AI chats 1.1K

About

Simulates an AI Chat generating and image

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Chat Image Generation to your project and fits it to your theme.

Code

How AI Chat Image Generation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ImageGeneration } from "@/components/ui/ai-chat-image-generation-1";

function ImageGenerationDemo() {
  return (
    <div className="w-full min-h-dvh flex justify-center items-center">
      <ImageGeneration>
        <img
          className="aspect-video max-w-md object-cover"
          src="https://cdn.21st.dev/assets/localized/c1be920a389fc6ea706483c9efb7e52a002a4b93d0241c0140dd7bfa65447dad.png"
          alt="21st og generation"
        />
      </ImageGeneration>
    </div>
  );
}

export default ImageGenerationDemo;