Web Component Example

This page demonstrates how to use the MCP Chat Widget as a web component

Usage Example

<!-- Include the web component script -->
<script src="https://mcpwrapper.app/api/widgets/2/loader.js" async></script>

widget-id: (Optional) The ID of the widget to load from the server
name: (Optional) The name of the chat widget
description: (Optional) A short description for the chat widget
system-prompt: (Optional) Custom system prompt for the AI
default-provider: (Optional) Default AI provider
position: (Optional) Position of the widget - "bottom-right" or "bottom-left"
size: (Optional) Size of the widget - "sm", "md", "lg", "xl", or "full"
mcp-servers: (Optional) JSON string of MCP servers configuration

You can see the web component in action by expanding the chat widget in the bottom right corner.