mcp-use-ts/packages/cli/src/dev-server.ts at 5c3c79cf6111197fd8b57ebc80ce80b4b40632ef · mcp-use/mcp-use-ts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { createServer, type ViteDevServer } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'
import { promises as fs } from 'node:fs'
import { globby } from 'globby'

const ROUTE_PREFIX = '/mcp-use/widgets'
const SRC_DIR = 'resources'

interface WidgetEntry {
  name: string
  path: string
  route: string
}

async function discoverWidgets(projectPath: string): Promise<WidgetEntry[]> {
  const srcDir = path.join(projectPath, SRC_DIR)
  const entries = await globby([`${srcDir}/**/*.tsx`])

  return entries.map(entry => {
    const relativePath = path.relative(path.join(projectPath, SRC_DIR), entry)
    const name = path.parse(entry).name
    const route = `${ROUTE_PREFIX}/${relativePath.replace(/\.tsx?$/, '')}`

    return { name, path: entry, route }
  })
}

function htmlTemplate(scriptPath: string, title: string) {
  return `<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>${title} Widget</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        background: #f5f5f5;
      }
      #widget-root {
        max-width: 1200px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="widget-root"></div>
    <script type="module" src="${scriptPath}"></script>
  </body>
</html>`
}

export async function startDevServer(projectPath: string, port: number = 5173): Promise<{ server: ViteDevServer; port: number }> {
  const widgets = await discoverWidgets(projectPath)

  const server = await createServer({
    root: projectPath,
    server: {
      port,
      strictPort: false,
      cors: true,
      hmr: {
        overlay: true,
      },
    },
    plugins: [
      react(),
      {
        name: 'mcp-widget-html',
        apply: 'serve',
        configureServer(server) {
          // Serve widget HTML pages
          server.middlewares.use(async (req, res, next) => {
            // Early check before processing
            if (!req.url?.startsWith(ROUTE_PREFIX)) {
              return next()
            }

            // Find matching widget (strip query string for matching)
            const urlWithoutQuery = req.url?.split('?')[0]
            const widget = widgets.find(w => urlWithoutQuery === w.route)

            if (!widget) {
              return next()
            }

            // Serve HTML with the widget entry point
            const relativeWidgetPath = '/' + path.relative(projectPath, widget.path)
            const html = htmlTemplate(relativeWidgetPath, widget.name)

            // Transform HTML to inject Vite's HMR client
            const transformedHtml = await server.transformIndexHtml(req.url, html)

            res.setHeader('Content-Type', 'text/html')
            res.end(transformedHtml)
          })
        },
      },
    ],
    optimizeDeps: {
      include: ['react', 'react-dom', 'react/jsx-runtime'],
    },
  })

  await server.listen()

  const actualPort = server.config.server.port || port

  console.log(`\x1b[32m✓\x1b[0m Vite dev server with HMR started on port ${actualPort}`)
  console.log(`\x1b[90m  ${widgets.length} widget(s) available:\x1b[0m`)
  for (const widget of widgets) {
    console.log(`\x1b[90m  - http://localhost:${actualPort}${widget.route}\x1b[0m`)
  }

  return { server, port: actualPort }
}