Markdown UI Chat Demo

A chat interface demonstrating the power of Markdown UI - interactive widgets embedded directly in markdown content.

What is this?

This is a live demonstration of Markdown UI, a library that allows you to embed interactive UI components directly within markdown content. Instead of just static text, AI responses can include buttons, forms, sliders, and other interactive elements that users can engage with.

Features

• Interactive Widgets: AI responses can include buttons, forms, dropdowns, sliders, and text inputs
• Streaming Chat: Real-time streaming responses from OpenAI's GPT models
• System Message Configuration: Customize the AI's behavior and personality
• Markdown UI Integration: Live rendering of interactive widgets in chat responses
• Clean Interface: Modern, responsive design with floating input and auto-scroll

How it Works

The AI assistant is configured to demonstrate Markdown UI capabilities by:

1. Using interactive widgets like button groups and forms in responses
2. Starting with simple widgets that require minimal user effort
3. Progressing to more complex forms after user engagement
4. Keeping responses concise while showcasing widget functionality

Example Widget Types

• Button Groups: Multiple choice selections
• Forms: Multi-field input collection
• Sliders: Numeric value selection
• Select Dropdowns: Single or multi-select options
• Text Inputs: Free-form text entry

Getting Started

1. Clone this repository
2. Install dependencies: npm install
3. Start the development server: npm run dev
4. Add your OpenAI API key when prompted
5. Start chatting and see interactive widgets in action!

About Markdown UI

Markdown UI transforms static markdown into interactive experiences. Learn more at:

• Main Repository: https://github.com/BlueprintDesignLab/markdown-ui/
• Documentation: Available in the main repo
• Examples: See this chat demo in action

Technology Stack

• SvelteKit: Modern web framework
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first styling
• OpenAI API: AI chat completions
• Markdown UI: Interactive widget rendering
• Marked: Markdown parsing

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Contributing

This is a demo project showcasing Markdown UI capabilities. For contributions to the core Markdown UI library, please visit the main repository.

License

MIT License - see the main Markdown UI repository for full license details.