Meeting Times MCP App

A tiny MCP App that shows one meeting time across several time zones, as an interactive board you can open next to a chat.

This is the sample from the ProAI Clips video on building an MCP App and opening it in Claude. It follows the official MCP Apps getting started pattern and the ext-apps quickstart.

There are no API keys. Time zones use the IANA names your runtime already knows, through Intl.DateTimeFormat.

What it does

The tool is show-meeting-times. You pass:

• when — a date and time in ISO-8601, for example 2026-11-11T15:00

• from_zone — the IANA zone for that clock time (default Europe/London)

• zones — optional list of IANA zones to show

If when has no offset, it is read as a clock time in from_zone, not as UTC. So 3pm in London stays 3pm in London, including when Britain is on summer time.

The default board shows London, New York, San Francisco, Berlin, and Tokyo. The view lists each city's local time and date. You can type a new time in the view and ask the server to refresh the board.

A prompt that works in a host or in Claude:

Show me 3pm London on 11 November 2026 in New York, San Francisco and Tokyo.

Related MCP server: time-mcp-http

Stack

• Node.js 20 or newer

• TypeScript

• Vite (the view is bundled into a single HTML file)

• Express, with @modelcontextprotocol/express (createMcpExpressApp)

• @modelcontextprotocol/ext-apps, @modelcontextprotocol/server 2.x, and @modelcontextprotocol/node 2.x

• Zod for the tool input schema

Quick start

git clone https://github.com/schoolofai/claude-mcp-app-meeting-times
cd claude-mcp-app-meeting-times
npm install
npm start

The MCP endpoint is http://localhost:3001/mcp. npm start rebuilds the view as you edit it. For a one-shot production build:

npm run start:prod

Try it in the official local host

The MCP Apps repo ships a basic host that opens the app in a browser, without signing in to Claude.

git clone https://github.com/modelcontextprotocol/ext-apps
cd ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm start

Open http://localhost:8080. Call show-meeting-times, or send the prompt above if the host lets you chat.

You can also list tools with the official inspector:

npx @modelcontextprotocol/inspector --cli http://localhost:3001/mcp --transport http --method tools/list

Try it in Claude as a custom connector

Claude needs a public HTTPS URL to add a local server as a custom connector. Anthropic's testing docs recommend a Cloudflare Tunnel or ngrok.

1. Leave this server running on port 3001.

2. In another terminal, start a quick tunnel, for example:

   cloudflared tunnel --url http://localhost:3001

3. Copy the trycloudflare.com hostname (no https://) and restart the server with that host allowed. createMcpExpressApp only accepts localhost in the Host header unless you set ALLOWED_HOSTS:

   ALLOWED_HOSTS=your-subdomain.trycloudflare.com npm start

   If you prefer, start the tunnel first, then start the server with ALLOWED_HOSTS already set.

4. In Claude, add the connector at Customize → Connectors → Add → Add custom connector. Use the tunnel URL ending in /mcp, for example https://your-subdomain.trycloudflare.com/mcp. Keep the detected auth setting, or choose No sign-in if that is what the form shows for this sample. Then Add, and Connect if Claude shows that button.

Official steps: Add a custom connector. On Free, Pro, Max, and Ultra you add it from Customize. On Team and Enterprise, an Owner adds it in organization settings. On Free, you can have one custom connector.

The tunnel publishes your local server on the public internet. Keep it running only while you test, and do not put secrets in this project.

There is no staging environment. You test a custom connector in production, against your own Claude account.

Environment

Do not commit .env files or tunnel URLs.

License

MIT. Copyright (c) 2026 ProAI Clips.