simple-ai — 4 React Components, Preview & Copy | 21st

simple-ai

Open-source AI-focused UI components, blocks, and React Flow workflows built with shadcn/ui and the Vercel AI SDK.

by Alwurts

4components49.7Kviews359bookmarks

Installs all 39 components. Without our CLI, run instead.

Auto-indexed

Chat Suggestions

Tool Invocation

Model Selector

Chat Input

That's all 4 components

About simple-ai

simple-ai publishes a shadcn registry at simple-ai.dev, with 39 components installable through the shadcn CLI.

Components: 39
GitHub stars: 759
Last commit: Sep 15, 2026
Repository: Alwurts/simple-ai

Also in the simple-ai registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

app-01
A app with generative UI capabilities.
ai, @ai-sdk/openai, @uiw/react-codemirror, @codemirror/lang-javascript11 files
app-02
A persona generator app with structured outputs.
ai, @ai-sdk/openai, zod5 files
app-03
An X profile bio generator app.
ai, @ai-sdk/openai, zod, next-themes9 files
base-handle
@xyflow/react1 file
base-node
1 file
chat-01
A simple chat page.
ai, @ai-sdk/react, @ai-sdk/openai16 files
chat-02
A chat in a sidebar.
ai, @ai-sdk/openai3 files
chat-03
A chat in a popover.
ai, @ai-sdk/openai3 files
chat-04
A chat with multiple agents support.
ai, @ai-sdk/react, @ai-sdk/openai13 files
Chat Message
chat-message
A fully composable component for displaying chat messages with rich features like timestamps, actions, and threading.
avatar, button, card, tooltip1 file
Chat Message Area
chat-message-area
A component that adds auto scrolling functionality to a list of messages.
use-stick-to-bottom1 file
chat-page
attachment, bubble, button, collapsible
Editable Handle
editable-handle
A React Flow component that allows you to dynamically add, edit, or remove input/output handles on your nodes.
@xyflow/react1 file
flow-chain
Agentic chain workflow.
@xyflow/react, zustand, zod, ai19 files
flow-orchestrator
Agentic orchestrator workflow.
@xyflow/react, zustand, zod, ai19 files
flow-parallelization
Agentic parallelization workflow.
@xyflow/react, zustand, zod, ai19 files
flow-routing
Agentic routing workflow.
@xyflow/react, zustand, zod, ai19 files
Generate Text Node
generate-text-node
A React Flow node component that represents Vercel AI SDK's text generation capabilities, featuring system instructions, prompts, and optional tool outputs.
@xyflow/react1 file
JSON Schema Editor
json-schema-editor
A visual editor for creating and editing JSON Schema definitions with support for nested objects, arrays, enums, and property descriptions.
nanoid1 file
JSON Schema Viewer
json-schema-viewer
A read-only component for displaying JSON Schema structures with support for union types, nested objects, arrays, and enums.
1 file
JSX Renderer
jsx-renderer
A component that renders JSX strings with access to tailwind, shadcn components and lucide icons.
react-jsx-parser, react-error-boundary1 file3 examples
labeled-handle
@xyflow/react1 file
Markdown Content
markdown-content
A component that renders markdown content.
react-markdown, marked, shiki, remark-gfm1 file
node-header
button, dropdown-menu1 file
Node Header Status
node-header-status
A React Flow component that displays status indicators in node headers.
@xyflow/react1 file
Prompt Crafter Node
prompt-crafter-node
A React Flow node component for building dynamic prompts by combining multiple inputs using a template-based approach.
@xyflow/react, @uiw/react-codemirror, @uiw/codemirror-themes, @lezer/highlight1 file
Reasoning
A component for displaying AI reasoning content with collapsible sections and streaming support.
ai1 file
Resizable Node
resizable-node
A wrapper React Flow node component that adds resizing functionality to other nodes.
@xyflow/react1 file
shell
button, sidebar
Status Edge
status-edge
A React Flow edge component that provides visual feedback through color-coded states.
@xyflow/react1 file
Text Input Node
text-input-node
A React Flow node component that provides a simple text input interface with a resizable textarea and single output.
@xyflow/react1 file
tool
collapsible
Visualize Text Node
visualize-text-node
A React Flow node component for displaying text content with Markdown support and a resizable interface.
@xyflow/react1 file
worked
collapsible
workflow-01
Build powerful AI agent workflows
@xyflow/react, zustand, zod, ai61 files

From the simple-ai readme

simple-ai

Curated agent examples you can build upon. Copy them into your app. Change the source.

simple-ai.dev

Stack

TanStack Start, Fumadocs, Cloudflare Workers, shadcn Base UI. Hosted registry at /r/{name}.json, GitHub registry via root registry.json.

Develop

pnpm install
pnpm --filter @workspace/registry generate
pnpm --filter docs dev

Docs: http://localhost:4567

Working in this repo: AGENTS.md.

Read the rest on GitHub →

What simple-ai builds on

The packages and primitives its components pull in, counted across the registry.

button21card11input10dialog9textarea9separator8avatar6collapsible6sidebar6dropdown-menu5sonner5badge4

Hooks and utilities

use-textarea-resize

What simple-ai shipped recently

Every appearance and removal our crawl has seen in the registry index.

chat-pageaddedSep 15, 2026
shelladdedSep 15, 2026
tooladdedSep 15, 2026
workedaddedSep 15, 2026

Registries like simple-ai

Prompt Kit

by Julien Thibeaut

components

AI Elements

by Vercel

components

Agent Elements

by 21st

components

Pace UI

by Pace UI

components

Browse every shadcn registry we track →

simple-ai contents

Chat Suggestions

Tool Invocation

Model Selector

Chat Input

About simple-ai

Also in the simple-ai registry

app-01

app-02

app-03

base-handle

base-node

chat-01

chat-02

chat-03

chat-04

Chat Message

Chat Message Area

chat-page

Editable Handle

flow-chain

flow-orchestrator

flow-parallelization

flow-routing

Generate Text Node

JSON Schema Editor

JSON Schema Viewer

JSX Renderer

labeled-handle

Markdown Content

node-header

Node Header Status

Prompt Crafter Node

Reasoning

Resizable Node

shell

Status Edge

Text Input Node

tool

Visualize Text Node

worked

workflow-01

From the simple-ai readme

simple-ai

Stack

Develop

What simple-ai builds on

Hooks and utilities

What simple-ai shipped recently

Registries like simple-ai

Related libraries

About simple-ai

All 4 simple-ai components