[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9023":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":16,"stars7d":15,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},9023,"ai-elements-vue","vuepont\u002Fai-elements-vue","vuepont","AI Elements Vue is a component library built on top of shadcn-vue to help you build AI-native applications faster.","https:\u002F\u002Fwww.ai-elements-vue.com",null,"Vue",1059,93,4,7,0,21,1,18.92,"Other",false,"main",[24,25,26,27,28,29,30],"ai","chatbot","elements","shadcn-vue","ui","vercel","vue-components","2026-06-12 02:02:01","\u003Cdiv align=\"center\">\n  \u003Cimg src=\".\u002Fapps\u002Fwww\u002Fpublic\u002Fcover.png\" >\n\u003C\u002Fdiv>\n\n\u003Cbr \u002F>\n\n\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fai-elements-vue\" target=\"\\_parent\">\n    \u003Cimg alt=\"\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fai-elements-vue.svg\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"#badge\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Fvuepont\u002Fai-elements-vue\" alt=\"Release\"\u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuepont\u002Fai-elements-vue\" target=\"\\_parent\">\n    \u003Cimg alt=\"\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fvuepont\u002Fai-elements-vue.svg?style=social&label=Star\" alt=\"GitHub stars\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n## Overview\n\n[AI Elements Vue](https:\u002F\u002Fai-elements-vue.com) provides pre-built, customizable Vue 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 Vue.js and Nuxt.js project.\n\n## Installation\n\nYou can use the AI Elements Vue CLI directly with npx, or install it globally:\n\n```bash\n# Use directly (recommended)\nnpx ai-elements-vue@latest\n\n# Or using shadcn-vue cli\nnpx shadcn-vue@latest add https:\u002F\u002Fregistry.ai-elements-vue.com\u002Fall.json\n```\n\n## Prerequisites\n\nBefore using AI Elements Vue, ensure your project meets these requirements:\n\n- **Node.js** 18 or later\n- **Vue.js, Nuxt.js** project with [AI SDK](https:\u002F\u002Fai-sdk.dev\u002F) installed\n- **shadcn-vue** initialized in your project (`npx shadcn-vue@latest init`)\n- **Tailwind CSS** configured (AI Elements Vue supports CSS Variables mode only)\n\n## Usage\n\n### Install All Components\n\nInstall all available AI Elements Vue components at once:\n\n```bash\nnpx ai-elements-vue@latest\n```\n\nThis command will:\n- Set up shadcn-vue if not already configured\n- Install all AI Elements Vue components to your configured components directory\n- Add necessary dependencies to your project\n\n### Install Specific Components\n\nInstall individual or multiple components using the `add` command:\n\n```bash\nnpx ai-elements-vue@latest add \u003Ccomponent-name>\n\n# Or install multiple at once:\nnpx ai-elements-vue@latest add \u003Cname1> \u003Cname2> ...\n```\n\nExamples:\n\n```bash\n# Install the message component\nnpx ai-elements-vue@latest add message\n\n# Install the conversation component\nnpx ai-elements-vue@latest add conversation\n\n# Install multiple components in one command\nnpx ai-elements-vue@latest add message conversation\n```\n\n### Alternative: Use with shadcn-vue CLI\n\nYou can also install components using the standard shadcn-vue CLI:\n\n```bash\n# Install all components\nnpx shadcn-vue@latest add https:\u002F\u002Fregistry.ai-elements-vue.com\u002Fall.json\n\n# Install a specific component\nnpx shadcn-vue@latest add https:\u002F\u002Fregistry.ai-elements-vue.com\u002Fmessage.json\n```\n\n## Available Components\n\nAI Elements Vue includes the following components:\n\n| Component          | Description                                             |\n| ------------------ | ------------------------------------------------------- |\n| **Chatbot**        |                                                         |\n| `chain-of-thought` | Display AI reasoning and thought processes              |\n| `checkpoint`       | Conversation checkpoint component                       |\n| `confirmation`     | Tool execution approval workflows                       |\n| `context`          | Display Context consumption                             |\n| `conversation`     | Container for chat conversations                        |\n| `inline-citation`  | Inline source citations                                 |\n| `message`          | Individual chat messages with avatars                   |\n| `model-selector`   | AI model selection component                            |\n| `plan`             | Plan and task planning display component                |\n| `prompt-input`     | Advanced input component with model selection           |\n| `queue`            | Message and todo queue with attachments                 |\n| `reasoning`        | Display AI reasoning and thought processes              |\n| `shimmer`          | Text shimmer animation effect                           |\n| `sources`          | Source attribution component                            |\n| `suggestion`       | Quick action suggestions                                |\n| `task`             | Task completion tracking                                |\n| `tool`             | Tool usage visualization                                |\n| **Workflow**       |                                                         |\n| `canvas`           | VueFlow canvas for workflow visualizations            |\n| `connection`       | Connection line component for workflow edges            |\n| `controls`         | Flow controls for canvas (zoom, fit view, etc.)         |\n| `edge`             | Edge component for connections between workflow nodes   |\n| `node`             | Node component for workflow graphs                      |\n| `panel`            | Panel component for canvas overlays                     |\n| `toolbar`          | Node toolbar for workflow elements                      |\n| **Vibe-Coding**    |                                                         |\n| `artifact`         | Display a code or document                              |\n| `web-preview`      | Embedded web page previews                              |\n| **Documentation**  |                                                         |\n| `open-in-chat`     | Open in chat button for a message                       |\n| **Utilities**      |                                                         |\n| `code-block`       | Syntax-highlighted code display with copy functionality |\n| `image`            | AI-generated image display component                    |\n| `loader`           | Loading states for AI operations                        |\n\n## How It Works\n\nThe AI Elements Vue CLI:\n\n1. **Detects your package manager** (npm, pnpm, yarn, or bun) automatically\n2. **Fetches component registry** from `https:\u002F\u002Fregistry.ai-elements-vue.com\u002Fall.json`\n3. **Installs components** using the shadcn-vue CLI under the hood\n4. **Adds dependencies** and integrates with your existing shadcn-vue setup\n\nComponents are installed to your configured shadcn-vue components directory (typically `@\u002Fcomponents\u002Fai-elements\u002F`) and become part of your codebase, allowing for full customization.\n\n## Configuration\n\nAI Elements Vue uses your existing shadcn-vue 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-vue'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 Vue, 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## Sponsors\n\nAI Elements Vue is an open-source project supported by our sponsors. If you'd like to support its development, please consider [becoming a sponsor](https:\u002F\u002Fopencollective.com\u002Fvuepont).\n\n\u003Cp>\n  \u003Ca href=\"https:\u002F\u002Fimmitranslate.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\n    \u003Cimg src=\".\u002Fapps\u002Fwww\u002Fpublic\u002Fsponsors\u002Fimmitranslate.svg\" alt=\"ImmiTranslate\" width=\"180\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## Acknowledgments\n\nThis project draws inspiration from several excellent projects:\n\n- **[ai-elements](https:\u002F\u002Fai-sdk.dev\u002Felements)** - AI component concepts\n- **[shadcn-vue](https:\u002F\u002Fwww.shadcn-vue.com)** - UI component foundation\n\n---\n\nMade with ❤️ by [vuepont](https:\u002F\u002Fgithub.com\u002Fvuepont)\n","AI Elements Vue 是一个基于 shadcn-vue 构建的组件库，旨在加速 AI 原生应用程序的开发。它提供了包括对话、消息、代码块、推理展示等在内的多种预构建且可自定义的 Vue 组件，特别适合用于需要快速集成聊天机器人或其他AI功能的场景。通过其CLI工具，用户可以轻松地将这些组件添加到Vue.js和Nuxt.js项目中。此外，该项目要求环境具备Node.js 18及以上版本，并且项目中已安装了AI SDK以及配置好Tailwind CSS（仅支持CSS变量模式）。此库非常适合希望在现有Vue应用基础上增加AI交互功能的开发者使用。",2,"2026-06-11 03:20:49","top_language"]