MCP via the OpenAI Responses API

by craigsdennis

MCP Client 1 stars
  • agent-framework

Makes use of the new OpenAI MCP tool and your remote MCP Server

About

What is MCP via the OpenAI Responses API?

This is an example application that demonstrates how to connect to remote MCP servers using the OpenAI Responses API. It is built with the Cloudflare Vite Plugin, React, TailwindCSS, and ShadCN, and is intended for developers exploring MCP integration with OpenAI.

How to use MCP via the OpenAI Responses API?

To set up, copy .dev.vars.example to .dev.vars, add your OpenAI API key, and modify the wrangler.jsonc vars section with your REMOTE_WHOA_SERVER_URL and LOGGED_IN_USER. Then run npm run dev to start locally. For deployment, use npx wrangler secret bulk .dev.vars and npm run deploy.

Key features of MCP via the OpenAI Responses API

- Connects to remote MCP servers via OpenAI Responses API
- Built with React, TailwindCSS, and ShadCN on Cloudflare Workers
- Provides a reference implementation for MCP tool integration
- Includes local development and deployment scripts

Use cases of MCP via the OpenAI Responses API

- Demonstrating how to use MCP servers with OpenAI Responses API
- Building a web application that interacts with a remote MCP server
- Serving as a starting point for developers to customize MCP integrations
- Deploying an MCP-connected app to Cloudflare Workers

FAQ from MCP via the

Details

Author
craigsdennis
GitHub stars
1
Category
agent-framework
Repository
craigsdennis/openai-responses-mcp-client-enabled

MCP via the OpenAI Responses API

OpenAI added the ability to connect to MCP servers using the Responses API. You provide a type of tool MCP, pass along the correct headers, and connects to your remote MCP server and does all the handling.

This example uses the Cloudflare Vite Plugin + React + TailwindCSS + ShadCN.

It connects to a Remote MCP server that tracks whoas, which you can host.

Build

- Copy .dev.vars.example to .dev.vars
- Add your OpenAI API key
- Modify wrangler.jsonc vars section to your own REMOTE_WHOA_SERVER_URL and LOGGED_IN_USER.

npm run dev

Deploy

Set your secrets on the server

npx wrangler secret bulk .dev.vars
npm run deploy