ChatGPT应用SDK演示

ChatGPT Apps SDK + Composio Demo (Next.js)

A Next.js demo that showcases how to build ChatGPT Apps with custom widgets, powered by Composio’s 500+ integrations and the Rube MCP runtime. The project exposes an MCP server at /mcp, creates Google Calendar events through Composio, and renders rich meeting details inside ChatGPT using the Apps SDK widget APIs.

💡 Especially, you'll see how to work when the tools are hosted Remotely and not something you build out manually.

👀 Check Out My Blog Post on this Project!

I have a blog post about this project here.

✨ Highlights

• Next.js 15 + React 19 front-end tuned for ChatGPT’s widget sandbox.
• MCP server (via mcp-handler) served directly from Next.js /mcp.
• Composio tooling to execute Google Calendar actions (or any of 500+ integrations).
• Widget-driven UI that renders meeting details inside ChatGPT conversations.
• Ngrok-friendly setup for quick iteration without deploying to production.

Prerequisites

• A Composio account with an API key, user ID, and Google Calendar auth config.
• (Optional) Ngrok for tunnelling your local dev server.
• Access to ChatGPT Developer Mode so you can register custom Apps.

Quick Start

1. Clone the repo

   复制

   git clone https://github.com/shricodev/chatgpt-apps-sdk-demo-composio.git
   cd chatgpt-apps-sdk-demo-composio
   

2. Install dependencies

   复制

   pnpm install
   

3. Configure environment variables
   Create a .env file in the project root and populate the Composio credentials: For this, I've used Google Calendar, but you'll have to change based on your usage.

   复制

   COMPOSIO_API_KEY=<YOUR_COMPOSIO_API_KEY>
   COMPOSIO_USER_ID=<YOUR_COMPOSIO_USER_ID>
   
   CALENDAR_AUTH_CONFIG_ID=<YOUR_COMPOSIO_CALENDAR_AUTH_CONFIG_ID>
   

   • COMPOSIO_API_KEY: found in the Composio dashboard.
   • COMPOSIO_USER_ID: the external user identifier created for your account.
   • CALENDAR_AUTH_CONFIG_ID: Google Calendar auth config ID (starts with ac_...).

   The MCP handler will attempt to link your Composio account on startup and will log a redirect URL if you still need to grant access.

4. Start the dev server

   复制

   pnpm dev
   

   The UI is available at http://localhost:3000. The MCP server is served from http://localhost:3000/mcp.

Expose the App to ChatGPT

ChatGPT cannot reach localhost, so expose the dev server with Ngrok (or your preferred tunnelling solution).

ngrok http 3000   # make sure your Next.js app is running first

Keep the generated public URL handy—we’ll append /mcp when registering the app.

Register the App in ChatGPT

1. Open ChatGPT → Settings → Additional Settings → Apps & connectors and enable Developer mode.
2. Click Create and fill in:
   • MCP Server URL: https://<your-ngrok-subdomain>.ngrok-free.dev/mcp
   • Name / Description: anything you like (e.g., “Composio Calendar Widgets”).
   • Authentication: set to No authentication (Composio handles auth separately).
3. Save the connector and authorize any prompts from Composio if you haven’t already.
4. In a chat, mention your app (e.g., @Composio Calendar Widgets) and ask it to schedule a meeting—ChatGPT will call the MCP server, execute the Composio tool, and render the widget from /meet-details.

Try It

• In ChatGPT, enter a prompt such as:

  @Composio Calendar Widgets create a 30-minute meeting with alex@example.com tomorrow at 3 PM titled Planning Sync

• After the tool runs, the widget rendered from /meet-details displays the meeting summary, duration, attendees, and links back to Google Calendar. Toggle fullscreen to explore the full layout.

Skip the UI: Use Rube MCP Directly

If you just need fast access to Composio’s 500+ integrations without building widgets:

1. Enable Developer Mode (as above).
2. Create a new connector with:
   • MCP Server URL: https://rube.app/mcp
   • Configure OAuth when prompted.
3. Allow the requested scopes. You’ll see six Rube actions (RUBE_CREATE_PLAN, RUBE_MULTI_EXECUTE_TOOL, etc.) become available inside ChatGPT.

The Rube MCP server exposes:

• RUBE_CREATE_PLAN – produce execution plans for LLMs.
• RUBE_MULTI_EXECUTE_TOOL – run multiple tools in parallel.
• RUBE_REMOTE_BASH_TOOL – execute shell commands in a remote sandbox.
• RUBE_REMOTE_WORKBENCH – run Python snippets against remote files.
• RUBE_SEARCH_TOOLS – discover available tools.
• RUBE_MANAGE_CONNECTIONS – handle authentication flows.

This approach skips the Next.js UI entirely while still giving ChatGPT access to Composio-powered tools.

Useful Scripts

• pnpm dev – Run Next.js locally with Turbopack (http://localhost:3000).
• pnpm build – Production build (also uses Turbopack).
• pnpm start – Run the compiled app.

Troubleshooting

• Composio linking fails: re-run the dev server and visit the redirect URL printed in the terminal to finish authentication.
• Widget shows placeholder data: make sure you’re invoking the tool from ChatGPT—opening the page directly in a browser won’t populate window.openai.
• Ngrok URL changes: update the MCP Server URL inside ChatGPT every time Ngrok assigns a new domain.

Happy building! If you ship something cool with this starter, drop a note on @shricodev.