An MCP (Model Context Protocol) server built with Zuplo that provides interactive GitHub profile statistics with rich visual rendering in ChatGPT using the OpenAI Apps SDK.

What This Example Does#

When connected to ChatGPT, this MCP server provides a get_github_stats tool that:

1. Accepts any GitHub username as a parameter
2. Fetches their profile data (repos, followers, stars, languages)
3. Returns a summary for the AI to reason about
4. Renders an interactive visual widget showing:
   • Profile header with avatar and bio
   • Stats cards (repos, stars, followers, forks)
   • Language distribution bar chart
   • Top repositories list
   • Search box to look up any other GitHub user

This demonstrates how the OpenAI Apps SDK enables rich, interactive visualizations that would be impossible with text-only MCP responses.

Interactive Features#

The widget includes a search input that lets users explore different GitHub profiles without leaving the widget:

• Initial data is loaded when you ask about a user
• Type any username in the search box and click "Search"
• The widget calls window.openai.callTool() to fetch new data
• Charts and stats update in real-time

Example prompts:

• "Show me GitHub stats for Zuplo"

Configuration#

Optional: Environment Variables#

Set these in your Zuplo project settings:

Setting Environment Variables in Zuplo#

1. Go to your Zuplo project dashboard
2. Navigate to Settings → Environment Variables
3. (Optional) Add GITHUB_USERNAME as a default fallback
4. (Recommended) Add GITHUB_TOKEN with a GitHub Personal Access Token for better rate limits

Deployment#

Prerequisites#

• A Zuplo account

Deploy to Zuplo#

1. Set up the project using a template

   npx create-zuplo-api@latest --example mcp-server-openai-apps-sdk

2. Deploy to Zuplo

   npx zuplo deploy

3. Get your MCP endpoint URL Your MCP server will be available at:

   https://<your-project>.zuplo.app/mcp
   

Connecting to ChatGPT#

1. Open ChatGPT (in Developer Mode) and go to Settings → Connected Apps
2. Add a new MCP server with your Zuplo endpoint URL
3. Ask ChatGPT: "Show me GitHub stats for octocat"

Local Development#

You can make changes to the code and develop this example locally by running

npm run dev

This starts the Zuplo dev server, and a local version of the Zuplo Route Designer.

Resources#

• Zuplo MCP Server Docs
• Zuplo OpenAI Apps SDK Integration
• OpenAI Apps SDK