ChatMCP Widgets provides a lightweight, self-hosted platform to host and configure MCP-enabled chat widgets that can be embedded into websites and apps. It acts as a hub to create, manage, and configure AI-powered chat widgets, each of which can be connected to MCP servers to access external tools like file access, API integrations, and other capabilities. You can run multiple widgets with different providers (OpenAI or Anthropic) and tailor their behavior with per-widget system prompts. The platform emphasizes easy embedding, responsive design, and centralized management of widget configurations and MCP connections.

To use the MCP capabilities, first deploy the ChatMCP Widgets server, then create a widget via the admin dashboard. In the widget settings, you can add one or more MCP servers by providing the server URL and selecting the connection type (SSE or HTTP). Once connected, the widget can request tool access from the MCP server during conversations, enabling actions like retrieving data from external APIs or files. Embedding options include a traditional script embed or the Web Component approach, which provides a standards-based way to include the widget in any webpage or framework. The Web Component is built using a React-to-Web-Component bridge, ensuring compatibility with modern web stacks.

Prerequisites

• Node.js 18.x or later
• PostgreSQL database
• Access to install npm/pnpm/yarn
• Optional: OpenAI and/or Anthropic API keys

Installation steps

1. Clone the repository git clone https://github.com/your-organization/mcp-chat-widget.git cd mcp-chat-widget

2. Install dependencies npm install

   or

   yarn install

   or

   pnpm install

3. Set up environment variables Create a .env.local file in the project root with at least the following:

   DATABASE_URL="postgresql://user:password@localhost:5432/chatmcp" OPENAI_API_KEY="your-openai-api-key" ANTHROPIC_API_KEY="your-anthropic-api-key" NEXTAUTH_SECRET="your-auth-secret" NEXTAUTH_URL="http://localhost:3000"

4. Initialize and migrate the database (Drizzle ORM implied) pnpm db:generate pnpm db:push pnpm db:migrate pnpm db:studio

5. Run the development server npm run dev

   or

   yarn dev

   or

   pnpm dev

6. Open the app in your browser http://localhost:3000

Tips and notes:

• The platform supports multiple widget instances, each with its own provider (OpenAI or Anthropic) and per-widget system prompts.
• To enable MCP tools, ensure your MCP server URL is reachable from the hosting environment and that the server type (SSE or HTTP) is properly configured in the widget settings.
• If you encounter database connection issues, verify PostgreSQL is running and that the DATABASE_URL matches your local or remote database.
• For production deployments, consider configuring environment variables securely and enabling proper authentication and access controls for the admin dashboard.
• The Web Component build output is placed in public/dist/mcp-chat-widget.js; you can reference this bundle in production embeddings if you prefer the Web Component path.