AI Chatbot Interface

Boltboltchatbotaiinterface

Bolt.new prompt for an AI chatbot interface with streaming responses, markdown rendering, and conversation management.

Prompt

Build an AI chatbot interface similar to ChatGPT:

## Chat Interface
- Message bubbles: user messages right-aligned, AI responses left-aligned
- Markdown rendering in AI responses (code blocks, lists, bold, links)
- Code blocks with syntax highlighting and copy button
- Streaming text animation (words appearing progressively)
- Auto-scroll to latest message

## Input Area
- Expandable textarea that grows with content
- Send button and keyboard shortcut (Cmd+Enter)
- File attachment button (for images/documents)
- Character count indicator
- Disable send while AI is responding

## Sidebar
- Conversation history list
- New chat button
- Search conversations
- Delete and rename conversations
- Collapse sidebar on mobile

## Features
- Dark/light mode toggle
- Model selector dropdown
- System prompt editor (collapsible settings)
- Export conversation as markdown
- Regenerate last response button
- Stop generating button

Use React + TypeScript + Tailwind. Clean, minimal design. Responsive with mobile-optimized layout.

What you get when you save this prompt

Your workspace unlocks powerful tools to iterate and improve.

AI OPTIMIZE

AI Optimization

One-click improvement with structure analysis and pattern suggestions.

VERSION DIFF

Version History

Track every edit. Compare versions side-by-side with word-level diffs.

ORGANIZE

Development

Code Review

Testing

Marketing

Folders & Tags

Organize your library with nested folders, tags, and drag-and-drop.

MCP

$ npm i -g @promptingbox/mcp

Claude · Cursor · ChatGPT

Use Everywhere

Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.

Your prompts, organized

Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.