sunpeak 0.5.31 โ 0.5.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -35
- package/package.json +1 -1
- package/template/README.md +0 -2
- package/template/node_modules/.vite/deps/_metadata.json +11 -11
- package/template/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -1
- package/template/src/dev/entry.tsx +0 -0
- package/template/src/mcp/entry.ts +0 -0
package/README.md
CHANGED
|
@@ -17,9 +17,12 @@
|
|
|
17
17
|
|
|
18
18
|
The MCP App SDK.
|
|
19
19
|
|
|
20
|
-
Quickstart, build, and
|
|
20
|
+
Quickstart, build, test, and ship your ChatGPT App locally!
|
|
21
21
|
|
|
22
|
-
[
|
|
22
|
+
[Demo (Hosted)](https://sunpeak.ai/#simulator) ~
|
|
23
|
+
[Demo (Video)](https://d10djik02wlf6x.cloudfront.net/sunpeak-demo-prod.mp4) ~
|
|
24
|
+
[Documentation](https://docs.sunpeak.ai/) ~
|
|
25
|
+
[GitHub](https://github.com/Sunpeak-AI/sunpeak)
|
|
23
26
|
|
|
24
27
|
<div align="center">
|
|
25
28
|
<a href="https://docs.sunpeak.ai/library/chatgpt-simulator">
|
|
@@ -36,38 +39,35 @@ Quickstart, build, and test your ChatGPT App locally with OpenAI apps-sdk-ui Rea
|
|
|
36
39
|
Requirements: Node (20+), pnpm (10+)
|
|
37
40
|
|
|
38
41
|
```bash
|
|
39
|
-
|
|
40
|
-
npx sunpeak new my-app
|
|
41
|
-
|
|
42
|
-
# Or with pnpm
|
|
43
|
-
pnpm dlx sunpeak new my-app
|
|
44
|
-
|
|
45
|
-
# Start developing
|
|
46
|
-
cd my-app
|
|
47
|
-
pnpm install
|
|
48
|
-
pnpm dev
|
|
42
|
+
pnpm dlx sunpeak new
|
|
49
43
|
```
|
|
50
44
|
|
|
51
45
|
To add sunpeak to an existing project, refer to the [documentation](https://docs.sunpeak.ai/add-to-existing-project).
|
|
52
46
|
|
|
53
|
-
##
|
|
47
|
+
## Overview
|
|
48
|
+
|
|
49
|
+
sunpeak is an npm package consisting of:
|
|
50
|
+
|
|
51
|
+
1. **The `sunpeak` library** (`./src`). An npm package for running & testing MCP Apps. This standalone library contains:
|
|
52
|
+
1. Runtime APIs - Strongly typed, multi-platform APIs for interacting with the ChatGPT runtime, architected to support future platforms (Gemini, Claude).
|
|
53
|
+
2. ChatGPT simulator - React component replicating ChatGPT's runtime.
|
|
54
|
+
3. MCP server - Mock data MCP server for testing local Resources in the real ChatGPT.
|
|
55
|
+
2. **The `sunpeak` framework** (`./template`). An end-to-end framework MCP Apps, from quickstart to shipped. This templated npm package includes:
|
|
56
|
+
1. Project scaffold - Complete development setup with build, test, and mcp tooling.
|
|
57
|
+
2. UI components - Production-ready components following ChatGPT design guidelines and using OpenAI apps-sdk-ui React components.
|
|
58
|
+
3. CLI utility (`./bin`) - Commands for working with the sunpeak framework.
|
|
54
59
|
|
|
55
|
-
|
|
56
|
-
- ๐ [Pre-built component library](https://docs.sunpeak.ai/template/ui-components) built on [openai/apps-sdk-ui](https://github.com/openai/apps-sdk-ui).
|
|
57
|
-
- ๐ฑ [Multi-platform interface](https://docs.sunpeak.ai/library/multi-platform-apis) for portable MCP UI App development.
|
|
58
|
-
- ๐ [Basic MCP server](https://docs.sunpeak.ai/library/mcp-server) to serve your UI to ChatGPT prod out-of-the-box.
|
|
59
|
-
- ๐งช [Testing framework](https://docs.sunpeak.ai/guides/testing) that replicates advanced ChatGPT behavior locally.
|
|
60
|
+
Note that the `sunpeak` library can be used without the framework.
|
|
60
61
|
|
|
61
62
|
## Example Component
|
|
62
63
|
|
|
63
64
|
```tsx
|
|
64
|
-
import '
|
|
65
|
-
import { Card } from './components/card';
|
|
65
|
+
import { Card } from '../card';
|
|
66
66
|
|
|
67
|
-
export
|
|
67
|
+
export function MCPResource() {
|
|
68
68
|
return (
|
|
69
69
|
<Card
|
|
70
|
-
image="https://images.unsplash.com/photo-1520950237264-dfe336995c34
|
|
70
|
+
image="https://images.unsplash.com/photo-1520950237264-dfe336995c34"
|
|
71
71
|
imageAlt="Lady Bird Lake"
|
|
72
72
|
header="Lady Bird Lake"
|
|
73
73
|
metadata="โญ 4.5 โข Austin, TX"
|
|
@@ -80,19 +80,6 @@ export default function App() {
|
|
|
80
80
|
}
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
## What is sunpeak exactly?
|
|
84
|
-
|
|
85
|
-
sunpeak is an npm package consisting of:
|
|
86
|
-
|
|
87
|
-
1. **A CLI utility** for working with sunpeak (`./bin`).
|
|
88
|
-
2. **A templated npm package** (`./template`). This template includes:
|
|
89
|
-
1. Project scaffold - Complete development setup with build, test, and dev tooling.
|
|
90
|
-
2. Pre-built UI components - Production-ready components following ChatGPT design guidelines.
|
|
91
|
-
3. **The `sunpeak` library** (`./src`). This library contains:
|
|
92
|
-
1. Multi-platform APIs - Abstraction layer for future platform support (Gemini, Claude).
|
|
93
|
-
2. ChatGPT simulator - Local development environment replicating ChatGPT's widget runtime.
|
|
94
|
-
3. MCP server - View local widgets in the real ChatGPT.
|
|
95
|
-
|
|
96
83
|
## Contributing
|
|
97
84
|
|
|
98
85
|
We welcome your contributions!
|
package/package.json
CHANGED
package/template/README.md
CHANGED
|
@@ -31,13 +31,11 @@ The template includes a minimal test setup with Vitest. You can add additional t
|
|
|
31
31
|
- Package.json scripts - Add your own tooling (lint, format, typecheck, etc.)
|
|
32
32
|
- Component structure within `src/components/`
|
|
33
33
|
- Package manager (pnpm, npm, or yarn auto-detected)
|
|
34
|
-
- Vite dev server configuration
|
|
35
34
|
|
|
36
35
|
**Do not customize (required by `sunpeak build`):**
|
|
37
36
|
|
|
38
37
|
- `src/components/resources/` - Resource files must be here
|
|
39
38
|
- `src/index-resource.tsx` - Build template (must have `// RESOURCE_IMPORT` and `// RESOURCE_MOUNT` comments)
|
|
40
|
-
- `vite.config.build.ts` - Build configuration
|
|
41
39
|
- Resource file naming: `*-resource.tsx` (e.g., `counter-resource.tsx`)
|
|
42
40
|
|
|
43
41
|
If you need to customize these paths, create a custom build script instead of using `sunpeak build`.
|
|
@@ -7,67 +7,67 @@
|
|
|
7
7
|
"react": {
|
|
8
8
|
"src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/index.js",
|
|
9
9
|
"file": "react.js",
|
|
10
|
-
"fileHash": "
|
|
10
|
+
"fileHash": "9056025c",
|
|
11
11
|
"needsInterop": true
|
|
12
12
|
},
|
|
13
13
|
"react-dom": {
|
|
14
14
|
"src": "../../../../node_modules/.pnpm/react-dom@19.2.0_react@19.2.0/node_modules/react-dom/index.js",
|
|
15
15
|
"file": "react-dom.js",
|
|
16
|
-
"fileHash": "
|
|
16
|
+
"fileHash": "4bf92ba0",
|
|
17
17
|
"needsInterop": true
|
|
18
18
|
},
|
|
19
19
|
"react/jsx-dev-runtime": {
|
|
20
20
|
"src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-dev-runtime.js",
|
|
21
21
|
"file": "react_jsx-dev-runtime.js",
|
|
22
|
-
"fileHash": "
|
|
22
|
+
"fileHash": "3793059e",
|
|
23
23
|
"needsInterop": true
|
|
24
24
|
},
|
|
25
25
|
"react/jsx-runtime": {
|
|
26
26
|
"src": "../../../../node_modules/.pnpm/react@19.2.0/node_modules/react/jsx-runtime.js",
|
|
27
27
|
"file": "react_jsx-runtime.js",
|
|
28
|
-
"fileHash": "
|
|
28
|
+
"fileHash": "333cb8da",
|
|
29
29
|
"needsInterop": true
|
|
30
30
|
},
|
|
31
31
|
"@openai/apps-sdk-ui/components/Button": {
|
|
32
32
|
"src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Button/index.js",
|
|
33
33
|
"file": "@openai_apps-sdk-ui_components_Button.js",
|
|
34
|
-
"fileHash": "
|
|
34
|
+
"fileHash": "cbb8e0ed",
|
|
35
35
|
"needsInterop": false
|
|
36
36
|
},
|
|
37
37
|
"@openai/apps-sdk-ui/components/Icon": {
|
|
38
38
|
"src": "../../../../node_modules/.pnpm/@openai+apps-sdk-ui@0.2.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19._60630c8dcc43ec213b3e346c9e26579b/node_modules/@openai/apps-sdk-ui/dist/es/components/Icon/index.js",
|
|
39
39
|
"file": "@openai_apps-sdk-ui_components_Icon.js",
|
|
40
|
-
"fileHash": "
|
|
40
|
+
"fileHash": "c9ed12a2",
|
|
41
41
|
"needsInterop": false
|
|
42
42
|
},
|
|
43
43
|
"clsx": {
|
|
44
44
|
"src": "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs",
|
|
45
45
|
"file": "clsx.js",
|
|
46
|
-
"fileHash": "
|
|
46
|
+
"fileHash": "45adfb82",
|
|
47
47
|
"needsInterop": false
|
|
48
48
|
},
|
|
49
49
|
"embla-carousel-react": {
|
|
50
50
|
"src": "../../../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.0/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js",
|
|
51
51
|
"file": "embla-carousel-react.js",
|
|
52
|
-
"fileHash": "
|
|
52
|
+
"fileHash": "84f414e3",
|
|
53
53
|
"needsInterop": false
|
|
54
54
|
},
|
|
55
55
|
"embla-carousel-wheel-gestures": {
|
|
56
56
|
"src": "../../../../node_modules/.pnpm/embla-carousel-wheel-gestures@8.1.0_embla-carousel@8.6.0/node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.js",
|
|
57
57
|
"file": "embla-carousel-wheel-gestures.js",
|
|
58
|
-
"fileHash": "
|
|
58
|
+
"fileHash": "d8ac84d8",
|
|
59
59
|
"needsInterop": false
|
|
60
60
|
},
|
|
61
61
|
"react-dom/client": {
|
|
62
62
|
"src": "../../../../node_modules/.pnpm/react-dom@19.2.0_react@19.2.0/node_modules/react-dom/client.js",
|
|
63
63
|
"file": "react-dom_client.js",
|
|
64
|
-
"fileHash": "
|
|
64
|
+
"fileHash": "2b396df8",
|
|
65
65
|
"needsInterop": true
|
|
66
66
|
},
|
|
67
67
|
"tailwind-merge": {
|
|
68
68
|
"src": "../../../../node_modules/.pnpm/tailwind-merge@3.4.0/node_modules/tailwind-merge/dist/bundle-mjs.mjs",
|
|
69
69
|
"file": "tailwind-merge.js",
|
|
70
|
-
"fileHash": "
|
|
70
|
+
"fileHash": "641d32e3",
|
|
71
71
|
"needsInterop": false
|
|
72
72
|
}
|
|
73
73
|
},
|
package/template/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"4.0.13","results":[[":src/components/album/albums.test.tsx",{"duration":
|
|
1
|
+
{"version":"4.0.13","results":[[":src/components/album/albums.test.tsx",{"duration":372.74884499999985,"failed":false}],[":src/components/resources/carousel-resource.test.tsx",{"duration":247.07823000000008,"failed":false}],[":src/components/album/fullscreen-viewer.test.tsx",{"duration":297.08260300000074,"failed":false}],[":src/components/resources/counter-resource.test.tsx",{"duration":306.71444999999994,"failed":false}],[":src/components/carousel/carousel.test.tsx",{"duration":88.42288999999982,"failed":false}],[":src/components/resources/albums-resource.test.tsx",{"duration":307.46733100000006,"failed":false}],[":src/components/album/film-strip.test.tsx",{"duration":464.6955840000003,"failed":false}],[":src/components/album/album-card.test.tsx",{"duration":384.5613500000002,"failed":false}],[":src/components/card/card.test.tsx",{"duration":55.76917900000012,"failed":false}]]}
|
|
File without changes
|
|
File without changes
|