A React library designed for conversational AI applications with streaming typewriter effects and interactive components.

Perfect for building ChatGPT-like interfaces, AI assistants, and real-time conversation experiences.

Unlike standard markdown renderers, Markdown Flow UI is specifically built for conversational AI interfaces:

• 🎭 Streaming Typewriter Effects - Text appears character by character, just like ChatGPT
• 🎯 Interactive Components - Buttons and form inputs embedded directly in markdown
• 🔄 Server-Sent Events (SSE) Support - Real-time streaming from your AI backend
• 📱 Conversation Flow Management - Handle multiple message blocks with auto-scroll
• 🎨 Zero Configuration - Works out of the box with beautiful defaults

[TODO: Add GIF demonstrations of typewriter effects and interactive components]

npm install markdown-flow-ui

import { MarkdownFlow } from 'markdown-flow-ui';

function ChatMessage() {
  const [content, setContent] = useState('');
  
  // Simulate streaming from AI
  useEffect(() => {
    const text = "# Hello! 👋\n\nI'm an AI assistant. How can I **help** you today?";
    let i = 0;
    const timer = setInterval(() => {
      setContent(text.slice(0, i++));
      if (i > text.length) clearInterval(timer);
    }, 50);
  }, []);

  return (
    <MarkdownFlow 
      initialContentList={[{ content }]}
      disableTyping={false}
    />
  );
}

Result: Text appears with a smooth typewriter animation, supporting full markdown formatting.

import { MarkdownFlow } from 'markdown-flow-ui';

function InteractiveChat() {
  const content = `
Choose your preferred language:

?[%{{language}} JavaScript | Python | TypeScript | Go]

Click to continue: ?[Let's Go!]
`;

  return (
    <MarkdownFlow
      initialContentList={[{ content }]}
      onSend={(data) => {
        console.log('User selected:', data.buttonText);
        // Handle user interaction
      }}
    />
  );
}

Result: Renders clickable buttons that trigger callbacks when pressed.

import { ScrollableMarkdownFlow } from 'markdown-flow-ui';

function LiveChat() {
  return (
    <ScrollableMarkdownFlow
      initialContentList={[
        { content: "## AI Assistant\n\nConnecting to server..." }
      ]}
      onSend={(data) => {
        // Send user input to your AI backend
        fetch('/api/chat', {
          method: 'POST',
          body: JSON.stringify({ message: data.inputText })
        });
      }}
    />
  );
}

Result: A complete chat interface with auto-scrolling and real-time message streaming.

The main component for rendering markdown with typewriter effects.

Key Props:

• initialContentList - Array of message objects
• disableTyping - Toggle typewriter animation
• onSend - Handle user interactions

Enhanced version with conversation management and auto-scrolling.

Key Props:

• initialContentList - Conversation history
• onSend - Process user inputs
• Additional scroll and SSE management

Code editor with markdown preview and flow syntax support.

Key Props:

• value - Editor content
• onChange - Content change handler
• readOnly - Editor mode

Perfect for:

• ✅ ChatGPT-style interfaces
• ✅ AI assistant applications
• ✅ Real-time chat systems
• ✅ Interactive documentation
• ✅ Educational platforms with guided content

Not ideal for:

• ❌ Static documentation sites
• ❌ Simple blog content
• ❌ Non-interactive markdown display

Interactive Buttons:

Click here: ?[Button Text]

Variable Inputs:

Enter your name: ?[%{{userName}} Type your name here...]
Choose option: ?[%{{choice}} Option A | Option B | Option C]

Mermaid Diagrams:

```mermaid
graph LR
    A[User Input] --> B[AI Processing]
    B --> C[Streaming Response]

The library uses Tailwind CSS classes and provides extensive customization options through props and CSS variables.

Full TypeScript support with comprehensive type definitions for all components and props.

• Node.js 18+
• pnpm (recommended)

git clone https://github.com/ai-shifu/markdown-flow-ui.git
cd markdown-flow-ui
pnpm install
pnpm storybook

Open http://localhost:6006 to view the interactive documentation.

• pnpm dev - Next.js development server
• pnpm storybook - Component documentation and examples
• pnpm build - Production build
• pnpm lint - Code linting

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• React Markdown for markdown processing
• Mermaid for diagram rendering
• Highlight.js for syntax highlighting
• Tailwind CSS for styling
• Radix UI for accessible components

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

---

Made with ❤️ for the conversational AI community