# Arrow

> Arrow ships high-quality, accessible React components for AI chat UIs—loaders, streaming text, avatars, code blocks, and more. Components are copy-paste friendly (registry-style) and documented at the site below. Stack: Next.js, React 19, Tailwind CSS v4.

## MCP

- [MCP](https://arrowui.sh/docs/mcp): Model Context Protocol and Arrow documentation.
- [MCP doc source (https://github.com/noahbuiltsapps/arrow/blob/main/src/content/docs/mcp/content.mdx)](https://github.com/noahbuiltsapps/arrow/blob/main/src/content/docs/mcp/content.mdx)
- MCP server (stdio): `npx -y @arrowui/mcp` — list components, fetch `llm.txt`, tools & AI doc slugs.

## Components

- [Loader](https://arrowui.sh/docs/components/loader): Animated loading indicator.
  - Registry: [src/registry/loader.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/loader.tsx) · `pnpm dlx @arrowui/cli@latest add loader`
- [Code Block](https://arrowui.sh/docs/components/code-block): Syntax-highlighted code block.
  - Registry: [src/registry/code-block.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/code-block.tsx) · `pnpm dlx @arrowui/cli@latest add code-block`
- [Avatar](https://arrowui.sh/docs/components/avatar): Circular user avatar.
  - Registry: [src/registry/avatar.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/avatar.tsx) · `pnpm dlx @arrowui/cli@latest add avatar`
- [Streaming](https://arrowui.sh/docs/components/streaming): Stream text like a live response.
  - Registry: [src/registry/streaming.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/streaming.tsx) · `pnpm dlx @arrowui/cli@latest add streaming`
- [Text Shimmer](https://arrowui.sh/docs/components/shimmer): Animated gradient shimmer.
  - Registry: [src/registry/shimmer.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/shimmer.tsx) · `pnpm dlx @arrowui/cli@latest add shimmer`
- [Scroll](https://arrowui.sh/docs/components/scroll): Back-to-top control with theme tones, icons, and sizing.
  - Registry: [src/registry/scroll.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/scroll.tsx) · `pnpm dlx @arrowui/cli@latest add scroll`
- [Thinking Bar](https://arrowui.sh/docs/components/thinking-bar): Dark status strip with optional loader, shimmer status text, and stop action.
  - Registry: [src/registry/thinking-bar.tsx](https://github.com/noahbuiltsapps/arrow/blob/main/src/registry/thinking-bar.tsx) · `pnpm dlx @arrowui/cli@latest add thinking-bar`

## Tools

- [Logos](https://arrowui.sh/docs/tools/logos): Download SVG logos for AI tools (ChatGPT, Claude, Gemini, and more).
  - Source: [src/content/tools/logos/content.mdx](https://github.com/noahbuiltsapps/arrow/blob/main/src/content/tools/logos/content.mdx)
- [Sample Chats](https://arrowui.sh/docs/tools/sample-chats): Example user and assistant messages in JSON, TypeScript, and Markdown for UI testing.
  - Source: [src/content/tools/sample-chats/content.mdx](https://github.com/noahbuiltsapps/arrow/blob/main/src/content/tools/sample-chats/content.mdx)

## AI guides

- [Vercel AI SDK](https://arrowui.sh/docs/ai/ai-sdk): Install the Vercel AI SDK, use AI Gateway, stream from a Route Handler, and wire useChat to Arrow.
  - Source: [src/content/ai/ai-sdk/content.mdx](https://github.com/noahbuiltsapps/arrow/blob/main/src/content/ai/ai-sdk/content.mdx)
- [OpenRouter SDK](https://arrowui.sh/docs/ai/openrouter-sdk): Install @openrouter/sdk, authenticate with OPENROUTER_API_KEY, stream chat, and connect to Arrow UI.
  - Source: [src/content/ai/openrouter-sdk/content.mdx](https://github.com/noahbuiltsapps/arrow/blob/main/src/content/ai/openrouter-sdk/content.mdx)

## Repository

- [https://github.com/noahbuiltsapps/arrow](https://github.com/noahbuiltsapps/arrow)