# Nauval AI Components By **nauval** ยท Software & Tools 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. - Source: https://ai.nauv.al/ - Repository: https://github.com/nauvalazhar/ai - Tags: react, open-source, ui-components, ai-sdk, streaming, typescript, tailwind, agentic - Pricing: free - Upvotes: 0 ## Features - Streaming-first rendering: reasoning, tool calls, and replies render as they arrive - Agentic surfaces: approvals, tasks, tool transcripts, and chain-of-thought are first-class components - Chat primitives: Message, Conversation, Composer, Composer Rich, Suggestion, Feedback Bar - Code surfaces: Code Block, Console, Diff, Diff Rich, Sandbox, Web Preview - File and media handling: Uploader, Attachment, Generated Image, Document - Primitive layer: Button, Chip, Menu, Player, Popover, Scroll Area, Select, Switch, Tooltip - Headless-style composition: each surface built from small, rearrangeable pieces - No vendor lock-in: zero opinions about the AI SDK or data layer --- ## Why it matters 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 big picture 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. ## How it works Install starts with two commands using the `aikit` CLI. `init` writes `aikit.json` and sets up tokens, dependencies, and the `cn` helper. `add ` 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 baseline 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. ## Yes, but 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. ## The bottom line 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. ## FAQ ### What is Nauval AI Components? 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. ### How do I install and use it? 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 ` 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`. ### Is it free and open source? 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. ### What is it best for? 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. ### How does it compare to shadcn/ui? 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 ### What are the main limitations? 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. --- [View on Analog](https://analoghq.ai/nauval/software-tools/ai-components)