HomeBookmarks
simple-aisimple-ai
simple-ai

simple-ai

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

ALby Alwurts
10components101.7Kviews415bookmarks

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

Auto-indexed

simple-ai contents

  • Status Edge

    Status Edge

  • JSX RendererJSX Renderer

    JSX Renderer

  • JSX RendererJSX Renderer

    JSX Renderer

  • JSX RendererJSX Renderer

    JSX Renderer

  • Editable HandleEditable Handle

    Editable Handle

  • Tool CallTool Call

    Tool Call

  • Chat Suggestions

    Chat Suggestions

  • Tool Invocation

    Tool Invocation

  • Model Selector

    Model Selector

  • Chat Input

    Chat Input

    • That's all 10 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
    754
    Last commit
    Oct 22, 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

    • 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

    Prompt Kit

    by Julien Thibeaut

    9

    components

    AI Elements

    AI Elements

    by Vercel

    10

    components

    ElevenLabs UI

    ElevenLabs UI

    by ElevenLabs

    7

    components

    Kokonut UI

    Kokonut UI

    by Kokonut UI

    60

    components

    Agent Elements

    Agent Elements

    by 21st

    22

    components

    Browse every shadcn registry we track →

    Pace UI

    Pace UI

    by Pace UI

    12

    components

    1. Components
    2. /
    3. Alwurts
    4. /
    5. simple-ai

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    Geist

    Geist

    by tigran tumasov

    72

    components

    Dali Agents

    Dali Agents

    by Liana Pepanyan

    46

    components

    PrebuiltUI

    PrebuiltUI

    by prebuiltui

    23

    components

    ReUI

    ReUI

    by Sean Hello

    262

    components

    About simple-ai

    simple-ai is a component library on 21st.dev by Alwurts with 8 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 8 simple-ai components

    • Chat Input
    • Chat Suggestions
    • Editable Handle
    • JSX Renderer
    • Model Selector
    • Status Edge
    • Tool Call
    • Tool Invocation

    Browse all component libraries →