[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-78631":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},78631,"ai-elements","vercel\u002Fai-elements","vercel","AI Elements is a component library and custom registry built on top of shadcn\u002Fui to help you build AI-native applications faster.","https:\u002F\u002Felements.ai-sdk.dev",null,"TypeScript",2094,235,4,24,0,22,39,78,66,29.12,"Other",false,"main",[26,27,28,7],"ai","elements","shadcn-ui","2026-06-12 02:03:48","# ▲ AI Elements\n\n[AI Elements](https:\u002F\u002Felements.ai-sdk.dev) is a component library built on top of [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F) 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:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fall.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:\u002F\u002Fai-sdk.dev\u002F) installed\n- **shadcn\u002Fui** 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\u002Fui 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 \u003Ccomponent-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\u002Fui CLI:\n\n```bash\n# Install all components\nnpx shadcn@latest add https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fall.json\n\n# Install a specific component\nnpx shadcn@latest add https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fmessage.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\u002Freact\";\nimport {\n  Conversation,\n  ConversationContent,\n} from \"@\u002Fcomponents\u002Fai-elements\u002Fconversation\";\nimport {\n  Message,\n  MessageContent,\n  MessageResponse,\n} from \"@\u002Fcomponents\u002Fai-elements\u002Fmessage\";\n\nexport default function Chat() {\n  const { messages } = useChat();\n\n  return (\n    \u003CConversation>\n      \u003CConversationContent>\n        {messages.map((message, index) => (\n          \u003CMessage key={index} from={message.role}>\n            \u003CMessageContent>\n              \u003CMessageResponse>{message.content}\u003C\u002FMessageResponse>\n            \u003C\u002FMessageContent>\n          \u003C\u002FMessage>\n        ))}\n      \u003C\u002FConversationContent>\n    \u003C\u002FConversation>\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:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fregistry.json`\n3. **Installs components** using the shadcn\u002Fui CLI under the hood\n4. **Adds dependencies** and integrates with your existing shadcn\u002Fui setup\n\nComponents are installed to your configured shadcn\u002Fui components directory (typically `@\u002Fcomponents\u002Fai-elements\u002F`) and become part of your codebase, allowing for full customization.\n\n## Configuration\n\nAI Elements uses your existing shadcn\u002Fui 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:\u002F\u002Fvercel.com\u002Fdocs\u002Fai-gateway) and add `AI_GATEWAY_API_KEY` to your `.env.local`\n2. **CSS Variables**: Use shadcn\u002Fui'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\u002Felements`.\n4. Open a PR to the `main` branch.\n\n---\n\nMade with ❤️ by [Vercel](https:\u002F\u002Fvercel.com)\n","AI Elements 是一个基于 shadcn\u002Fui 构建的组件库，旨在帮助开发者更快地构建 AI 原生应用。该项目提供了包括对话、消息、代码块、推理展示等在内的预构建且可定制的 React 组件，通过 CLI 工具简化了这些组件向 Next.js 项目的添加过程。技术上，它支持 CSS Variables 模式的 Tailwind CSS，并要求项目已安装 Node.js 18 或更高版本、Next.js 以及 AI SDK。适合于需要快速集成高质量 UI 组件来增强用户体验的 AI 应用开发场景，特别是那些已经采用或计划采用 shadcn\u002Fui 和 Next.js 技术栈的项目。",2,"2026-06-11 03:57:04","high_star"]