open-index/open-npm huggingface dataset:
npm package: @mcp-apps-kit/create-app
Description: CLI tool for scaffolding MCP applications
Latest version: 0.5.0

# @mcp-apps-kit/create-app

[![npm](https://img.shields.io/npm/v/%40mcp-apps-kit%2Fcreate-app)](https://www.npmjs.com/package/@mcp-apps-kit/create-app) [![node](https://img.shields.io/node/v/%40mcp-apps-kit%2Fcreate-app)](https://www.npmjs.com/package/@mcp-apps-kit/create-app) [![license](https://img.shields.io/npm/l/%40mcp-apps-kit%2Fcreate-app)](https://www.npmjs.com/package/@mcp-apps-kit/create-app)

CLI tool for scaffolding MCP applications.

Scaffolds a ready-to-run project with server and UI code so you can focus on tool definitions and widget UI.

## Table of Contents

- [Background](#background)
- [Features](#features)
- [Compatibility](#compatibility)
- [Install](#install)
- [Usage](#usage)
- [Examples](#examples)
- [API](#api)
- [Contributing](#contributing)
- [License](#license)

## Background

Starting a new MCP app requires wiring server tooling, UI code, and build scripts. This CLI creates a minimal, working project so you can iterate quickly.

## Features

- React and vanilla templates
- Optional Vercel deployment configuration
- Interactive prompts or non-interactive flags

## Compatibility

- Node.js: `>= 20`

## Install

Run without installing:

```bash
npx @mcp-apps-kit/create-app@latest
```

Or install globally:

```bash
npm install -g @mcp-apps-kit/create-app
create-mcp-apps-kit
```

## Usage

```bash
# Provide a name (otherwise it prompts)
npx @mcp-apps-kit/create-app@latest my-app

# Choose template
npx @mcp-apps-kit/create-app@latest my-app --template react
npx @mcp-apps-kit/create-app@latest my-app --template vanilla

# Pick output directory
npx @mcp-apps-kit/create-app@latest my-app --directory ./apps/my-app

# Skip install / git init
npx @mcp-apps-kit/create-app@latest my-app --skip-install
npx @mcp-apps-kit/create-app@latest my-app --skip-git

# Add Vercel configuration
npx @mcp-apps-kit/create-app@latest my-app --vercel
```

## Examples

- `../../examples/minimal`
- [kanban-mcp-example](https://github.com/AndurilCode/kanban-mcp-example)

## API

CLI entry point:

- `create-mcp-apps-kit [name]`

Options:

- `-t, --template <react|vanilla>`
- `-d, --directory <path>`
- `--skip-install`
- `--skip-git`
- `--vercel`

## Contributing

See `../../CONTRIBUTING.md` for development setup and guidelines. Issues and pull requests are welcome.

## License

MIT
npm package: @mcp-b/char
Description: Char host shell. Framework-agnostic custom element that bridges to the iframe embed runtime.
Latest version: 0.1.4

# @mcp-b/char

Framework-agnostic custom elements for embedding Char.

This package is zero-dependency at runtime and ships two elements:

- `<char-agent>`: low-level iframe + bridge primitive
- `<char-agent-shell>`: opinionated host shell (PIP composer, desktop push panel, responsive fullscreen)

## Install

```bash
npm i @mcp-b/char
```

## Element registration

```ts
import '@mcp-b/char/web-component' // registers <char-agent>
import '@mcp-b/char/shell-component' // registers <char-agent-shell>
```

Importing `@mcp-b/char` root also registers both.

## Low-level primitive: `<char-agent>`

Use this when your app already owns all host chrome/layout.

```html
<char-agent
  id="assistant"
  publishable-key="pk_live_your_key_here"
  style="width: 420px; height: 100vh"
  display-mode="inline"
></char-agent>
<script type="module">
  import '@mcp-b/char/web-component'

  /** @type {import('@mcp-b/char/web-component').CharAgentElement | null} */
  const agent = document.querySelector('#assistant')

  agent?.connect({
    publishableKey: 'pk_live_your_key_here',
    // Optional per-user identity token:
    idToken: '<id-token>',
  })
</script>
```

`display-mode` values:

- `pip`: collapsed
- `inline`: expanded side panel
- `fullscreen`: expanded fullscreen

## Opinionated shell: `<char-agent-shell>`

Use this when you want built-in host behavior and responsive policy.

```html
<char-agent-shell id="assistant-shell"></char-agent-shell>
<script type="module">
  import '@mcp-b/char/shell-component'

  /** @type {import('@mcp-b/char/shell-component').CharAgentShellElement | null} */
  const shell = document.querySelector('#assistant-shell')

  shell?.setAuth({ publishableKey: 'pk_live_your_key_here', idToken: '<id-token>' })
</script>
```

Shell mode policy:

- closed -> `pip`
- open desktop -> `inline`
- open on narrow viewport -> `fullscreen`

Availability policy:

- `char-agent-shell` is fail-closed by default.
- If iframe initialization fails or times out, the shell hides fully (no host chrome footprint).
- Observability remains available via `char-error`.

## API summary

`<char-agent>` methods:

- `connect(options)`
- `disconnect()`
- `setAuth(options | null)` (connect when provided, disconnect when null)
- `setHostContext(partialContext)`

`<char-agent-shell>` methods:

- `connect(options)`
- `disconnect()`
- `setAuth(options | null)` (connect when provided, disconnect when null)
- `setHostContext(partialContext)`
- `setOpen(open)`
- `toggleOpen()`

`<char-agent-shell>` events:

- `char-shell-open-change` (`{ open: boolean }`)
- pass-through `char-*` events from inner `<char-agent>`

## Shared mode-policy helpers

```ts
import {
  DEFAULT_AVAILABLE_DISPLAY_MODES,
  isDisplayMode,
  isExpandedDisplayMode,
  resolvePolicyDisplayMode,
  resolveSupportedDisplayMode,
} from '@mcp-b/char/display-mode-policy'
```
npm package: @mcp-b/char-react
Description: React convenience wrapper for the @mcp-b/char custom element.
Latest version: 0.0.8

# @mcp-b/char-react

React adapters over `@mcp-b/char` custom elements.

This package keeps React ergonomics (props, refs, auth convenience, event callbacks) while delegating runtime behavior to custom elements.

## Install

```bash
npm i @mcp-b/char-react
```

`react` and `react-dom` are peer dependencies.

## Exports

- `CharAgent`: thin wrapper over `<char-agent>`
- `CharAgentShell`: thin wrapper over `<char-agent-shell>`

## `CharAgent` (low-level)

```tsx
import { CharAgent } from '@mcp-b/char-react'

export function SupportWidget({ idToken }: { idToken?: string }) {
  return (
    <CharAgent
      publishableKey="pk_live_your_key_here"
      idToken={idToken}
      displayMode="inline"
      onCharError={(detail) => {
        console.error(detail.code, detail.message)
      }}
    />
  )
}
```

## `CharAgentShell` (opinionated)

```tsx
import { CharAgentShell } from '@mcp-b/char-react'

export function SupportShell({ idToken }: { idToken?: string }) {
  return (
    <CharAgentShell
      publishableKey="pk_live_your_key_here"
      idToken={idToken}
      panelWidth={420}
      fullscreenBreakpoint={1024}
      pipPosition="bottom-center"
    />
  )
}
```

`CharAgentShell` behavior is owned by `<char-agent-shell>`:

- `pip`: iframe-owned compact composer surface
- `inline`: desktop push panel
- `fullscreen`: narrow viewport expanded mode
- upstream unavailable: fail-closed (shell hides fully and emits `char-error`)

## Auth convenience

Both wrappers call element methods automatically:

- `publishableKey` is required; `idToken` is optional
- auth props present -> `setAuth(...)` (delegates to `connect(...)`)
- auth props removed -> `setAuth(null)` (delegates to `disconnect()`)
npm package: @mcp-b/create-webmcp-app
Description: Create a new WebMCP app with interactive template selection
Author: WebMCP-org
Latest version: 1.0.1

# create-webmcp-app

Interactive CLI for scaffolding new WebMCP applications.

## Usage

```bash
# Using npx (recommended)
npx @mcp-b/create-webmcp-app

# Using pnpm
pnpm dlx @mcp-b/create-webmcp-app

# Using npm
npx @mcp-b/create-webmcp-app

# Using bun
bunx @mcp-b/create-webmcp-app
```

## What It Does

The CLI will:
1. **Ask where to create your project**
2. **Let you choose a template:**
   - **Vanilla** - Pure HTML/CSS/JavaScript (no build step!)
   - **React** - React + TypeScript + Vite (full-featured)
3. **Copy template files** to your project directory
4. **Install dependencies** (optional)
5. **Show next steps**

## Templates

### Vanilla Template

Perfect for:
- 🎓 Learning WebMCP
- ⚡ Rapid prototyping
- 🎮 Simple games
- 📝 Quick demos

**Features:**
- NO build step required
- Pure HTML/CSS/JavaScript
- @mcp-b/global via CDN
- Tailwind CSS via CDN
- Just open `index.html` and start coding!

### React Template

Perfect for:
- 🏭 Production applications
- 🧩 Complex UIs
- 🔷 TypeScript-first development
- 🔥 Hot module replacement

**Features:**
- React 19 + TypeScript
- Vite for fast development
- Tailwind CSS 4
- @mcp-b/react-webmcp hooks
- Component architecture

## Example

```bash
$ npx @mcp-b/create-webmcp-app

┌  create-webmcp-app
│
◇  Where should we create your project?
│  ./my-game
│
◇  Which template would you like to use?
│  ● Vanilla (No Build Step)
│  ○ React (Full-Featured)
│
◇  Install dependencies?
│  Yes
│
◆  Project created successfully!
│
│  Next steps:
│    cd my-game
│    pnpm dev
│
│  Template info:
│    Pure HTML/CSS/JavaScript - perfect for learning
│
│  Happy coding! 🚀
└
```

## Development

```bash
# Install dependencies
pnpm install

# Build
pnpm build

# Test locally
node dist/index.js
```

## License

MIT