MCP Chat Component Demo

Welcome to the MCP Chat Demo

This page demonstrates the MCP (Model Context Protocol) chat component that can be embedded in any website.

The chat widget appears in the bottom-right corner of your screen. Click on it to start chatting!

Features

• Web component that works on any website
• Connects to MCP servers for enhanced capabilities
• Powered by Vercel AI SDK
• Clean, modern chat interface
• Real-time streaming responses
• Local Storage Persistence: Messages are automatically saved to browser's local storage
• Context Messages: The context-messages attribute controls how many previous messages are sent as context (default: 10)
• Site-wide Storage: Conversation persists across all pages of the same domain
• Download Conversation: Download icon exports the conversation as a JSON file with accurate timestamps
• Clear Chat Button: Trash icon in the header clears the conversation (with confirmation)
• Starting Message Preservation: The starting message is always preserved when clearing chat

How to Test Local Storage

1. Click the chat button to open the chat
2. Send some messages to the AI assistant
3. Close the chat window
4. Refresh the page
5. Open the chat again - your previous messages should be restored!
6. Use the download icon to export your conversation as JSON
7. Use the trash icon to clear the chat history

Component Configuration

The chat component supports various attributes for customization:

• api-url - Backend API endpoint
• title - Chat window title
• primary-color - Theme color
• context-messages - Number of message pairs to send as context (default: 10)
• starting-message - Initial message shown to users
• button-position - Position of the chat button (fixed, absolute, or unset)
• button-bottom, button-right, button-left, button-top - Button positioning
• button-width, button-height - Button dimensions

Integration

To integrate this chat component into your website:

<!-- Include the component script -->
<script type="module" src="path/to/mcp-chat-component.js"></script>

<!-- Add the chat component with your configuration -->
<mcp-chat 
  api-url="https://your-api-endpoint.com/api"
  title="Your Chat Title"
  primary-color="#0084ff"
  context-messages="10"
  starting-message="Welcome! How can I help you today?"
></mcp-chat>