Skip to main content

​
Overview

The sunpeak build command creates optimized, production-ready JavaScript bundles for your MCP Resources. Each Resource file is built as a separate, standalone bundle. 
sunpeak build

​
Output

The build process creates:
  • Minified JavaScript - Optimized and compressed for minimal file size
  • CSS extraction - Unused Tailwind styles removed automatically
  • Asset optimization - Static assets with hashed filenames for caching
  • Source maps - For debugging production issues

​
Output Directory

dist/
├── search.js      # Built resource bundle
├── search.json    # Resource metadata with generated URI
├── calendar.js
└── calendar.json
Each MCP Resource from src/resources/*-resource.tsx is built to dist/[name].js, with a corresponding [name].json metadata file.

​
Automatic Discovery

The build automatically discovers and builds all files matching the pattern: 
src/resources/*-resource.tsx
For example:
  • search-resource.tsx + search-resource.json → dist/search.js + dist/search.json
  • calendar-resource.tsx + calendar-resource.json → dist/calendar.js + dist/calendar.json

​
Metadata JSON Files

The build copies each source *-resource.json file to the dist directory and adds a generated uri field: 
{
  "name": "search",
  "title": "Search Widget",
  "description": "A search interface",
  "mimeType": "text/html+skybridge",
  "uri": "ui://search-mjdoy6rs",
  "_meta": { ... }
}
The uri is generated using the resource name and a build timestamp for cache invalidation.
No entry point configuration needed! The framework handles discovery automatically.

​
Build Optimizations

​
Tree Shaking

Unused code is automatically removed from the bundle: 
// Only the imported components are included in the bundle
import { Card, Button } from 'sunpeak';

​
Code Splitting

Each Resource is built as a separate bundle:
  • Reduces initial load time
  • Allows independent updates
  • Improves caching

​
CSS Purging

Tailwind CSS automatically removes unused utility classes:
  • Only classes actually used in your components are included
  • Significantly reduces CSS file size
  • No manual configuration required

​
Usage

sunpeak build

​
Deployment

After building, deploy the dist/ directory to any static hosting service:

Deployment Guide

Learn how to deploy your built widgets to production.

sunpeak dev

Develop with hot reload

sunpeak mcp

Test with ChatGPT locally