https://github.com/ai-shifu/markdown-flow-ui
React component library to render interactive MarkdownFlow documents with typewriter effects and real-time streaming
https://github.com/ai-shifu/markdown-flow-ui
markdown-flow markdownflow mdflow react react-markdown remark-plugin typescript
Last synced: 3 months ago
JSON representation
React component library to render interactive MarkdownFlow documents with typewriter effects and real-time streaming
- Host: GitHub
- URL: https://github.com/ai-shifu/markdown-flow-ui
- Owner: ai-shifu
- License: mit
- Created: 2025-07-12T07:03:48.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-09-10T14:14:42.000Z (4 months ago)
- Last Synced: 2025-09-10T17:55:34.330Z (4 months ago)
- Topics: markdown-flow, markdownflow, mdflow, react, react-markdown, remark-plugin, typescript
- Language: TypeScript
- Homepage: https://markdownflow.ai
- Size: 4.48 MB
- Stars: 4
- Watchers: 0
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MarkdownFlow UI Component Library
**React component library for rendering interactive [MarkdownFlow](https://markdownflow.ai) documents with typewriter effects, real-time streaming, and advanced Mermaid diagram support.**
[MarkdownFlow](https://markdownflow.ai) (also known as MDFlow or markdown-flow) extends standard Markdown with AI to create personalized, interactive pages. Its tagline is **"Write Once, Deliver Personally"**.
[](https://badge.fury.io/js/markdown-flow-ui)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
[](https://storybook.js.org/)
English | [简体中文](README_ZH-CN.md)
## 🚀 Quick Start
### Install
```bash
npm install markdown-flow-ui
# or
yarn add markdown-flow-ui
# or
pnpm add markdown-flow-ui
```
### Basic Usage
```tsx
import { MarkdownFlow } from "markdown-flow-ui";
function App() {
return (
);
}
```
### Interactive Elements
```tsx
import { MarkdownFlow } from "markdown-flow-ui";
function InteractiveExample() {
const content = `
Choose your language: ?[%{{lang}} English | 中文 | Español]
Your name: ?[%{{name}} Enter your name...]
?[Continue | Cancel]
`;
return (
{
console.log("User interaction:", params);
// Handle button clicks and input submissions
}}
/>
);
}
```
## 📖 Documentation
For detailed API documentation, examples, and advanced usage, see:
**[📋 API Reference](API_REFERENCE.md)** - Complete API documentation with examples
## 🧩 Advanced Examples
### Custom Render Bar
```tsx
const CustomBar: CustomRenderBarProps = ({ displayContent, onSend }) => {
return (
onSend({ buttonText: "Regenerate" })}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
Regenerate
navigator.clipboard.writeText(displayContent)}
className="px-4 py-2 bg-gray-500 text-white rounded"
>
Copy
);
};
;
```
## 🌐 MarkdownFlow Ecosystem
markdown-flow-ui is part of the MarkdownFlow ecosystem for creating personalized, AI-driven interactive documents:
- **[markdown-flow](https://github.com/ai-shifu/markdown-flow)** - The main repository containing homepage, documentation, and interactive playground
- **[markdown-flow-agent-py](https://github.com/ai-shifu/markdown-flow-agent-py)** - Python agent for transforming MarkdownFlow documents into personalized content
- **[markdown-it-flow](https://github.com/ai-shifu/markdown-it-flow)** - markdown-it plugin to parse and render MarkdownFlow syntax
- **[remark-flow](https://github.com/ai-shifu/remark-flow)** - Remark plugin to parse and process MarkdownFlow syntax in React applications
## 💖 Sponsors
## 📄 License
MIT License - see [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- [React Markdown](https://github.com/remarkjs/react-markdown) for markdown processing
- [Mermaid](https://mermaid.js.org/) for diagram rendering
- [Highlight.js](https://highlightjs.org/) for syntax highlighting
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [Radix UI](https://www.radix-ui.com/) for accessible components
## 📞 Support
- 📖 [Documentation](https://github.com/ai-shifu/markdown-flow-ui#readme)
- 🐛 [Issue Tracker](https://github.com/ai-shifu/markdown-flow-ui/issues)
- 💬 [Discussions](https://github.com/ai-shifu/markdown-flow-ui/discussions)
