simple-ai — 5 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

5components34.8Kviews336bookmarks

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

Auto-indexed

Chat Suggestions

Tool Invocation

Model Selector

Chat Input

UseTextareaResize

That's all 5 components

About simple-ai

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

Components: 35
GitHub stars: 754
Last commit: Jan 3, 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
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
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
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
workflow-01
Build powerful AI agent workflows
@xyflow/react, zustand, zod, ai61 files

From the simple-ai readme

Simple AI Monorepo

Packages

create-simple-ai - CLI for scaffolding Simple AI projects
@simple-ai/docs - Documentation and component registry site

Development

npm run dev          # Start docs dev server
npm run cli:dev      # Watch CLI changes
npm run build        # Build everything
npm run test         # Run all tests

Release

npm run changeset    # Add changeset
npm run release      # Publish CLI

See RELEASING.md for details.

Read the rest on GitHub →

What simple-ai builds on

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

button20card11input10dialog9textarea9separator8avatar6sonner5badge4breadcrumb4dropdown-menu4popover4

Hooks and utilities

use-textarea-resize

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

UseTextareaResize

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

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

Status Edge

Text Input Node

Visualize Text Node

workflow-01

From the simple-ai readme

Simple AI Monorepo

Packages

Development

Release

What simple-ai builds on

Hooks and utilities

Registries like simple-ai

Related libraries

About simple-ai

All 5 simple-ai components