create-manifest 1.3.4 → 2.0.1

package/README.md

@@ -1,38 +1,57 @@
 # create-manifest
 
-The `create manifest` create a new project with [Manifest](https://manifest.build).
+Create a new Manifest MCP server project with a single command.
+
+## Usage
 
 ```bash
-npx create-manifest@latest
+npx create-manifest my-app
 ```
 
-This will create a folder named my-project and install Manifest inside it.
-If you leave out the name, the CLI will ask you for it during setup.
+This will:
 
-You can add a flag to set up rules for your AI code Editor:
+1. Create a new directory `my-app`
+2. Copy the starter template
+3. Install dependencies
+4. Start the development server
 
-- `--cursor` for **Cursor**
-- `--copilot` for **GitHub Copilot**
-- `--windsurf` for **Windsurf**
+## What's Included
 
-You can also use `yarn create manifest`.
+The starter template includes:
 
-## Develop
+- MCP server setup with Express
+- TypeScript configuration
+- Hot reload with Nodemon
+- Vite for building web components
 
-```bash
-npm install
+## Requirements
 
-# Run from a test folder to prevent messing with project files.
-mkdir test-folder
-cd test-folder
-../bin/dev.js
-```
+- Node.js 22+
 
-However due to the monorepo workspace structure, the launch script will fail as the path to the node modules folder is different than when served. This is normal.
+## After Creation
 
-## Publish
+Your project will be running at `http://localhost:3000`.
+
+To restart the dev server later:
 
 ```bash
-npm run build
-npm publish
+cd my-app
+npm run dev
 ```
+
+## Available Scripts
+
+Inside the created project, you can run:
+
+- `npm run dev` - Start development server with hot reload
+- `npm run build` - Build for production
+- `npm start` - Run production build
+
+## Learn More
+
+- [Manifest Documentation](https://manifest.build)
+- [MCP Protocol](https://modelcontextprotocol.io)
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+import { cpSync, readFileSync, writeFileSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execSync, spawn } from 'node:child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const projectName = process.argv[2]
+
+if (!projectName) {
+  console.error('Please provide a project name:')
+  console.error('  npx create-manifest my-app')
+  process.exit(1)
+}
+
+const targetDir = join(process.cwd(), projectName)
+const starterDir = join(__dirname, 'starter')
+
+console.log(`\nCreating a new Manifest project in ${targetDir}...\n`)
+
+// Copy starter folder to target directory
+cpSync(starterDir, targetDir, { recursive: true })
+
+// Update package.json with the project name
+const packageJsonPath = join(targetDir, 'package.json')
+const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
+packageJson.name = projectName
+writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n')
+
+console.log('Installing dependencies...\n')
+
+// Install dependencies
+execSync('npm install', {
+  cwd: targetDir,
+  stdio: 'inherit'
+})
+
+console.log('\nStarting development server...\n')
+
+// Run dev script
+const dev = spawn('npm', ['run', 'dev'], {
+  cwd: targetDir,
+  stdio: 'inherit',
+  shell: true
+})
+
+dev.on('close', (code) => {
+  process.exit(code)
+})

package/package.json

@@ -1,99 +1,21 @@
 {
   "name": "create-manifest",
-  "version": "1.3.4",
-  "author": "Manifest",
-  "description": "Create a new Manifest backend",
-  "homepage": "https://manifest.build",
-  "license": "MIT",
+  "version": "2.0.1",
+  "description": "Create a new Manifest project",
+  "type": "module",
   "bin": {
-    "create-manifest": "./bin/run.js"
-  },
-  "scripts": {
-    "build": "shx rm -rf dist && tsc -b",
-    "watch": "tsc -b --watch",
-    "postpack": "shx rm -f oclif.manifest.json",
-    "posttest": "npm run lint",
-    "prepack": "npm run build && oclif manifest && oclif readme",
-    "prepare": "npm run build",
-    "version": "oclif readme && git add README.md"
-  },
-  "oclif": {
-    "bin": "create-manifest",
-    "dirname": "create-manifest",
-    "commands": {
-      "strategy": "single",
-      "target": "./dist/commands/index.js"
-    }
-  },
-  "plugins": [
-    "@oclif/plugin-help",
-    "@oclif/plugin-plugins"
-  ],
-  "topicSeparator": " ",
-  "topics": {
-    "create": {
-      "description": "Create a new Manifest backend"
-    }
-  },
-  "dependencies": {
-    "@inquirer/prompts": "^7.5.1",
-    "@oclif/core": "^4",
-    "@oclif/plugin-help": "^6",
-    "@oclif/plugin-plugins": "^5",
-    "axios": "^1.9.0",
-    "chalk": "^5.4.1",
-    "fs": "^0.0.1-security",
-    "jsonc-parser": "^3.3.1",
-    "ora": "^8.2.0",
-    "path": "^0.12.7",
-    "tree-kill": "^1.2.2",
-    "url": "^0.11.4"
-  },
-  "devDependencies": {
-    "@oclif/prettier-config": "^0.2.1",
-    "@oclif/test": "^4",
-    "oclif": "^4.17.46",
-    "shx": "^0.4.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5"
-  },
-  "engines": {
-    "node": ">=18.0.0"
+    "create-manifest": "./index.js"
   },
   "files": [
-    "/bin",
-    "/dist",
-    "/assets",
-    "/oclif.manifest.json"
+    "index.js",
+    "starter"
   ],
-  "main": "",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mnfst/manifest.git"
-  },
-  "bugs": "https://github.com/mnfst/manifest/issues",
   "keywords": [
     "manifest",
-    "cursor",
-    "AI-powered coding",
-    "backend for LLMs",
-    "AI code tool",
-    "backend for vibe coding",
-    "backend for modern workflows",
-    "vibe coding",
-    "vibe coding backend",
-    "vibe coding api",
-    "AI assisted coding",
-    "AI coding",
-    "windsurf",
-    "copilot",
-    "micro-backend",
-    "backend",
-    "headless",
-    "install",
-    "rest"
+    "mcp",
+    "create",
+    "cli"
   ],
-  "types": "dist/index.d.ts",
-  "exports": "./lib/index.js",
-  "type": "module"
+  "author": "MNFST, Inc.",
+  "license": "MIT"
 }

package/starter/.claude/settings.local.json

@@ -0,0 +1,23 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cat:*)",
+      "Bash(npm install:*)",
+      "Bash(npm --version:*)",
+      "Bash(node --version:*)",
+      "Bash(npm cache clean:*)",
+      "Bash(npm ls:*)",
+      "Bash(npm run build:*)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebSearch",
+      "WebFetch(domain:xmcp.dev)",
+      "WebFetch(domain:dev.to)",
+      "WebFetch(domain:www.skybridge.tech)",
+      "WebFetch(domain:gadget.dev)",
+      "Bash(curl:*)",
+      "Bash(pkill:*)",
+      "Bash(npm run dev:*)"
+    ]
+  }
+}

package/starter/.env.example

@@ -0,0 +1 @@
+PORT=3000

package/starter/README.md

@@ -0,0 +1,26 @@
+# Manifest Starter
+
+## Development
+
+```bash
+npm run dev
+```
+
+## Exposing with ngrok
+
+To test widgets in ChatGPT, you need to expose your local server via ngrok:
+
+```bash
+ngrok http 3000
+```
+
+The Vite config already allows `.ngrok-free.dev` and `.ngrok.io` hosts in `server.allowedHosts`.
+
+Update `baseUrl` in `vite.config.ts` with your ngrok URL:
+
+```ts
+chatGPTWidgetPlugin({
+  widgetsDir: 'src/web',
+  baseUrl: 'https://your-subdomain.ngrok-free.dev'
+})
+```

package/starter/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/web/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@manifest": "https://ui.manifest.build/r/{name}.json"
+  }
+}

package/starter/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "manfiest-starter",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx src/server.ts",
+    "dev:watch": "tsx --watch src/server.ts",
+    "build": "tsc && vite build",
+    "start": "NODE_ENV=production node dist/server.js"
+  },
+  "keywords": [],
+  "author": "MNFST, Inc.",
+  "license": "MIT",
+  "description": "Manifest starter project for ChatGPT",
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "@types/express": "^5.0.6",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "tailwindcss": "^4.1.8",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.2.3",
+    "express": "^5.1.0",
+    "lucide-react": "^0.511.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.3.1",
+    "vite-plugin-chatgpt-widgets": "^0.0.10",
+    "zod": "^3.25.76"
+  }
+}

package/starter/src/flows/list-pokemons.flow.ts

@@ -0,0 +1,129 @@
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { getWidgetHTML, type ViteHandle } from 'vite-plugin-chatgpt-widgets'
+import { z } from 'zod'
+
+export interface Pokemon {
+  id: number
+  name: string
+  image: string
+  types: string[]
+  height: number
+  weight: number
+}
+
+async function fetchPokemons(limit: number = 12): Promise<Pokemon[]> {
+  const response = await fetch(
+    `https://pokeapi.co/api/v2/pokemon?limit=${limit}`
+  )
+  const data = await response.json()
+
+  const pokemons = await Promise.all(
+    data.results.map(async (pokemon: { name: string; url: string }) => {
+      const detailResponse = await fetch(pokemon.url)
+      const detail = await detailResponse.json()
+
+      return {
+        id: detail.id,
+        name: detail.name,
+        image:
+          detail.sprites.other['official-artwork'].front_default ||
+          detail.sprites.front_default,
+        types: detail.types.map(
+          (t: { type: { name: string } }) => t.type.name
+        ),
+        height: detail.height,
+        weight: detail.weight
+      }
+    })
+  )
+
+  return pokemons
+}
+
+/**
+ * Registers the Pokemon List flow with the MCP server.
+ */
+export function registerPokemonFlow(
+  server: McpServer,
+  viteHandle: ViteHandle
+): void {
+  const uiVersion = 'v1'
+  const resourceUri = `ui://pokemon-list.html?${uiVersion}`
+
+  // Register resource that fetches fresh widget content on each request
+  server.registerResource('pokemon-list', resourceUri, {}, async () => {
+    // Fetch fresh widget HTML from Vite (enables HMR in dev mode)
+    const { content } = await getWidgetHTML('PokemonList', viteHandle)
+
+    return {
+      contents: [
+        {
+          uri: resourceUri,
+          mimeType: 'text/html+skybridge',
+          text: content,
+          _meta: { 'openai/widgetPrefersBorder': false }
+        }
+      ]
+    }
+  })
+
+  server.registerTool(
+    'listPokemons',
+    {
+      title: 'Pokemon List',
+      description: `Display a list of Pokemon in an interactive carousel.
+
+WHEN TO USE:
+- When the user asks to see a list of Pokemon
+- When the user wants to browse Pokemon
+- When the user asks "show me some Pokemon"
+
+The tool fetches Pokemon data from the PokeAPI and displays them in a beautiful carousel format.`,
+      inputSchema: z.object({
+        limit: z
+          .number()
+          .min(1)
+          .max(50)
+          .optional()
+          .default(12)
+          .describe('Number of Pokemon to fetch (1-50, default: 12)')
+      }),
+      _meta: {
+        'openai/outputTemplate': resourceUri,
+        'openai/toolInvocation/invoking': 'Fetching Pokemon...',
+        'openai/toolInvocation/invoked': 'Pokemon list ready!'
+      }
+    },
+    async (args: { limit?: number }) => {
+      console.log('listPokemons called with args:', JSON.stringify(args))
+      const limit = args.limit ?? 12
+      console.log('Using limit:', limit)
+
+      try {
+        const pokemons = await fetchPokemons(limit)
+
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Found ${pokemons.length} Pokemon! Browse through the carousel to see them all.`
+            }
+          ],
+          structuredContent: {
+            pokemons
+          }
+        }
+      } catch (error) {
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Failed to fetch Pokemon: ${error instanceof Error ? error.message : 'Unknown error'}`
+            }
+          ],
+          isError: true
+        }
+      }
+    }
+  )
+}

package/starter/src/server.ts

@@ -0,0 +1,169 @@
+import 'dotenv/config'
+import type { IncomingMessage } from 'node:http'
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js'
+import type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js'
+import express from 'express'
+import {
+  getWidgets,
+  getWidgetHTML,
+  type ViteHandle
+} from 'vite-plugin-chatgpt-widgets'
+import type { ViteDevServer } from 'vite'
+import { registerPokemonFlow } from './flows/list-pokemons.flow.js'
+
+const isDev = process.env.NODE_ENV !== 'production'
+const port = Number(process.env.PORT) || 3000
+
+// Session storage
+interface SessionData {
+  transport: StreamableHTTPServerTransport
+}
+const sessions = new Map<string, SessionData>()
+
+// Vite handle for dynamic widget content
+let viteHandle: ViteHandle
+
+function createServer() {
+  const server = new McpServer({
+    name: 'Manifest Starter',
+    version: '0.0.1'
+  })
+
+  // Pass viteHandle so flows can fetch fresh widget content
+  registerPokemonFlow(server, viteHandle)
+
+  return server
+}
+
+async function main() {
+  const app = express()
+
+  // Create Vite dev server in development mode
+  let viteDevServer: ViteDevServer | null = null
+
+  if (isDev) {
+    const { createServer } = await import('vite')
+    viteDevServer = await createServer({
+      server: { middlewareMode: true },
+      appType: 'custom'
+    })
+    // Use Vite's middleware for HMR and asset serving
+    app.use(viteDevServer.middlewares)
+  }
+
+  // Set vite handle for dynamic widget content
+  if (isDev && viteDevServer) {
+    viteHandle = { devServer: viteDevServer }
+    console.log('Vite dev server ready - widgets will be served dynamically')
+  } else {
+    viteHandle = { manifestPath: 'dist/web/.vite/manifest.json' }
+    console.log('Using production manifest for widgets')
+  }
+
+  // Log available widgets
+  const widgets = await getWidgets('src/web', viteHandle)
+  for (const widget of widgets) {
+    console.log(`  - ${widget.name} (${widget.source})`)
+  }
+
+  app.use(express.json())
+
+  // CORS headers for all responses
+  app.use((_req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*')
+    res.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS')
+    res.header(
+      'Access-Control-Allow-Headers',
+      'Content-Type, Accept, Authorization, mcp-session-id'
+    )
+    res.header(
+      'Access-Control-Expose-Headers',
+      'mcp-session-id, WWW-Authenticate'
+    )
+    next()
+  })
+
+  // Handle CORS preflight
+  app.options('/mcp', (_req, res) => {
+    res.sendStatus(204)
+  })
+
+  app.post('/mcp', async (req, res, next) => {
+    const sessionId = req.headers['mcp-session-id'] as string | undefined
+
+    // Existing session
+    if (sessionId && sessions.has(sessionId)) {
+      const session = sessions.get(sessionId)!
+      await session.transport
+        .handleRequest(req as unknown as IncomingMessage, res, req.body)
+        .catch(next)
+      return
+    }
+
+    // New session - create transport and server
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: () => crypto.randomUUID(),
+      enableJsonResponse: true
+    })
+
+    const server = createServer()
+
+    transport.onclose = () => {
+      const sid = (transport as unknown as { sessionId?: string }).sessionId
+      if (sid) sessions.delete(sid)
+    }
+
+    await server.connect(transport as Transport)
+    await transport
+      .handleRequest(req as unknown as IncomingMessage, res, req.body)
+      .catch(next)
+
+    // Store session after successful initialization
+    const newSessionId = (transport as unknown as { sessionId?: string })
+      .sessionId
+    if (newSessionId) {
+      sessions.set(newSessionId, { transport })
+    }
+  })
+
+  // Handle GET for SSE streams
+  app.get('/mcp', async (req, res, next) => {
+    const sessionId = req.headers['mcp-session-id'] as string | undefined
+
+    if (!sessionId || !sessions.has(sessionId)) {
+      res.status(400).json({ error: 'Invalid or missing session ID' })
+      return
+    }
+
+    const session = sessions.get(sessionId)!
+    await session.transport
+      .handleRequest(req as unknown as IncomingMessage, res)
+      .catch(next)
+  })
+
+  // Handle DELETE for session cleanup
+  app.delete('/mcp', async (req, res) => {
+    const sessionId = req.headers['mcp-session-id'] as string | undefined
+
+    if (sessionId && sessions.has(sessionId)) {
+      const session = sessions.get(sessionId)!
+      await session.transport.close()
+      sessions.delete(sessionId)
+    }
+
+    res.status(204).end()
+  })
+
+  app.listen(port, '0.0.0.0', () => {
+    console.log(`MCP server listening on http://localhost:${port}/mcp`)
+    if (isDev) {
+      console.log('Vite HMR enabled - widget changes will hot reload')
+    }
+  })
+}
+
+main().catch((err) => {
+  console.error('Failed to start server:', err)
+  process.exit(1)
+})