Skip to main content

Converting a Project to a Widget

Use the widget-setup skill to transform an existing React project into a Module Federation widget. The skill adds widget-config.json, Rspack configuration, TypeScript setup, build scripts, and all required @invent dependencies — with minimal changes to your existing code.

Use this when you already have a working React project and want to ship it as an Invent micro-app. If you're starting from scratch instead, use Creating a Micro-App — that scaffolds a new project from the Invent template.

Install​

In Claude Code (start it by running claude in your terminal first if it isn't already open), run:

/plugin install widget-setup@invent-skills

This is a Claude Code slash command — not a shell command. It only works at the Claude Code prompt.

Convert the project​

In your terminal, navigate to your React project's directory and start Claude Code there:

cd path/to/your-project
claude
  1. At the Claude Code prompt, ask: 
    make this project a widget
    Other phrasings work — "setup widget", "add widget support", "configure Module Federation for widget".
  2. Provide the widget details when Claude asks:
    • Name — PascalCase (e.g. AIAssistant, PieChart).
    • Description — short summary of what the widget does.
    • Exposed components — which React component(s) the widget should expose via Module Federation.
  3. Grant permission for the file changes. The skill will add:
    • widget-config.json — widget metadata and Module Federation exposes.
    • Rspack configuration — production and development builds.
    • TypeScript setup — types for widget props and shared libraries.
    • @invent dependencies and peer dependencies in package.json.
    • npm scripts for building and serving the widget.
    • File structure matching Invent widget conventions.