▲ AI Elements AI Elements is a component library built on top of shadcn/ui to help you build AI native applications faster. Overview AI 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. Installation You can use the AI Elements CLI directly with npx, or install it globally: [安装/使用命令见下方] Prerequisites Before using AI Elements, ensure your project meets these requirements: Node.js 18 or later Next.js project with AI SDK installed shadcn/ui initialized in your project ( npx shadcn@latest init ) Tailwind CSS configured (AI Elements supports CSS Variables mode only) Usage Install All Components Install all available AI Elements components at once: [安装/使用命令见下方] This command will: Set up shadcn/ui if not already configured Install all AI Elements components to your configured components directory Add necessary dependencies to your project Install Specific Components Install individual components using the add command: [安装/使用命令见下方] Examples: [安装/使用命令见下方] Alternative: Use with shadcn CLI You can also install components using the standard shadcn/ui CLI: [安装/使用命令见下方] Quick Start Example After installing components, you can use them in your React application: [安装/使用命令见下方] How It Works The AI Elements CLI: 1. Detects your package manager (npm, pnpm, yarn, or bun) automatically 2. Fetches component registry from https://elements.ai sdk.dev/api/registry/registry.json 3. Installs components using the shadcn/ui CLI under the hood 4. Adds dependencies and integrates with your existing shadcn/ui setup Components are installed to your configured shadcn/ui components directory (typically @/components/ai elements/ ) and become part of your codebase, allowing for full customization. Configuration AI Elements uses your existing shadcn/ui configuration. Components will be installed to the direc