Overview
The sunpeak MCP server serves your built widget to ChatGPT via the Model Context Protocol. It’s designed for local development and testing.
runMCPServer
Import and run the MCP server:
import { runMCPServer } from 'sunpeak/mcp';
import path from 'path';
runMCPServer({
distPath: path.resolve(__dirname, '../dist/chatgpt/index.js'),
toolName: 'show-my-widget',
toolDescription: 'Display my custom widget',
dummyData: { /* your test data */ },
});
Configuration Options
Path to your built widget JavaScript file (e.g., dist/chatgpt/index.js)
name
string
default:"sunpeak-app"
MCP server name
Server port (can also be set via PORT environment variable)
Name of the MCP tool that triggers your widget
toolDescription
string
default:"Show the app"
Description of what the tool does
Test data to populate your widget during local development
provider
MCPProvider
default:"MCPProvider.ChatGPT"
Platform provider (currently only ChatGPT is supported)
Example Configuration
import { runMCPServer } from 'sunpeak/mcp';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
runMCPServer({
name: 'my-app',
version: '1.0.0',
distPath: path.resolve(__dirname, '../dist/chatgpt/index.js'),
toolName: 'show-places',
toolDescription: 'Show popular places in Austin',
dummyData: {
places: [
{
id: '1',
name: 'Lady Bird Lake',
rating: 4.5,
category: 'Waterfront',
location: 'Austin',
},
// ... more places
],
},
port: 6766,
});
Server Endpoints
The MCP server exposes these endpoints:
- GET
/mcp - SSE stream for MCP communication
- POST
/mcp/messages - Message endpoint for client requests
The server automatically creates:
- One MCP Tool - Named by
toolName, invoked by ChatGPT to show your widget
- One MCP Resource - Contains your built widget HTML/JavaScript
When the tool is called, it returns your dummyData as structuredContent, which your widget can access via useWidgetProps().
Dummy Data
The dummyData object simulates what a production MCP server would return. Your widget can access this data:
// In your widget
import { useWidgetProps } from 'sunpeak';
interface PlacesData {
places: Array<{
id: string;
name: string;
rating: number;
}>;
}
function MyWidget() {
const data = useWidgetProps<PlacesData>();
return (
<div>
{data.places.map(place => (
<div key={place.id}>{place.name}</div>
))}
</div>
);
}
This server is for local development only. For production, create your own MCP server that returns your widget URL as a resource. See the Deployment Guide. 
