create-manifest 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-manifest",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Create a new Manifest project",
   "type": "module",
   "bin": {

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

@@ -15,7 +15,9 @@
       "WebFetch(domain:dev.to)",
       "WebFetch(domain:www.skybridge.tech)",
       "WebFetch(domain:gadget.dev)",
-      "Bash(curl:*)"
+      "Bash(curl:*)",
+      "Bash(pkill:*)",
+      "Bash(npm run dev:*)"
     ]
   }
 }

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/src/flows/list-pokemons.flow.ts

@@ -1,5 +1,5 @@
 import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import type { WidgetInfo } from 'vite-plugin-chatgpt-widgets'
+import { getWidgetHTML, type ViteHandle } from 'vite-plugin-chatgpt-widgets'
 import { z } from 'zod'
 
 export interface Pokemon {
@@ -45,29 +45,27 @@ async function fetchPokemons(limit: number = 12): Promise<Pokemon[]> {
  */
 export function registerPokemonFlow(
   server: McpServer,
-  widgets: WidgetInfo[]
+  viteHandle: ViteHandle
 ): void {
   const uiVersion = 'v1'
   const resourceUri = `ui://pokemon-list.html?${uiVersion}`
 
-  // Find the PokemonList widget
-  const pokemonWidget = widgets.find((w) => w.name === 'PokemonList')
+  // 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)
 
-  if (!pokemonWidget) {
-    console.warn('PokemonList widget not found - skipping flow registration')
-    return
-  }
-
-  server.registerResource('pokemon-list', resourceUri, {}, async () => ({
-    contents: [
-      {
-        uri: resourceUri,
-        mimeType: 'text/html+skybridge',
-        text: pokemonWidget.content,
-        _meta: { 'openai/widgetPrefersBorder': false }
-      }
-    ]
-  }))
+    return {
+      contents: [
+        {
+          uri: resourceUri,
+          mimeType: 'text/html+skybridge',
+          text: content,
+          _meta: { 'openai/widgetPrefersBorder': false }
+        }
+      ]
+    }
+  })
 
   server.registerTool(
     'listPokemons',

package/starter/src/server.ts

@@ -4,7 +4,11 @@ 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, type WidgetInfo } from 'vite-plugin-chatgpt-widgets'
+import {
+  getWidgets,
+  getWidgetHTML,
+  type ViteHandle
+} from 'vite-plugin-chatgpt-widgets'
 import type { ViteDevServer } from 'vite'
 import { registerPokemonFlow } from './flows/list-pokemons.flow.js'
 
@@ -17,8 +21,8 @@ interface SessionData {
 }
 const sessions = new Map<string, SessionData>()
 
-// Widget storage - populated at startup
-let widgets: WidgetInfo[] = []
+// Vite handle for dynamic widget content
+let viteHandle: ViteHandle
 
 function createServer() {
   const server = new McpServer({
@@ -26,7 +30,8 @@ function createServer() {
     version: '0.0.1'
   })
 
-  registerPokemonFlow(server, widgets)
+  // Pass viteHandle so flows can fetch fresh widget content
+  registerPokemonFlow(server, viteHandle)
 
   return server
 }
@@ -47,18 +52,17 @@ async function main() {
     app.use(viteDevServer.middlewares)
   }
 
-  // Load widgets
+  // Set vite handle for dynamic widget content
   if (isDev && viteDevServer) {
-    widgets = await getWidgets('src/web', { devServer: viteDevServer })
-    console.log(`Loaded ${widgets.length} widget(s) in development mode`)
+    viteHandle = { devServer: viteDevServer }
+    console.log('Vite dev server ready - widgets will be served dynamically')
   } else {
-    widgets = await getWidgets('src/web', {
-      manifestPath: 'dist/web/.vite/manifest.json'
-    })
-    console.log(`Loaded ${widgets.length} widget(s) from production build`)
+    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})`)
   }

package/starter/src/web/PokemonList.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { BlogPostList } from '@/components/blog-post-list'
 import type { BlogPost } from '@/components/blog-post-card'
+import { PaymentMethods } from './components/payment-methods'
 
 interface Pokemon {
   id: number
@@ -49,7 +50,10 @@ export default function PokemonList() {
     if (window.openai?.content?.structuredContent) {
       const content = window.openai.content
         .structuredContent as StructuredContent
-      console.log('Using structuredContent, pokemons count:', content.pokemons?.length)
+      console.log(
+        'Using structuredContent, pokemons count:',
+        content.pokemons?.length
+      )
       if (content.pokemons) {
         setPosts(content.pokemons.map(pokemonToBlogPost))
       }
@@ -63,31 +67,27 @@ export default function PokemonList() {
 
   async function fetchPokemons() {
     try {
-      const response = await fetch(
-        'https://pokeapi.co/api/v2/pokemon?limit=12'
-      )
+      const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=12')
       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()
+        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 {
+            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
           }
-        )
+        })
       )
 
       setPosts(pokemons.map(pokemonToBlogPost))
@@ -113,6 +113,7 @@ export default function PokemonList() {
 
   return (
     <div className="p-4">
+      <PaymentMethods />
       <BlogPostList
         posts={posts}
         variant="carousel"

package/starter/src/web/components/blog-post-card.tsx

@@ -109,7 +109,9 @@ export function BlogPostCard({
                   )}
                   <div className="text-xs">
                     <p className="font-medium">{post.author.name}</p>
-                    <p className="text-white/60">{formatDate(post.publishedAt)}</p>
+                    <p className="text-white/60">
+                      {formatDate(post.publishedAt)}
+                    </p>
                   </div>
                 </div>
               )}

package/starter/src/web/components/payment-methods.tsx

@@ -0,0 +1,201 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { CreditCard, Lock, Plus } from 'lucide-react'
+import { useState } from 'react'
+
+export interface PaymentMethod {
+  id: string
+  type: 'card' | 'apple_pay' | 'google_pay' | 'paypal'
+  brand?: 'visa' | 'mastercard' | 'amex' | 'cb'
+  last4?: string
+  isDefault?: boolean
+}
+
+export interface PaymentMethodsProps {
+  methods?: PaymentMethod[]
+  amount?: number
+  currency?: string
+  selectedMethodId?: string
+  onSelectMethod?: (methodId: string) => void
+  onAddCard?: () => void
+  onPay?: (methodId: string) => void
+  isLoading?: boolean
+}
+
+const defaultMethods: PaymentMethod[] = [
+  { id: '1', type: 'card', brand: 'visa', last4: '4242' },
+  {
+    id: '2',
+    type: 'card',
+    brand: 'mastercard',
+    last4: '8888',
+    isDefault: true
+  },
+  { id: '3', type: 'apple_pay' }
+]
+
+const BrandLogo = ({ brand }: { brand?: string }) => {
+  switch (brand) {
+    case 'visa':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5" />
+          <g transform="translate(5, 10) scale(0.15)">
+            <polygon points="116.145,95.719 97.858,95.719 109.296,24.995 127.582,24.995" fill="#00579f" />
+            <path d="M182.437,26.724c-3.607-1.431-9.328-3.011-16.402-3.011c-18.059,0-30.776,9.63-30.854,23.398c-0.15,10.158,9.105,15.8,16.027,19.187c7.075,3.461,9.48,5.72,9.48,8.805c-0.072,4.738-5.717,6.922-10.982,6.922c-7.301,0-11.213-1.126-17.158-3.762l-2.408-1.13l-2.559,15.876c4.289,1.954,12.191,3.688,20.395,3.764c19.188,0,31.68-9.481,31.828-24.153c0.073-8.051-4.814-14.22-15.35-19.261c-6.396-3.236-10.313-5.418-10.313-8.729c0.075-3.01,3.313-6.093,10.533-6.093c5.945-0.151,10.313,1.278,13.622,2.708l1.654,0.751l2.487-15.272z" fill="#00579f" />
+            <path d="M206.742,70.664c1.506-4.063,7.301-19.788,7.301-19.788c-0.076,0.151,1.503-4.138,2.406-6.771l1.278,6.094c0,0,3.463,16.929,4.215,20.465c-2.858,0-11.588,0-15.2,0zm22.573-45.669l-14.145,0c-4.362,0-7.676,1.278-9.558,5.868l-27.163,64.855l19.188,0c0,0,3.159-8.729,3.838-10.609c2.105,0,20.771,0,23.479,0c0.525,2.483,2.182,10.609,2.182,10.609l16.932,0l-14.753-70.723z" fill="#00579f" />
+            <path d="M82.584,24.995l-17.909,48.227l-1.957-9.781c-3.311-11.286-13.695-23.548-25.283-29.645l16.404,61.848l19.338,0l28.744-70.649l-19.337,0z" fill="#00579f" />
+            <path d="M48.045,24.995l-29.422,0l-0.301,1.429c22.951,5.869,38.151,20.016,44.396,37.02l-6.396-32.523c-1.053-4.517-4.289-5.796-8.277-5.926z" fill="#faa61a" />
+          </g>
+        </svg>
+      )
+    case 'mastercard':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5" />
+          <g transform="translate(7, 5) scale(0.22)">
+            <rect x="60.4" y="25.7" width="31.5" height="56.6" fill="#FF5F00" />
+            <path d="M62.4,54c0-11,5.1-21.5,13.7-28.3c-15.6-12.3-38.3-9.6-50.6,6.1C13.3,47.4,16,70,31.7,82.3c13.1,10.3,31.4,10.3,44.5,0C67.5,75.5,62.4,65,62.4,54z" fill="#EB001B" />
+            <path d="M134.4,54c0,19.9-16.1,36-36,36c-8.1,0-15.9-2.7-22.2-7.7c15.6-12.3,18.3-34.9,6-50.6c-1.8-2.2-3.8-4.3-6-6c15.6-12.3,38.3-9.6,50.5,6.1C131.7,38.1,134.4,45.9,134.4,54z" fill="#F79E1B" />
+          </g>
+        </svg>
+      )
+    case 'amex':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#006FCF" />
+          <path
+            d="M10 12h4l.8 2 .8-2h4v8h-3v-5l-1.3 3h-2l-1.3-3v5h-2v-8zm14 0h6v2h-3v1h3v2h-3v1h3v2h-6v-8zm8 0h3l2 3 2-3h3l-3.5 4 3.5 4h-3l-2-3-2 3h-3l3.5-4-3.5-4z"
+            fill="white"
+          />
+        </svg>
+      )
+    case 'cb':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#1E4B9E" />
+          <rect x="4" y="10" width="18" height="12" rx="2" fill="#49A942" />
+          <text x="28" y="20" fill="white" fontSize="10" fontWeight="bold">
+            CB
+          </text>
+        </svg>
+      )
+    default:
+      return <CreditCard className="h-5 w-5 text-muted-foreground" />
+  }
+}
+
+const MethodIcon = ({ method }: { method: PaymentMethod }) => {
+  if (method.type === 'apple_pay') {
+    return (
+      <div className="h-5 w-8 rounded bg-black flex items-center justify-center">
+        <img src="/images/apple-pay.svg" alt="Apple Pay" className="h-2 w-auto invert" />
+      </div>
+    )
+  }
+  if (method.type === 'google_pay') {
+    return (
+      <svg viewBox="0 0 48 32" className="h-5 w-auto">
+        <rect width="48" height="32" rx="4" fill="#fff" stroke="#ddd" />
+        <text x="8" y="20" fontSize="10" fontWeight="500" fill="#5F6368">
+          G Pay
+        </text>
+      </svg>
+    )
+  }
+  if (method.type === 'paypal') {
+    return (
+      <svg viewBox="0 0 48 32" className="h-5 w-auto">
+        <rect width="48" height="32" rx="4" fill="#003087" />
+        <text x="8" y="20" fontSize="9" fontWeight="bold" fill="#fff">
+          PayPal
+        </text>
+      </svg>
+    )
+  }
+  return <BrandLogo brand={method.brand} />
+}
+
+export function PaymentMethods({
+  methods = defaultMethods,
+  amount = 279.0,
+  currency = 'EUR',
+  selectedMethodId,
+  onSelectMethod,
+  onAddCard,
+  onPay,
+  isLoading = false
+}: PaymentMethodsProps) {
+  const [selected, setSelected] = useState(
+    selectedMethodId || methods.find((m) => m.isDefault)?.id || methods[0]?.id
+  )
+
+  const handleSelect = (methodId: string) => {
+    setSelected(methodId)
+    onSelectMethod?.(methodId)
+  }
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency
+    }).format(value)
+  }
+
+  const getMethodLabel = (method: PaymentMethod) => {
+    if (method.type === 'apple_pay') return 'Apple Pay'
+    if (method.type === 'google_pay') return 'Google Pay'
+    if (method.type === 'paypal') return 'PayPal'
+    return `•••• ${method.last4}`
+  }
+
+  return (
+    <div className="w-full rounded-md sm:rounded-lg bg-card p-2 space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        {methods.map((method) => (
+          <button
+            key={method.id}
+            onClick={() => handleSelect(method.id)}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition-colors',
+              selected === method.id
+                ? 'border-foreground ring-1 ring-foreground'
+                : 'border-border  hover:border-foreground/50'
+            )}
+          >
+            <MethodIcon method={method} />
+            <span>{getMethodLabel(method)}</span>
+            {method.isDefault && (
+              <span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+                Default
+              </span>
+            )}
+          </button>
+        ))}
+        <button
+          onClick={onAddCard}
+          className="inline-flex items-center gap-1.5 rounded-full border border-dashed border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <Plus className="h-4 w-4" />
+          Add
+        </button>
+      </div>
+
+      <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-2">
+        <span className="flex items-center justify-center sm:justify-start gap-1.5 text-xs text-muted-foreground">
+          <Lock className="h-3 w-3" />
+          Secure encrypted transaction
+        </span>
+        <Button
+          size="sm"
+          className="w-full sm:w-auto"
+          onClick={() => selected && onPay?.(selected)}
+          disabled={!selected || isLoading}
+        >
+          <Lock className="mr-1.5 h-3.5 w-3.5" />
+          {isLoading ? 'Processing...' : `Pay ${formatCurrency(amount)}`}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/starter/tsconfig.json

@@ -16,6 +16,10 @@
     "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/web/*"]
+    }
   }
 }

package/starter/vite.config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
   server: {
     cors: {
       origin: true
-    }
+    },
+    allowedHosts: ['.ngrok-free.dev', '.ngrok.io']
   }
 })

package/starter/@/components/ui/button.tsx

@@ -1,62 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/starter/README-DEV.md

@@ -1,167 +0,0 @@
-# Manifest MCP Server - Developer Guide
-
-This is an MCP (Model Context Protocol) server template for building AI-powered flows.
-
-## Project Structure
-
-```
-src/
-├── server.ts                 # Express + MCP server setup
-├── flows/                    # MCP flows (tools, resources)
-│   └── gameboy.flow.ts       # Example flow
-└── web/                      # Web components (UI widgets)
-    └── gameboy-player/       # Example web component
-        ├── gameboy-player.html
-        ├── gameboy-player.ts
-        └── gameboy-player.css
-scripts/
-└── build-web.ts              # Vite build script for web components
-```
-
-## Getting Started
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server (with hot reload)
-npm run dev
-
-# Build for production
-npm run build
-
-# Run production build
-npm start
-```
-
-## Environment Variables
-
-Copy `.env.example` to `.env` and configure:
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `PORT` | `3000` | Server port |
-
-## Creating Flows
-
-Flows register tools and resources with the MCP server. See `src/flows/gameboy.flow.ts` for a complete example.
-
-### Basic Flow Structure
-
-```typescript
-import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
-import { z } from "zod"
-
-export function registerMyFlow(server: McpServer): void {
-  // Register a tool
-  server.registerTool(
-    "myTool",
-    {
-      title: "My Tool",
-      description: "Does something useful",
-      inputSchema: z.object({
-        input: z.string().describe("The input parameter")
-      })
-    },
-    async (args) => {
-      return {
-        content: [{ type: "text", text: `Result: ${args.input}` }]
-      }
-    }
-  )
-
-  // Register a resource (UI widget)
-  server.registerResource("my-widget", "ui://my-widget.html", {}, async () => ({
-    contents: [
-      {
-        uri: "ui://my-widget.html",
-        mimeType: "text/html+skybridge",
-        text: "<html>...</html>"
-      }
-    ]
-  }))
-}
-```
-
-### Registering Your Flow
-
-Add your flow to `src/server.ts`:
-
-```typescript
-import { registerMyFlow } from "./flows/my.flow.js"
-
-function createServer() {
-  const server = new McpServer({
-    name: "My MCP Server",
-    version: "0.0.1"
-  })
-
-  registerMyFlow(server)
-
-  return server
-}
-```
-
-## Creating Web Components
-
-Web components are built with Vite and bundled into single HTML files.
-
-1. Create a folder in `src/web/` with your component files
-2. Add the component to `scripts/build-web.ts`
-3. Reference the built HTML in your flow
-
-### Build Configuration
-
-Edit `scripts/build-web.ts` to add new web components:
-
-```typescript
-const components = [
-  'gameboy-player',
-  'my-new-component'  // Add your component here
-]
-```
-
-## MCP Endpoints
-
-The server exposes the following endpoints:
-
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| `POST` | `/mcp` | Create session / Send messages |
-| `GET` | `/mcp` | SSE stream for server events |
-| `DELETE` | `/mcp` | Close session |
-
-Sessions are managed via the `mcp-session-id` header.
-
-## Development Tips
-
-- The server uses Nodemon for hot reload during development
-- Web components are rebuilt on file changes
-- Use `console.log()` for debugging - output appears in the terminal
-
-## Testing with ChatGPT
-
-1. Deploy your server to a public URL (or use ngrok for local testing)
-2. Add the MCP server URL in ChatGPT settings
-3. Your tools will be available in the chat
-
-## Available Scripts
-
-| Script | Description |
-|--------|-------------|
-| `npm run dev` | Start dev server with hot reload |
-| `npm run build` | Build TypeScript and web components |
-| `npm run build:web` | Build only web components |
-| `npm start` | Run production build |
-
-## Dependencies
-
-- `@modelcontextprotocol/sdk` - MCP protocol implementation
-- `express` - HTTP server
-- `zod` - Schema validation
-- `dotenv` - Environment variables
-- `vite` - Web component bundling
-
-## License
-
-MIT