Movie Recommendations React Component

React component for ChatGPT Apps Custom UX that renders movie recommendations from tool structuredContent.

Build

• npm i (or pnpm i)
• npm run build → outputs:
  • Stylesheet: dist/index.css
  • Widget (self-boot): dist/movie-recommendations.widget.js

Local Preview

• npm run build
• npm run preview → serves preview/index.html at http://localhost:5173
• The preview loads dist/index.css and dist/movie-recommendations.widget.js and mounts using inline structured-content JSON.

Release & CDN (npm + jsDelivr)

• CI publishes only dist/ to npm when you push a v* tag.
• Prerequisite: repository secret NPM_TOKEN with publish rights (already configured).

Release examples

• First 0.1.0 release (package.json already 0.1.0):
  • git tag v0.1.0
  • git push origin v0.1.0
  • Verify after CI:
    • npm view @y-bi/movie-recommendations version → should be 0.1.0
    • JS: https://cdn.jsdelivr.net/npm/@y-bi/[email protected]/dist/movie-recommendations.widget.js
    • CSS: https://cdn.jsdelivr.net/npm/@y-bi/[email protected]/dist/index.css
• Subsequent releases (automatically bump, commit, and tag):
  • Patch: npm version patch → bumps x.y.z → x.y.(z+1) and creates vX.Y.Z tag
  • Minor/Major: npm version minor / npm version major
  • Push: git push origin --follow-tags
  • Explicit set (optional): npm version 0.1.1 then push tags as above

Notes

• npm version requires a clean working tree and automatically creates a commit and a vX.Y.Z tag.
• Tags should be immutable; avoid reusing or moving an existing tag to prevent CDN cache issues.

jsDelivr URLs (pin version)

• JS: https://cdn.jsdelivr.net/npm/@y-bi/movie-recommendations@<version>/dist/movie-recommendations.widget.js
• CSS: https://cdn.jsdelivr.net/npm/@y-bi/movie-recommendations@<version>/dist/index.css

Environment variables (example)

• MOVIE_RECS_JS_URL=https://cdn.jsdelivr.net/npm/@y-bi/[email protected]/dist/movie-recommendations.widget.js
• MOVIE_RECS_CSS_URL=https://cdn.jsdelivr.net/npm/@y-bi/[email protected]/dist/index.css

Integration (Apps)

• Use the widget script and include a <script id="structured-content" type="application/json"> containing the tool output. Alternatively set window.openai.toolOutput.

StructuredContent contract

{
  query?: string,
  items?: Array<{
    public_code?: string,
    title?: string,
    description?: string,
    thumbnail_url?: string,
    poster_url?: string,
    rating?: number,
    badges?: string[],
    price?: string,
    is_new?: boolean
  }>
}

Placeholders

• Missing rating → render placeholder stars
• Missing badges → render 字 + 吹 placeholder chips
• Missing price → render P 399円~ placeholder chip

Notes

• preview/index.html is provided for local preview only and is not part of the production bundle.
• The MCP server exposes an HTML template resource ui://widget/movie-recommendations.html (text/html+skybridge) and sets _meta.openai/outputTemplate to this URI; the HTML references the CDN JS/CSS.
• If an item includes public_code, clicking its poster opens https://video.unext.jp/?td=PUBLIC_CODE in the same tab.

References

• Apps SDK MCP Server: https://developers.openai.com/apps-sdk/build/mcp-server
• Apps SDK Custom UX: https://developers.openai.com/apps-sdk/build/custom-ux
• Apps SDK Examples (Pizzaz): https://developers.openai.com/apps-sdk/build/examples