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.
Qué hace
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.
Características
Notas de campo
Revisado el Jun 27, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Herramientas 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 codeUna biblioteca de componentes con glassmorfismo inspirada en Apple, construida sobre shadcn/ui y Base UI, con componentes de estilo glass listos para usar (alert, button, card, calendar, popover, sidebar y más) instalables mediante el registro de shadcn.
Best for Añadir UI con glassmorfismo a un proyecto shadcn/uiUna colección interactiva de transiciones CSS reutilizables y listas para copiar: redimensionado de tarjetas, animaciones de modales y menús, aparición de insignias y más, cada una con un fragmento autocontenido que incluye una protección para movimiento reducido.
Best for Añadir microinteracciones pulidas sin una biblioteca de movimientoFree, 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 dependencyEl kit de herramientas de código abierto de GitHub para el Desarrollo Guiado por Especificaciones. La CLI Specify convierte especificaciones ejecutables en implementaciones funcionales, con soporte para muchos agentes de codificación con IA.
Best for Desarrollo Guiado por Especificaciones con agentes de IA