{"id":22605,"library":"vite-plugin-chatgpt-widgets","title":"vite-plugin-chatgpt-widgets","description":"v0.0.10 – Vite plugin to automatically bundle React-based ChatGPT widget outputs within a Vite project. Supports both dynamic development builds (via Vite dev server) and production builds (via manifest file). Key differentiator: it automates widget discovery and HTML generation for MCP server resource registration, enabling ChatGPT sandboxed iframe integration. Release cadence is irregular; latest version focuses on dependency optimization. Requires React and OpenAI SDK UI packages. Active development by Gadget. Currently no major breaking changes known.","status":"active","version":"0.0.10","language":"javascript","source_language":"en","source_url":"https://github.com/gadget-inc/vite-plugin-chatgpt-widgets","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-chatgpt-widgets","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-chatgpt-widgets","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-chatgpt-widgets","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The plugin is a Vite plugin and must be used within a Vite project.","package":"vite","optional":false},{"reason":"Widget components are React components; React is required at runtime.","package":"react","optional":false},{"reason":"Used for ChatGPT-specific UI components and sandbox integration.","package":"@openai/apps-sdk-ui","optional":true}],"imports":[{"note":"This is a named export, not a default export.","wrong":"import chatGPTWidgetPlugin from 'vite-plugin-chatgpt-widgets'","symbol":"chatGPTWidgetPlugin","correct":"import { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets'"},{"note":"Package is ESM-only; CommonJS require is not supported.","wrong":"const { getWidgets } = require('vite-plugin-chatgpt-widgets')","symbol":"getWidgets","correct":"import { getWidgets } from 'vite-plugin-chatgpt-widgets'"},{"note":"The package does not export a default; use named import.","wrong":"import chatGPTWidgetPlugin from 'vite-plugin-chatgpt-widgets'","symbol":"default","correct":"import { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets';\nimport { getWidgets } from 'vite-plugin-chatgpt-widgets';\n\n// vite.config.ts\nexport default defineConfig({\n  plugins: [\n    chatGPTWidgetPlugin({\n      widgetsDir: 'web/chatgpt',\n      baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',\n    }),\n  ],\n  build: { manifest: true },\n  server: { cors: { origin: true } },\n});\n\n// In your server code (e.g., MCP server)\nconst widgets = await getWidgets('web/chatgpt', {\n  manifestPath: 'dist/.vite/manifest.json',\n});\nfor (const widget of widgets) {\n  console.log(widget.name, widget.content);\n}","lang":"typescript","description":"Demonstrates basic Vite plugin configuration and server-side widget retrieval using getWidgets."},"warnings":[{"fix":"Add 'build: { manifest: true }' to your Vite config.","message":"Manifest must be enabled for production builds: 'build.manifest' must be set to true in vite.config.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Pass 'baseUrl' in plugin options or set 'base' in Vite config.","message":"Base URL required for sandboxed iframes: if not using Vite's 'base' option, a 'baseUrl' must be provided to the plugin options.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure each widget component is exported as 'export default function WidgetName'.","message":"Widget components must use default export: the plugin only picks up default exports from widget files.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Define 'export default function RootLayout({ children }: { children: React.ReactNode })'.","message":"Root layout component must accept 'children' prop: the optional root.tsx file must export a component that accepts React.ReactNode as children.","severity":"gotcha","affected_versions":">=0.0.5"},{"fix":"Upgrade to v0.0.7 or later to use clearer module IDs.","message":"Old module IDs before v0.0.7 might cause ambiguity between JS and HTML entrypoints.","severity":"deprecated","affected_versions":"<0.0.7"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add 'build: { manifest: true }' to vite.config.ts.","cause":"Production build without manifest enabled cannot locate built widget files.","error":"Error: No manifest found. Ensure that 'build.manifest' is enabled in your Vite config."},{"fix":"Run 'npm install vite-plugin-chatgpt-widgets' and use the correct import (named export).","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'vite-plugin-chatgpt-widgets'"},{"fix":"Use 'import' instead of 'require'.","cause":"Using CommonJS require() in an ESM-only environment.","error":"Error: `require` is not defined in ES module scope"},{"fix":"Add 'export default function WidgetName() { ... }' to the widget file.","cause":"Widget file does not have a default export.","error":"Error: A widget must export a default component"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}