Copy-Paste AI Components. Build Smarter, Faster.
An open-source library of AI-focused UI components, app blocks, and React Flow workflows designed to accelerate development. Built with shadcn/UI and Vercel AI SDK.
React Flow AI Components
Drag-and-drop AI nodes to build no-code workflows powered by React Flow
Generate Text Node
Generate text using LLMs with built-in streaming and error handling.
Prompt Crafter Node
Create dynamic prompts with variables and templating support.
Text Input Node
Collect and validate user input within your AI workflows.
Visualize Text Node
Display and format text output with markdown support.
AI-Ready Components
Pre-styled React components optimized for AI applications
Chat Message
Polished chat messages with support for avatars, markdown, and code blocks.
Hey how are you?
I'm fine, thanks for asking!
Great!
Chat Input
Auto-resizing chat input with streaming state management.
Chat Message Area
Smart message container with auto-scroll and virtual list support.
Markdown Content
Rich markdown rendering with syntax highlighting and LaTeX support.
Markdown Example
This is a sample paragraph that demonstrates how markdown content can be rendered in your application. It shows various markdown elements working together.
Features List
- Clean and simple syntax
- Support for headings and paragraphs
- Bullet point lists
- Easy to read and write
- Customizable styling
Text Formatting
You can make text bold, italic, or both. You can also use strikethrough text.
Links and Images
Here's a link to GitHub and below is a sample image:
Code Examples
Inline code: const greeting = "Hello World!"
Code Block
// Code block
function sayHello() {
console.log("Hello!");
}
Blockquotes
This is a blockquote It can span multiple lines
And can be nested
Tables
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1 | Data | Data |
| Row 2 | Data | Data |
Task Lists
- Completed task
- Pending task
- Another task
Horizontal Rule
Ordered List
- First item
- Second item
- Third item
- Sub-item 1
- Sub-item 2