### Install AI Elements CLI

Source: https://elements.ai-sdk.dev/docs

Use the AI Elements CLI for the fastest setup of the component library.

```bash
npx ai-elements install
```

--------------------------------

### Install Dependencies

Source: https://elements.ai-sdk.dev/docs/how-to-contribute

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Composability Example

Source: https://elements.ai-sdk.dev/docs/philosophy

Demonstrates how components can be composed to build complex UI structures. This example shows an assistant message with text content and an action button.

```tsx
<Message from="assistant">
  <MessageContent>
    <MessageResponse>{text}</MessageResponse>
  </MessageContent>
  <MessageActions>
    <MessageAction label="Copy" onClick={handleCopy}>
      <CopyIcon />
    </MessageAction>
  </MessageActions>
</Message>
```

--------------------------------

### Install AI Elements CLI (npm)

Source: https://elements.ai-sdk.dev/docs/benefits

Use the npm command to add the message component to your project. This installs only the necessary files directly into your codebase.

```bash
npx ai-elements@latest add message
```

--------------------------------

### Install AI Elements CLI (pnpm)

Source: https://elements.ai-sdk.dev/docs/benefits

Use the pnpm command to add the message component to your project. This installs only the necessary files directly into your codebase.

```bash
pnpm dlx ai-elements@latest add message
```

--------------------------------

### Install AI Elements CLI (bun)

Source: https://elements.ai-sdk.dev/docs/benefits

Use the bun command to add the message component to your project. This installs only the necessary files directly into your codebase.

```bash
bun x ai-elements@latest add message
```

--------------------------------

### Install AI Elements CLI (yarn)

Source: https://elements.ai-sdk.dev/docs/benefits

Use the yarn command to add the message component to your project. This installs only the necessary files directly into your codebase.

```bash
yarn dlx ai-elements@latest add message
```

--------------------------------

### Install AI Elements via shadcn/ui CLI

Source: https://elements.ai-sdk.dev/docs

Integrate AI Elements using the standard shadcn/ui CLI if you are already using its workflow.

```bash
npx shadcn-ui add ai-elements
```

--------------------------------

### Verify AI Elements Installation

Source: https://elements.ai-sdk.dev/docs/setup

Import and use the 'Message' component in a page to verify the installation. Ensure the component file exists in your components directory.

```tsx
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";

export default function Page() {
  return (
    <Message from="assistant">
      <MessageContent>
        <MessageResponse>Hello, world!</MessageResponse>
      </MessageContent>
    </Message>
  );
}
```

--------------------------------

### Install AI Elements using shadcn CLI with bun

Source: https://elements.ai-sdk.dev/docs/setup

Alternatively, use the shadcn CLI to add AI Elements components. This command installs the '@ai-elements/message' package using bun.

```bash
bun x shadcn@latest add @ai-elements/message
```

--------------------------------

### Install AI Elements Skill

Source: https://elements.ai-sdk.dev/docs/skill

Install the AI Elements skill using the skills CLI. This command adds procedural knowledge about AI Elements to your AI coding agent.

```bash
npx skills add vercel/ai-elements
```

--------------------------------

### Install AI Elements using shadcn CLI with npm

Source: https://elements.ai-sdk.dev/docs/setup

Alternatively, use the shadcn CLI to add AI Elements components. This command installs the '@ai-elements/message' package using npm.

```bash
npx shadcn@latest add @ai-elements/message
```

--------------------------------

### Install AI Elements using shadcn CLI with pnpm

Source: https://elements.ai-sdk.dev/docs/setup

Alternatively, use the shadcn CLI to add AI Elements components. This command installs the '@ai-elements/message' package using pnpm.

```bash
pnpm dlx shadcn@latest add @ai-elements/message
```

--------------------------------

### Install AI Elements using shadcn CLI with yarn

Source: https://elements.ai-sdk.dev/docs/setup

Alternatively, use the shadcn CLI to add AI Elements components. This command installs the '@ai-elements/message' package using yarn.

```bash
yarn dlx shadcn@latest add @ai-elements/message
```

--------------------------------

### Compose AI Chat UI Components

Source: https://elements.ai-sdk.dev/docs/benefits

Use `Message`, `MessageContent`, and `MessageResponse` to build custom chat interfaces. This example shows a basic assistant message structure.

```tsx
<Message from="assistant">
  <MessageContent>
    <MessageResponse>{text}</MessageResponse>
  </MessageContent>
</Message>
```

--------------------------------

### Customize Message Component Styling in React

Source: https://elements.ai-sdk.dev/docs/usage

Modify the Message component's appearance by directly editing its source file. This example shows how to remove default rounded styling by adjusting Tailwind CSS classes.

```tsx
export const MessageContent = ({
  children,
  className,
  ...props
}: MessageContentProps) => (
  <div
    className={cn(
      "flex flex-col gap-2 text-sm text-foreground",
      "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:px-4 group-[.is-user]:py-3",
      className
    )}
    {...props}
  >
    <div className="is-user:dark">{children}</div>
  </div>
);
```

--------------------------------

### Run Tests and Linting

Source: https://elements.ai-sdk.dev/docs/how-to-contribute

Ensure your changes pass tests and linting checks before submitting.

```bash
pnpm test
pnpm run check
```

--------------------------------

### Clone AI Elements Repository

Source: https://elements.ai-sdk.dev/docs/how-to-contribute

Clone your fork of the AI Elements repository to your local machine.

```bash
git clone https://github.com/your_username_here/ai-elements.git
```

--------------------------------

### Set AI Gateway API Key

Source: https://elements.ai-sdk.dev/docs/vercel-ai-frontend

Add the AI_GATEWAY_API_KEY to your .env.local file to configure AI Gateway.

```bash
AI_GATEWAY_API_KEY=your_api_key_here
```

--------------------------------

### Create a New Branch

Source: https://elements.ai-sdk.dev/docs/how-to-contribute

Create a new branch for your feature or fix.

```bash
git checkout -b feature/your_feature_name_here
```

--------------------------------

### Composable vs. Monolithic Component Design

Source: https://elements.ai-sdk.dev/docs/new-components

Demonstrates the preferred composable structure for AI Elements components, emphasizing building from smaller pieces over monolithic designs.

```tsx
// Good: Composable
<Message from="assistant">
  <MessageContent>
    <MessageResponse>{text}</MessageResponse>
  </MessageContent>
</Message>

// Avoid: Monolithic
<Message from="assistant" content={text} />
```

--------------------------------

### Update AI Elements CLI

Source: https://elements.ai-sdk.dev/docs/troubleshooting

Run this command to ensure you are using the latest version of the AI Elements CLI. This can resolve issues where the CLI did not add expected files to your project.

```bash
npx ai-elements@latest
```

--------------------------------

### Configure tsconfig.json Paths Alias

Source: https://elements.ai-sdk.dev/docs/troubleshooting

Ensure your tsconfig.json has a proper paths alias for `@/`. This is necessary for component imports to resolve correctly and avoid "module not found" errors.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

--------------------------------

### AI SDK Server Route for Chat

Source: https://elements.ai-sdk.dev/docs/vercel-ai-frontend

Implement a server-side API route using the AI SDK's streamText function to handle chat messages and stream responses.

```ts
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "anthropic/claude-sonnet-4.5",
    system: "You are a helpful assistant.",
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

```

--------------------------------

### AI SDK Chat Hook

Source: https://elements.ai-sdk.dev/docs/vercel-ai-frontend

Use the useChat hook from the AI SDK for client-side chat functionality. It requires a DefaultChatTransport configured with an API endpoint.

```tsx
"use client";

import { useChat } from "@ai-sdk/react";

function Chat() {
  const [text, setText] = useState("");
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/chat",
    }),
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    sendMessage({ text: text });
    setText("");
  };

  return (
    <form onSubmit={handleSubmit}>
      {messages.map((m) => (
        <div key={m.id}>{m.content}</div>
      ))}
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </form>
  );
}

```

--------------------------------

### Use AI Elements Message Component in React

Source: https://elements.ai-sdk.dev/docs/usage

Import and render the Message component from AI Elements, composing it with MessageContent and MessageResponse. This demonstrates basic usage within a chat interface.

```tsx
"use client";

import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import { useChat } from "@ai-sdk/react";

const Example = () => {
  const { messages } = useChat();

  return (
    <>
      {messages.map(({ role, parts }, index) => (
        <Message from={role} key={index}>
          <MessageContent>
            {parts.map((part, i) => {
              switch (part.type) {
                case "text":
                  return (
                    <MessageResponse key={`${role}-${i}`}>
                      {part.text}
                    </MessageResponse>
                  );
              }
            })}
          </MessageContent>
        </Message>
      ))}
    </>
  );
};

export default Example;
```

--------------------------------

### Chat Page Integration with useChat Hook

Source: https://elements.ai-sdk.dev/docs/vercel-ai-frontend

This component uses the `useChat` hook from `@ai-sdk/react` to manage chat messages and sending them to the API. It integrates with AI Elements UI components for rendering the conversation and input.

```tsx
"use client";

import { useChat } from "@ai-sdk/react";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputProvider,
  PromptInputSubmit,
  PromptInputTextarea,
} from "@/components/ai-elements/prompt-input";

export default function ChatPage() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/chat",
    }),
  });

  const handleSubmit = (message: { text: string }) => {
    sendMessage({ text: message.text });
  };

  return (
    <div className="h-screen flex flex-col">
      <Conversation className="flex-1">
        <ConversationContent>
          {messages.map((message) => (
            <Message key={message.id} from={message.role}>
              <MessageContent>
                {message.parts.map((part, i) =>
                  part.type === "text" ? (
                    <MessageResponse key={i}>{part.text}</MessageResponse>
                  ) : null
                )}
              </MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>

      <PromptInputProvider>
        <PromptInput onSubmit={handleSubmit} className="p-4">
          <PromptInputBody>
            <PromptInputTextarea placeholder="Type a message..." />
          </PromptInputBody>
          <PromptInputFooter>
            <PromptInputSubmit status={status} />
          </PromptInputFooter>
        </PromptInput>
      </PromptInputProvider>
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.