About MCP via the OpenAI Responses API
Framework connecting MCP servers via OpenAI's Responses API. Builds web apps with Cloudflare Workers, React, and TailwindCSS integrated with remote MCP services.
Key features
- 01OpenAI Responses API support
- 02Cloudflare Workers deployment
- 03React and TailwindCSS UI
- 04Remote MCP server connection
Use cases
- 01Integrating MCP services in web applications
- 02AI feature development on Cloudflare platform
MCP support
Connects to remote MCP servers via OpenAI's Responses API, handling tool interactions and data flow.
Details
From the project READMEMCP 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
varssection to your ownREMOTE_WHOA_SERVER_URLandLOGGED_IN_USER.
npm run dev
Deploy
Set your secrets on the server
npx wrangler secret bulk .dev.vars
npm run deploy
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.