{
  "markdown": "# ▲ AI Elements\n\n[AI Elements](https://elements.ai-sdk.dev) is a component library built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build AI-native applications faster.\n\n## Overview\n\nAI Elements provides pre-built, customizable React components specifically designed for AI applications, including conversations, messages, code blocks, reasoning displays, and more. The CLI makes it easy to add these components to your Next.js project.\n\n## Installation\n\nYou can use the AI Elements CLI directly with npx, or install it globally:\n\n```bash\n# Use directly (recommended)\nnpx ai-elements@latest\n\n# Or using shadcn cli\nnpx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json\n```\n\n## Prerequisites\n\nBefore using AI Elements, ensure your project meets these requirements:\n\n- **Node.js** 18 or later\n- **Next.js** project with [AI SDK](https://ai-sdk.dev/) installed\n- **shadcn/ui** initialized in your project (`npx shadcn@latest init`)\n- **Tailwind CSS** configured (AI Elements supports CSS Variables mode only)\n\n## Usage\n\n### Install All Components\n\nInstall all available AI Elements components at once:\n\n```bash\nnpx ai-elements@latest\n```\n\nThis command will:\n\n- Set up shadcn/ui if not already configured\n- Install all AI Elements components to your configured components directory\n- Add necessary dependencies to your project\n\n### Install Specific Components\n\nInstall individual components using the `add` command:\n\n```bash\nnpx ai-elements@latest add <component-name>\n```\n\nExamples:\n\n```bash\n# Install the message component\nnpx ai-elements@latest add message\n\n# Install the conversation component\nnpx ai-elements@latest add conversation\n\n# Install the code-block component\nnpx ai-elements@latest add code-block\n```\n\n### Alternative: Use with shadcn CLI\n\nYou can also install components using the standard shadcn/ui CLI:\n\n```bash\n# Install all components\nnpx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json\n\n# Install a specific component\nnpx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json\n```\n\n## Quick Start Example\n\nAfter installing components, you can use them in your React application:\n\n```tsx\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  Conversation,\n  ConversationContent,\n} from \"@/components/ai-elements/conversation\";\nimport {\n  Message,\n  MessageContent,\n  MessageResponse,\n} from \"@/components/ai-elements/message\";\n\nexport default function Chat() {\n  const { messages } = useChat();\n\n  return (\n    <Conversation>\n      <ConversationContent>\n        {messages.map((message, index) => (\n          <Message key={index} from={message.role}>\n            <MessageContent>\n              <MessageResponse>{message.content}</MessageResponse>\n            </MessageContent>\n          </Message>\n        ))}\n      </ConversationContent>\n    </Conversation>\n  );\n}\n```\n\n## How It Works\n\nThe AI Elements CLI:\n\n1. **Detects your package manager** (npm, pnpm, yarn, or bun) automatically\n2. **Fetches component registry** from `https://elements.ai-sdk.dev/api/registry/registry.json`\n3. **Installs components** using the shadcn/ui CLI under the hood\n4. **Adds dependencies** and integrates with your existing shadcn/ui setup\n\nComponents are installed to your configured shadcn/ui components directory (typically `@/components/ai-elements/`) and become part of your codebase, allowing for full customization.\n\n## Configuration\n\nAI Elements uses your existing shadcn/ui configuration. Components will be installed to the directory specified in your `components.json` file.\n\n## Recommended Setup\n\nFor the best experience, we recommend:\n\n1. **AI Gateway**: Set up [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) and add `AI_GATEWAY_API_KEY` to your `.env.local`\n2. **CSS Variables**: Use shadcn/ui's CSS Variables mode for theming\n3. **TypeScript**: Enable TypeScript for better development experience\n\n## Contributing\n\nIf you'd like to contribute to AI Elements, please follow these steps:\n\n1. Fork the repository\n2. Create a new branch\n3. Make your changes to the components in `packages/elements`.\n4. Open a PR to the `main` branch.\n\n---\n\nMade with ❤️ by [Vercel](https://vercel.com)\n",
  "bytes": 4186,
  "sha": "9ea7b01645a1e45c1b885060c4b0ace42b88b9334b21b24d35a5f272ad86c20a",
  "repo_slug": "vercel/ai-elements",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_vercel_ai_elements_ai_elements_c738d097/readme"
}