Skip to main content

​
Overview

The sunpeak framework includes pre-built MCP resources consisting of React components in your project’s src/resources/ and src/components/ directories, respectively. These components are built on @openai/apps-sdk-ui and follow ChatGPT’s design guidelines.

​
Resources

Resources (from MCP) are top-level components that can be simulated or shipped to production. Resources are kept in the src/resources/ directory. Every file in this directory ending with -resource.tsx will be automatically built to dist/name.js, where the output name will be whatever was prefixed to -resource.tsx. See the Resource Library API Reference for all pre-packaged sunpeak resources.

​
Quick Example

import { Card } from "../components/card";

export function MCPResource() {
  return (
    <Card
      image="https://images.unsplash.com/photo-1520950237264-dfe336995c34"
      imageAlt="Lady Bird Lake"
      header="Lady Bird Lake"
      metadata="⭐ 4.5 • Austin, TX"
      button1={{ children: "Visit", isPrimary: true, onClick: () => {} }}
      button2={{ children: "Learn More", onClick: () => {} }}
    >
      Scenic lake perfect for kayaking, paddleboarding, and trails.
    </Card>
  );
}

​
High-Level Components

Sunpeak resources are built out of higher-level components in the src/components/ directory.

​
Customization

These components are included in your project source code, so you can modify them to fit your needs:
  • Edit directly: Components are in src/components/.
  • Add variants: Extend with new props or styles.
  • Create new components: Use these as templates.

​
Design Principles

All components follow (and are required to follow) ChatGPT’s design guidelines:

Theme Support

Automatic light/dark theme adaptation.

Responsive

Works on mobile, tablet, and desktop.

Accessible

WCAG 2.1 AA compliant.

Simple

UI reduced to the absolute minimum to support the context.

​
Low-Level Components

Beyond the framework components, you can use any component from @openai/apps-sdk-ui: 
import { Button, Input, Select } from '@openai/apps-sdk-ui/components';
See the OpenAI apps-sdk-ui documentation for the full low-level component library.

Component Library API Reference

All components provided by sunpeak.