AI Elements — pre-built AI chat UI components on shadcn/ui
Build AI chat interfaces faster with ai-elements components — conversations, messages, tool displays, and prompt inputs for Next.js apps with shadcn/ui and the Vercel AI SDK
- What
- Build AI chat interfaces faster with ai-elements components — conversations, messages, tool displays, and prompt inputs for Next.js apps with shadcn/ui and the Vercel AI SDK
- Cost
- Free
- Needs
- a Next.js project with Node.js 18+, the Vercel AI SDK installed, and shadcn/ui (the ai-elements CLI installs it automatically if missing); a Vercel AI Gateway API key is recommended (small monthly usage credit for model experiments)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @mxyhi's AI Elements skill: a field guide for building AI chat interfaces from the ai-elements component library (a custom shadcn/ui registry for AI-native apps). The agent walks through the real prerequisites (Node 18+, a Next.js project with the Vercel AI SDK, shadcn/ui — auto-installed by the CLI if missing, plus the Vercel AI Gateway key with its small monthly usage credit), installs components via the ai-elements CLI or the shadcn CLI (running every CLI command with the project's own package runner), and composes them in code — Message, MessageContent, MessageResponse, conversations, tool displays, prompt inputs — with components copied into the project so they can be opened, restyled, and extended like any hand-written code. It covers customization (Tailwind classes, primitive prop passthrough), extensibility notes, and a troubleshooting section for the common breakages (unstyled components with Tailwind 4, missing files after CLI install, theme switching, module-not-found import aliases, coding assistants not seeing the components), and points to the references/ folder for per-component docs. Honest caveats: components are code that lands in your repo — you own it afterwards, including upgrades; tied to the React/Next.js + Tailwind stack, not a framework-agnostic UI kit. License: the manifest records Apache-2.0 (the manifest makes faith); the repo frontmatter carries no license field. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a Next.js project with Node.js 18+, the Vercel AI SDK installed, and shadcn/ui (the ai-elements CLI installs it automatically if missing); a Vercel AI Gateway API key is recommended (small monthly usage credit for model experiments) Install "AI Elements — pre-built AI chat UI components on shadcn/ui" for me. It gives my agent @mxyhi's AI Elements field guide: check the Node/Next.js/AI SDK/shadcn prerequisites (including the AI Gateway key in env.local), install ai-elements components with the project's own package runner (npx/pnpm dlx/bunx ai-elements@latest), import and compose them as ordinary React components (Message, MessageContent, MessageResponse, conversations, tool displays, prompt inputs — code that lives in the project and can be restyled or extended), fix the usual breakages (Tailwind 4 base styles, missing components.json config, tsconfig path aliases, data-theme switching), and consult the references/ folder for per-component documentation. Apache-2.0 licensed (per the discovery manifest; the repo frontmatter carries no license field). Repository: https://github.com/mxyhi/ok-skills/blob/main/ai-elements/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "ai-elements". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. set up the Next.js + AI SDK + shadcn prerequisites, add the AI Gateway key to env.local, run the ai-elements CLI to pull the components I need). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.