@ist-group/create-commonui-demo

Scaffolds a minimal app that consumes @ist-group/commonui-components.

Usage

cd <empty-folder>
npx @ist-group/create-commonui-demo

Equivalent shorthands (both work because the package name starts with create-):

npm create @ist-group/commonui-demo
# or
yarn create @ist-group/commonui-demo

You'll be prompted to pick a template and a project name. After the files are written, the CLI runs npm install automatically in the target folder. When it finishes:

npm run dev

Testing locally

You can run the CLI from this repo without publishing:

# from an empty target folder
node /path/to/builderio-components/cli/src/index.mjs

# or point npx at the local package folder
npx /path/to/builderio-components/cli

For repeated iteration, link it globally once:

cd /path/to/builderio-components/cli
npm link                       # registers the `create-commonui-demo` bin globally
cd <empty-folder>
create-commonui-demo           # runs your local copy
npm unlink -g @ist-group/create-commonui-demo   # when you're done

Available templates

| id | description | | ------------- | ---------------------------------------------------------------------------------------- | | vue-minimal | Single-page Vue 3 + Vite starter with a handful of CommonUI components. A blank canvas. |

Adding a new template

1. Create a new folder under templates/, e.g. templates/vue-showcase/.

2. Put your template files inside. Special rename rules applied on copy:

   • _gitignore → .gitignore
   • .npmignore in the template dir is used by npm pack when publishing the CLI, and is skipped on scaffolding so it doesn't land in user projects.

3. Use {{PROJECT_NAME}} anywhere you want the user-chosen project name substituted (typically in package.json).

4. Include an AGENTS.md and a .mcp.json at the template root. Every template must ship with:

   • .mcp.json pointing at the CommonUI MCP server (https://commonui.ist.com/mcp) so AI tools can look up components out-of-the-box. Copy templates/vue-minimal/.mcp.json verbatim.
   • AGENTS.md with project context for AI agents. Use templates/vue-minimal/AGENTS.md as a starting point and adapt the project-specific parts.

5. Add an entry to templates/index.json:

   {
     "id": "vue-showcase",
     "label": "Vue 3 — Component showcase",
     "description": "Multi-section demo covering most CommonUI components.",
     "dir": "vue-showcase"
   }

No code changes in src/index.mjs are needed.

Conventions all templates share

• .mcp.json at the project root, wiring in the CommonUI MCP server at https://commonui.ist.com/mcp. Claude Code and compatible tools pick this up automatically.
• AGENTS.md at the project root, giving AI coding assistants context about the project. Non-technical users will typically modify the scaffolded project through an AI tool; this file is how we guide that AI.
• .npmignore at the template root so node_modules, dist, .vite, .tmp, and stray *.tgz files don't end up inside the published CLI tarball. The file is skipped by the scaffolder itself so it never appears in user projects.