What is Examples

An AI-powered chat application that utilizes Model Context Protocol (MCP) Widgets for server-side rendered UI components. These interactive UI snippets enhance user interaction by providing structured information such as weather forecasts and e-commerce listings within the chat interface.

Use cases

The application is ideal for scenarios requiring real-time information retrieval, such as checking weather conditions for various locations or exploring and purchasing products online. It engages users with visual elements, making interactions more intuitive and enriching.

How to use

Users can begin by sending queries through the chat interface. The AI analyzes the queries, identifies whether they pertain to weather or e-commerce, and subsequently invokes the corresponding MCP service. The rich UI content generated by the MCP is then displayed within the chat, enhancing user experience.

Key features

The application features specialized MCPs for weather and e-commerce, which include capabilities like fetching weather forecasts, displaying visual widgets, product search and filtering, and interactive product cards. The design is responsive, ensuring usability across devices.

Where to use

This application can be utilized in diverse environments such as customer service bots, online shopping platforms, weather information services, and any context where users benefit from interactive, visual data presentations in chat formats.

AI-Powered Chat Application with MCP Widgets

Introducing Model Context Protocol (MCP) Widgets, server side rendered UI snippets that are delivered as part of the MCP response to the client application.

This project demonstrates a modern AI chat application that uses the MCP to enable rich, interactive responses beyond just text. The application integrates specialized MCP widgets to display structured data like weather forecasts and product listings.

Request for comments

Check out the RFC repository.

Example video

Use the two example prompts to trigger the ecommerce or weather MCP and receive UI widgets.
https://github.com/user-attachments/assets/9f958dfb-600c-4f48-a44b-ca80cd2d4c02

System Architecture

The application consists of three main components:

1. AI Chatbot - The frontend chat interface where users interact with the AI
2. Weather MCP - A specialized service providing weather forecasts with visual displays
3. E-commerce MCP - A specialized service for product discovery and browsing

Features

Weather MCP

• Fetch weather forecasts for any location using coordinates
• Display beautiful visual weather widgets
• Show temperature, forecast, wind conditions, and more
• Responsive design that works on mobile and desktop

E-commerce MCP

• Product search and filtering capabilities
• Category browsing
• Product recommendations
• Interactive product cards with images, price, ratings, and availability
• Responsive grid layout for multiple products

How It Works

This application uses the Model Context Protocol (MCP) to bridge AI models with specialized UI components:

1. User queries are sent to the AI model
2. When weather or shopping-related queries are detected, the AI invokes the appropriate MCP
3. The MCP processes the request and returns HTML/CSS rendering along with minimal text data
4. The chat interface displays the rich visual content to the user

Configuration

Changing AI Models

You can easily switch AI models by updating the providers.ts file:

export const myProvider = isTestEnvironment
  ? customProvider({
      languageModels: {
        'chat-model': chatModel,
        'chat-model-reasoning': reasoningModel,
        'title-model': titleModel,
        'artifact-model': artifactModel,
      },
    })
  : customProvider({
      languageModels: {
        'chat-model': openai('gpt-4o'),  // Change this to use a different model
        'chat-model-reasoning': wrapLanguageModel({
          model: openai('gpt-4o'),  // Change this to use a different model
          middleware: extractReasoningMiddleware({ tagName: 'think' }),
        }),
        'title-model': openai('gpt-4o'),  // Change this to use a different model
        'artifact-model': openai('gpt-4o'),  // Change this to use a different model
      },
    });

API Keys

To use OpenAI models, you’ll need to set up your API key:

1. Create a .env.local file in the root directory
2. Add your OpenAI API key:

   OPENAI_API_KEY=your_api_key_here
   

Development

Starting the Application

# Install dependencies
npm install

# Start the development server
npm run dev

Building MCP Widgets

Each MCP must be built separately:

# Build the Weather MCP
cd apps/weather-mcp
npm run build

# Build the E-commerce MCP
cd apps/ecommerce-mcp
npm run build

Extending the System

You can add more MCPs by:

1. Creating a new MCP service in the apps/ directory
2. Implementing the Model Context Protocol
3. Adding visualization components
4. Registering it with the MCP clients in `apps/ai-chatbo/lib/tools

This architecture can be extended to support many types of interactive widgets beyond weather and e-commerce, such as calendars, maps, charts, and more.

Acknowledgements

This project is heavily relying on the work the anthopic team did with the Model Context Protocol and the Vercel’s team of making AI tools accessible via their AI SDK and their example project Vercel AI Chatbot.