vite-plugin-chatgpt-widgets

0.0.10 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: No manifest found. Ensure that 'build.manifest' is enabled in your Vite config. ↓

cause Production build without manifest enabled cannot locate built widget files.

fix

Add 'build: { manifest: true }' to vite.config.ts.

error Error: Cannot find module 'vite-plugin-chatgpt-widgets' ↓

cause Package not installed or incorrect import path.

fix

Run 'npm install vite-plugin-chatgpt-widgets' and use the correct import (named export).

error Error: `require` is not defined in ES module scope ↓

cause Using CommonJS require() in an ESM-only environment.

fix

Use 'import' instead of 'require'.

error Error: A widget must export a default component ↓

cause Widget file does not have a default export.

fix

Add 'export default function WidgetName() { ... }' to the widget file.

Warnings

gotcha Manifest must be enabled for production builds: 'build.manifest' must be set to true in vite.config. ↓

fix Add 'build: { manifest: true }' to your Vite config.

gotcha Base URL required for sandboxed iframes: if not using Vite's 'base' option, a 'baseUrl' must be provided to the plugin options. ↓

fix Pass 'baseUrl' in plugin options or set 'base' in Vite config.

gotcha Widget components must use default export: the plugin only picks up default exports from widget files. ↓

fix Ensure each widget component is exported as 'export default function WidgetName'.

gotcha Root layout component must accept 'children' prop: the optional root.tsx file must export a component that accepts React.ReactNode as children. ↓

fix Define 'export default function RootLayout({ children }: { children: React.ReactNode })'.

deprecated Old module IDs before v0.0.7 might cause ambiguity between JS and HTML entrypoints. ↓

fix Upgrade to v0.0.7 or later to use clearer module IDs.

Install

npm install vite-plugin-chatgpt-widgets

yarn add vite-plugin-chatgpt-widgets

pnpm add vite-plugin-chatgpt-widgets

Imports

chatGPTWidgetPlugin

wrong

import chatGPTWidgetPlugin from 'vite-plugin-chatgpt-widgets'

correct

import { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets'

This is a named export, not a default export.

getWidgets

wrong

const { getWidgets } = require('vite-plugin-chatgpt-widgets')

correct

import { getWidgets } from 'vite-plugin-chatgpt-widgets'

Package is ESM-only; CommonJS require is not supported.

default

wrong

import chatGPTWidgetPlugin from 'vite-plugin-chatgpt-widgets'

correct

import { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets'

The package does not export a default; use named import.

Quickstart

Demonstrates basic Vite plugin configuration and server-side widget retrieval using getWidgets.

import { defineConfig } from 'vite';
import { chatGPTWidgetPlugin } from 'vite-plugin-chatgpt-widgets';
import { getWidgets } from 'vite-plugin-chatgpt-widgets';

// vite.config.ts
export default defineConfig({
  plugins: [
    chatGPTWidgetPlugin({
      widgetsDir: 'web/chatgpt',
      baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',
    }),
  ],
  build: { manifest: true },
  server: { cors: { origin: true } },
});

// In your server code (e.g., MCP server)
const widgets = await getWidgets('web/chatgpt', {
  manifestPath: 'dist/.vite/manifest.json',
});
for (const widget of widgets) {
  console.log(widget.name, widget.content);
}