Generative UI Chat

Installation

Architecture

Standard chat interfaces pass strings or markdown. With modern LLMs utilizing "Tool Calling" or structured JSON outputs (like Vercel AI SDK), we can instead pass fully interactive React Components (often called Artifacts) directly into the chat flow.

This container allows the content of a message to be a React.ReactNode. It handles auto-scrolling, spring animations for new bubbles, disabled states, and glowing inputs out of the box.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GenerativeUiChat } from "@/components/creative/generative-ui-chat";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GenerativeUiChat } from "@/components/creative/generative-ui-chat";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GenerativeUiChat
      />
    </div>
  );
}