Skip to main content

​
Overview

The sunpeak framework includes pre-built MCP resources in your project’s src/resources/ directory. Each resource lives in its own folder with its component, metadata, and related components. These components follow MCP App design best practices and use sunpeak’s built-in component primitives.

​
Resources

Resources (from MCP) are top-level components that can be simulated or shipped to production. Each resource lives in its own folder under src/resources/{name}/:
  • {name}-resource.tsx - React component + resource metadata (export const resource: ResourceConfig)
  • components/ - Optional resource-specific components
Simulation files live separately in tests/simulations/{name}/. See the Resource Library API Reference for all pre-packaged sunpeak resources.

​
High-Level Components

Sunpeak resources are built out of higher-level components that live alongside each resource in src/resources/{name}/components/.

​
Customization

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

​
Design Principles

All components follow MCP App design best practices:

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 build your own primitives using standard React patterns and Tailwind CSS. The framework provides semantic design tokens that work across light and dark themes.

Component Library API Reference

All components provided by sunpeak.