npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@fractal-mcp/cli

v2.2.5

Published

CLI tools for Fractal MCP development

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

spectre-ai-worksspectre-ai-works

Keywords

fractalmcpclibundler

Readme

@fractal-mcp/cli

CLI tools for Fractal MCP development.

Installation

Global Installation

npm install -g @fractal-mcp/cli

Use with npx (No Installation)

# For a bootstrapped application with index.html
npx @fractal-mcp/cli bundle --entrypoint=path/to/index.html --out=path/to/outdir

# For a standalone react component
npx @fractal-mcp/cli bundle --entrypoint=path/to/Component.tsx --out=path/to/outdir

# For a JS/TS entrypoint
npx @fractal-mcp/cli bundle --entrypoint=path/to/main.ts --out=path/to/outdir

Commands

bundle

Bundle a React component, JS/TS entrypoint, or HTML file into a self-contained output.

Usage

For a React component (.tsx/.jsx):

npx @fractal-mcp/cli bundle --entrypoint=./src/MyComponent.tsx --out=./dist

For a JS/TS entrypoint (.ts/.js):

npx @fractal-mcp/cli bundle --entrypoint=./src/main.ts --out=./dist

For an HTML application:

npx @fractal-mcp/cli bundle --entrypoint=./index.html --out=./dist

Options

Required:

  • --entrypoint <path> - Path to entrypoint file (.html, .tsx, .jsx, .ts, .js)
  • --out <path> - Output directory

Output Configuration:

  • --output-type <type> - Output type: html or assets (default: html)
    • html - Single HTML file with inlined/linked assets
    • assets - Separate main.js and index.css files

HTML Output Options (only applicable when --output-type=html):

  • --inline-js / --no-inline-js - Inline JavaScript in HTML (default: true)
  • --inline-css / --no-inline-css - Inline CSS in HTML (default: true)
  • --root-only - Generate root element snippet instead of full HTML document (default: false)

JS/TS Entrypoint Options:

  • --root-element <id> - Root element ID for JS/TS entrypoints (default: root)

Examples

Basic usage:

# Bundle a React component into a single HTML file
npx @fractal-mcp/cli bundle \
  --entrypoint=src/components/Hello.tsx \
  --out=bundled

# Bundle an HTML app with dependencies
npx @fractal-mcp/cli bundle \
  --entrypoint=public/index.html \
  --out=dist

Output types:

# Create a single HTML file with everything inlined (default)
npx @fractal-mcp/cli bundle \
  --entrypoint=src/App.tsx \
  --out=dist \
  --output-type=html

# Create separate main.js and index.css files
npx @fractal-mcp/cli bundle \
  --entrypoint=src/App.tsx \
  --out=dist \
  --output-type=assets

Inline control:

# Link to external JS/CSS files instead of inlining
npx @fractal-mcp/cli bundle \
  --entrypoint=src/App.tsx \
  --out=dist \
  --no-inline-js \
  --no-inline-css

# Inline JS but link CSS
npx @fractal-mcp/cli bundle \
  --entrypoint=src/App.tsx \
  --out=dist \
  --inline-js \
  --no-inline-css

Root element snippet:

# Generate just the root element content (no <html>, <head>, etc.)
npx @fractal-mcp/cli bundle \
  --entrypoint=src/App.tsx \
  --out=dist \
  --root-only

JS/TS entrypoint with custom root:

# Bundle a JS/TS file with a custom root element ID
npx @fractal-mcp/cli bundle \
  --entrypoint=src/main.ts \
  --out=dist \
  --root-element=app-root

Output

HTML Output (default): The command will create a self-contained HTML file at <out>/index.html:

  • All JavaScript bundled (inlined by default, or as <script src="main.js">)
  • All CSS bundled (inlined by default, or as <link href="index.css">)
  • All dependencies included
  • Full HTML document or root element snippet (with --root-only)

Assets Output: The command will create separate files:

  • <out>/main.js - Bundled JavaScript
  • <out>/index.css - Bundled CSS

HTML Input: HTML inputs always produce a single self-contained HTML file with everything inlined, regardless of output options.

Features

  • Multiple Input Types: Supports HTML, React components (.tsx/.jsx), and JS/TS entrypoints (.ts/.js)
  • Flexible Output: Choose between single HTML file or separate assets (main.js, index.css)
  • Inline Control: Decide whether to inline or link JavaScript and CSS
  • Root Element Snippets: Generate just the root element content for embedding
  • Custom Root Elements: Specify custom root element IDs for JS/TS entrypoints
  • Automatic Detection: Detects framework (React, Vue, Svelte) automatically
  • Fast: Powered by Vite
  • Zero Config: Works out of the box with sensible defaults

Development

# Build
npm run build

# Watch mode
npm run dev

# Clean
npm run clean

Publishing

npm publish

License

MIT