ai-elements
AI Elements
AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.
Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.
IMPORTANT: Run all CLI commands using the project's package runner:
npx ai-elements@latest,pnpm dlx ai-elements@latest, orbunx --bun ai-elements@latest— based on the project'spackageManager. Examples below usenpx ai-elements@latestbut substitute the correct runner for the project.
Prerequisites
Before installing AI Elements, make sure your environment meets the following requirements:
- Node.js, version 18 or later
- A Next.js project with the AI SDK installed.
- shadcn/ui installed in your project. If you don't have it installed, running any install command will automatically install it for you.
- We also highly recommend using the AI Gateway and adding
AI_GATEWAY_API_KEYto yourenv.localso you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key here.
Installing Components
More from mxyhi/ok-skills
planning-with-files
Implements Manus-style file-based planning to organize and track progress on complex tasks. Creates task_plan.md, findings.md, and progress.md. Use when asked to plan out, break down, or organize a multi-step project, research task, or any work requiring 5+ tool calls. Supports automatic session recovery after /clear.
63dogfood
Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.
56exa-search
Use Exa for web/code/company research (web_search_exa / get_code_context_exa / company_research_exa), with parameters and examples; trigger when online search or parameter checks are needed.
55get-api-docs
>
50find-skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
47gh-fix-ci
Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions; use `gh` to inspect checks and logs, summarize failure context, draft a fix plan, and implement only after explicit approval. Treat external providers (for example Buildkite) as out of scope and report only the details URL.
47