Skip to main content
Glama
ralfboltshauser

Zurich Pet Insurance MCP Server

by ralfboltshauser
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Remote

ChatGPT Apps SDK Next.js Starter — Zurich Pet Insurance

A minimal Next.js application demonstrating how to build an OpenAI Apps SDK compatible MCP server with widget rendering in ChatGPT.

Use case docs: See docs/README.md for the Zurich Agentic Commerce challenge brief, DA Direkt AS-IS journey, pain points, and Petolo API documentation.

Pet insurance journey

ChatGPT-native flow for DA Direkt dog insurance:

  1. Research — research_pet_insurance loads Komfort / Premium / Premium Plus plans

  2. Quote — get_pet_quote returns live monthly prices from the Petolo API

  3. Apply — start_or_update_application creates/updates a lead

  4. Sign & bind — bind_pet_insurance accepts documents and submits the application

Widget UI: /widgets/journey (rendered in ChatGPT iframe)

Environment variables

Copy .env.example to .env.local:

PETOLO_API_BASE_URL=https://beta.dentolo-test.de
PETOLO_API_KEY=<from docs/use-case-data/READ_ME_API_ACCESS.pdf>

Connect to ChatGPT

  1. Deploy to Vercel (or run pnpm dev with a tunnel)

  2. In ChatGPT → Settings → Connectors → add https://your-app.vercel.app/mcp

  3. Ask: "I need dog insurance for my Labrador born 2020-01-01"

Related MCP server: Rover MCP Server

Overview

This project integrates a Next.js application with the ChatGPT Apps SDK using the Model Context Protocol (MCP). It exposes pet insurance tools and a journey widget that renders inside ChatGPT.

Key Components

1. MCP Server Route (app/mcp/route.ts)

The core MCP server implementation that exposes tools and resources to ChatGPT.

Key features:

  • Tool registration with OpenAI-specific metadata

  • Resource registration that serves HTML content for iframe rendering

  • Cross-linking between tools and resources via templateUri

OpenAI-specific metadata:

{
  "openai/outputTemplate": widget.templateUri,      // Links to resource
  "openai/toolInvocation/invoking": "Loading...",   // Loading state text
  "openai/toolInvocation/invoked": "Loaded",        // Completion state text
  "openai/widgetAccessible": false,                 // Widget visibility
  "openai/resultCanProduceWidget": true            // Enable widget rendering
}

Full configuration options: OpenAI Apps SDK MCP Documentation

2. Asset Configuration (next.config.ts)

Critical: Set assetPrefix to ensure /_next/ static assets are fetched from the correct origin:

const nextConfig: NextConfig = {
  assetPrefix: baseURL,  // Prevents 404s on /_next/ files in iframe
};

Without this, Next.js will attempt to load assets from the iframe's URL, causing 404 errors.

3. CORS Middleware (middleware.ts)

Handles browser OPTIONS preflight requests required for cross-origin RSC (React Server Components) fetching during client-side navigation:

export function middleware(request: NextRequest) {
  if (request.method === "OPTIONS") {
    // Return 204 with CORS headers
  }
  // Add CORS headers to all responses
}

4. SDK Bootstrap (app/layout.tsx)

The <NextChatSDKBootstrap> component patches browser APIs to work correctly within the ChatGPT iframe:

What it patches:

  • history.pushState / history.replaceState - Prevents full-origin URLs in history

  • window.fetch - Rewrites same-origin requests to use the correct base URL

  • <html> attribute observer - Prevents ChatGPT from modifying the root element

Required configuration:

<html lang="en" suppressHydrationWarning>
  <head>
    <NextChatSDKBootstrap baseUrl={baseURL} />
  </head>
  <body>{children}</body>
</html>

Note: suppressHydrationWarning is currently required because ChatGPT modifies the initial HTML before the Next.js app hydrates, causing hydration mismatches.

Getting Started

Installation

npm install
# or
pnpm install

Development

npm run dev
# or
pnpm dev

Open http://localhost:3000 to see the app.

Testing the MCP Server

The MCP server is available at:

http://localhost:3000/mcp

Connecting from ChatGPT

  1. Deploy your app to Vercel

  2. In ChatGPT, navigate to Settings → Connectors → Create and add your MCP server URL with the /mcp path (e.g., https://your-app.vercel.app/mcp)

Note: Connecting MCP servers to ChatGPT requires developer mode access. See the connection guide for setup instructions.

Project Structure

app/
├── mcp/
│   └── route.ts          # MCP server with tool/resource registration
├── layout.tsx            # Root layout with SDK bootstrap
├── page.tsx              # Homepage content
└── globals.css           # Global styles
middleware.ts             # CORS handling for RSC
next.config.ts            # Asset prefix configuration

How It Works

  1. Tool Invocation: ChatGPT calls a tool registered in app/mcp/route.ts

  2. Resource Reference: Tool response includes templateUri pointing to a registered resource

  3. Widget Rendering: ChatGPT fetches the resource HTML and renders it in an iframe

  4. Client Hydration: Next.js hydrates the app inside the iframe with patched APIs

  5. Navigation: Client-side navigation uses patched fetch to load RSC payloads

Learn More

Deployment

This project is designed to work seamlessly with Vercel deployment. The baseUrl.ts configuration automatically detects Vercel environment variables and sets the correct asset URLs.

Deploy with Vercel

The configuration automatically handles:

  • Production URLs via VERCEL_PROJECT_PRODUCTION_URL

  • Preview/branch URLs via VERCEL_BRANCH_URL

  • Asset prefixing for correct resource loading in iframes

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityMaintained
ResponsivenessSyncing

Resources

Related MCP Connectors

Related MCP Servers

  • Petstore MCP Server

    rachana-tf
    F
    license
    Not graded
    quality
    C
    maintenance
    Enables interaction with a sample Pet Store API based on OpenAPI 3.1 specification, allowing users to manage pet store operations through natural language commands.
    -

  • Rover MCP Server

    markswendsen-code
    A
    license
    A
    quality
    D
    maintenance
    Enables AI assistants to search for pet sitters, manage bookings, and handle pet profiles through the Rover pet services marketplace. It facilitates direct communication with sitters and service management using Playwright-based browser automation.
    13
    8 npm
    1
    MIT

  • Lemonade MCP Server

    markswendsen-code
    A
    license
    A
    quality
    D
    maintenance
    Enables AI assistants to interact with Lemonade's insurance services for renters, homeowners, pet, and car insurance using Playwright browser automation. Users can retrieve quotes, manage existing policies, file claims, and access policy documents through natural language.
    7
    8 npm
    MIT

  • PetSmart MCP Server

    markswendsen-code
    A
    license
    A
    quality
    D
    maintenance
    Enables AI assistants to search for pet products, manage shopping carts, and book grooming or training services directly through PetSmart's website. It also facilitates finding nearby store locations and accessing detailed product specifications.
    7
    8 npm
    MIT