Open-source React component kit for agentic AI apps: streaming chat, tool calls, reasoning, citations, and more, SDK-agnostic and fully owned by your codebase.
O que faz
Nauval AI Components is an open-source React library for agentic AI interfaces, installable via the aikit CLI from ai.nauv.al. It ships copy-paste components for streaming chat, tool calls, reasoning, and tasks. SDK-agnostic and fully owned by your repo.
Building an AI interface from scratch means solving the same five hard problems every time: streaming partial tokens, rendering tool call states, handling reasoning blocks, wiring keyboard navigation, and making it all type-safe. Nauval AI Components, per the README at github.com/nauvalazhar/ai, solves all five before you write a line of product code.
The library ships a deep catalog of React components organized into three tiers: chat and agent surfaces (Message, Conversation, Composer, Tool Transcript, Chain Of Thought, Task, Approval), code and output surfaces (Code Block, Diff, Sandbox, Web Preview), and a primitive layer (Button, Chip, Menu, Scroll Area, Tooltip). The component count is large enough to wire a complete agent harness, per the documented component list at ai.nauv.al/menu. Every component is SDK-agnostic, meaning it works with Vercel AI SDK, LangChain.js, or any streaming source, because it holds no opinions about the data layer.
Install starts with two commands using the aikit CLI. init writes aikit.json and sets up tokens, dependencies, and the cn helper. add <component> copies a component into your project with imports rewritten to your alias. Run add for each component you want. Supported frameworks include Vite, Next.js, React Router, TanStack Start, and the shadcn CLI, with a manual path available when the CLI is not an option.
Accessibility is not a post-install task. Focus rings, keyboard navigation, and ARIA semantics are wired into every component before you start styling, per the project site. The Menu primitive, for example, coordinates keyboard navigation across items automatically and exposes ARIA grouping through MenuGroup and MenuGroupLabel parts.
The copy-paste model means updates are manual. When the upstream library ships a fix, you apply it yourself to the copy in your repo. That tradeoff, setup friction in exchange for full ownership, is the core design decision the project makes explicitly. React is the only supported runtime.
If you are building a React-based AI product and want streaming-ready, accessible, TypeScript-first components that you fully own, start at ai.nauv.al and run npx aikit init to set up your project. The SDK-agnostic design means you can swap or layer AI backends without touching the component layer.
Recursos
Notas de campo
Revisado em Jun 27, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Ferramentas usadas
Nauval AI Components is an open-source React component library for building agentic AI interfaces, available at ai.nauv.al and github.com/nauvalazhar/ai. It provides copy-paste components for streaming chat, tool calls, reasoning blocks, citations, tasks, and code surfaces. Components are designed to be owned by your repo, you copy the source in, restyle with Tailwind or your own tokens, and ship it as part of your codebase. The library is SDK-agnostic and works with Vercel AI SDK, LangChain.js, or any other streaming source.
Installation runs in two commands using the `aikit` CLI: `npx aikit init` writes `aikit.json` and sets up tokens, dependencies, and the `cn` helper, then `npx aikit add <component>` copies each component into your project with imports rewritten to your alias. Supported frameworks include Vite, Next.js, React Router, TanStack Start, and the shadcn CLI, with a manual path for setups where the CLI is not an option. The development playground, per the README, runs on port 3300 using `bun --bun run dev`.
Yes, Nauval AI Components is free and open source, hosted publicly at github.com/nauvalazhar/ai. There is no runtime npm dependency on an upstream package, you copy the component source directly into your own repo. Full documentation, live demos, and copy-paste source are available at ai.nauv.al at no cost.
Nauval AI Components is best for React developers building production-grade AI chat or agent interfaces who want full ownership of their UI layer. Its first-class support for streaming, tool calls, reasoning blocks, approvals, and tasks makes it particularly strong for agentic surfaces beyond simple chat boxes. Because it has no opinion about the data layer, it fits any stack using Vercel AI SDK, LangChain.js, or a custom streaming backend. Teams that want accessible, TypeScript-typed components without writing the plumbing from scratch will get the most out of it.
Nauval AI Components uses the same copy-paste, own-your-code philosophy as shadcn/ui and even supports installation via the shadcn CLI, making it a natural companion rather than a competitor. The key difference is domain: shadcn/ui is a general-purpose component library, while Nauval AI Components is purpose-built for AI and agentic interfaces, shipping surfaces like Chain Of Thought, Tool Transcript, Reasoning, and Usage Meter that shadcn/ui does not cover. Teams already on shadcn/ui can layer in Nauval components for AI-specific surfaces without changing their existing setup. The primitives layer (Button, Chip, Menu, Tooltip, etc.) overlaps, but the agentic layer is where Nauval fills a di
The main limitations are manual updates, React-only support, and a per-component install workflow. Because components are copied into your repo rather than imported from a versioned package, you apply upstream fixes yourself, there is no `npm update` path. The library is React-only, so Vue, Svelte, and vanilla JS projects are out of scope. Installing each component individually with `aikit add` keeps your bundle lean but requires an explicit step for every new surface you want.
78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadshadcn/ui, open-source, copy-owned UI components for developers building their own design system with full code control.
Best for Teams building a custom design system who need full ownership of component source codeUma biblioteca de componentes glassmórficos inspirada na Apple, construída sobre shadcn/ui e Base UI, com componentes estilizados em vidro prontos para uso (alert, button, card, calendar, popover, sidebar e mais), instaláveis via o registro do shadcn.
Best for Adicionar UI com glassmorphism a um projeto shadcn/uiUma coleção interativa de transições CSS reutilizáveis e prontas para copiar, incluindo redimensionamento de cards, animações de modais e menus, pop de badges e muito mais, cada uma emitindo um snippet autocontido com um guard de reduced-motion.
Best for Adicionar micro-interações refinadas sem uma biblioteca de motionFree, open-source shadcn-style registry of production-ready AI agent recipes for developers who want full code ownership with zero config.
Best for Teams that want full code ownership over agent logic without being locked into an opaque runtime dependencyO toolkit open-source do GitHub para Spec-Driven Development. A Specify CLI transforma especificações executáveis em implementações funcionais, com suporte a diversos agentes de codificação com IA.
Best for Spec-Driven Development com agentes de IA