Name: Openai Apps Mcp
Author: Juamnoz

搵技能.../

Openai Apps Mcp | Skills Pool

npm create cloudflare@latest my-openai-app -- --type hello-world --ts --git --deploy false
cd my-openai-app
npm install @modelcontextprotocol/[email protected] [email protected] [email protected]
npm install -D @cloudflare/[email protected] [email protected]

{
  "name": "my-openai-app",
  "main": "dist/index.js",
  "compatibility_flags": ["nodejs_compat"],  // Required for MCP SDK
  "assets": {
    "directory": "dist/client",
    "binding": "ASSETS"  // Must match TypeScript
  }
}

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { ListToolsRequestSchema, CallToolRequestSchema } from '@modelcontextprotocol/sdk/types.js';

const app = new Hono<{ Bindings: { ASSETS: Fetcher } }>();

// CRITICAL: Must allow chatgpt.com
app.use('/mcp/*', cors({ origin: 'https://chatgpt.com' }));

const mcpServer = new Server(
  { name: 'my-app', version: '1.0.0' },
  { capabilities: { tools: {}, resources: {} } }
);

// Tool registration
mcpServer.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [{
    name: 'hello',
    description: 'Use this when user wants to see a greeting',
    inputSchema: {
      type: 'object',
      properties: { name: { type: 'string' } },
      required: ['name']
    },
    annotations: {
      openai: { outputTemplate: 'ui://widget/hello.html' }  // Widget URI
    }
  }]
}));

// Tool execution
mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'hello') {
    const { name } = request.params.arguments as { name: string };
    return {
      content: [{ type: 'text', text: `Hello, ${name}!` }],
      _meta: { initialData: { name } }  // Passed to widget
    };
  }
  throw new Error(`Unknown tool: ${request.params.name}`);
});

app.post('/mcp', async (c) => {
  const body = await c.req.json();
  const response = await mcpServer.handleRequest(body);
  return c.json(response);
});

app.get('/widgets/*', async (c) => c.env.ASSETS.fetch(c.req.raw));

export default app;

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; padding: 20px; font-family: system-ui; }
  </style>
</head>
<body>
  <div id="greeting">Loading...</div>
  <script>
    if (window.openai && window.openai.getInitialData) {
      const data = window.openai.getInitialData();
      document.getElementById('greeting').textContent = `Hello, ${data.name}! 👋`;
    }
  </script>
</body>
</html>

npm run build
npx wrangler deploy
npx @modelcontextprotocol/inspector https://my-app.workers.dev/mcp

Openai Apps Mcp

Building OpenAI Apps with Stateless MCP Servers

Overview

Quick Start

1. Scaffold & Install

Openai Apps Mcp

Building OpenAI Apps with Stateless MCP Servers

Overview

Quick Start

1. Scaffold & Install

2. Configure wrangler.jsonc

3. Create MCP Server (`src/index.ts`)

4. Create Widget (`src/widgets/hello.html`)

5. Deploy

Critical Requirements

Known Issues Prevention

Issue #1: CORS Policy Blocks MCP Endpoint

Issue #2: Widget Returns 404 Not Found

Notion

Prose

Coding Agent (bash-first)

Continuous Learning

Security Review

Widget Generator

Openai Apps Mcp

Building OpenAI Apps with Stateless MCP Servers

Overview

Quick Start

1. Scaffold & Install

Openai Apps Mcp

Building OpenAI Apps with Stateless MCP Servers

Overview

Quick Start

1. Scaffold & Install

2. Configure wrangler.jsonc

3. Create MCP Server (src/index.ts)

4. Create Widget (src/widgets/hello.html)

5. Deploy

Critical Requirements

Known Issues Prevention

Issue #1: CORS Policy Blocks MCP Endpoint

Issue #2: Widget Returns 404 Not Found

Notion

Prose

Coding Agent (bash-first)

Continuous Learning

Security Review

Widget Generator

3. Create MCP Server (`src/index.ts`)

4. Create Widget (`src/widgets/hello.html`)