fix: add support for remote http with npx

Author: johnleider

README.md

@@ -26,7 +26,18 @@ By connecting your development environment to the Vuetify MCP server, you gain A
 
 ## Quick Start
 
-Run Vuetify MCP with a single command:
+### Hosted HTTP Server (Easiest)
+
+Use the hosted MCP server directly:
+
+```bash
+# Claude Desktop
+claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp
+```
+
+### Local Installation
+
+Run Vuetify MCP locally:
 
 ```bash
 # Start the Vuetify MCP server
@@ -44,7 +55,10 @@ You can configure the Vuetify MCP server in your IDE or client by running the in
 The interactive CLI provides the simplest way to configure your environment:
 
 ```bash
-# Run the configuration helper
+# Configure for hosted remote server
+npx -y @vuetify/mcp config --remote
+
+# Or configure for local installation
 npx -y @vuetify/mcp config
 ```
 
@@ -53,6 +67,7 @@ The CLI will:
 1. Detect supported IDEs on your system (VS Code, Claude, Cursor, Trae, Windsurf)
 2. Prompt you if multiple IDEs are found
 3. Apply the necessary settings automatically to your selected environment
+4. Use the hosted server (with `--remote`) or local installation
 
 ### Manual Configuration
 

bin/cli.js

@@ -35,6 +35,9 @@ function buildServerArgs (args) {
   if (args.stateless) {
     serverArgs.push('--stateless')
   }
+  if (args.remote) {
+    serverArgs.push('--remote')
+  }
   return serverArgs
 }
 
@@ -73,6 +76,10 @@ const defaultArgs = {
     type: 'boolean',
     description: 'Run HTTP transport in stateless mode',
   },
+  'remote': {
+    type: 'boolean',
+    description: 'Use hosted MCP server at https://mcp.vuetifyjs.com',
+  },
 }
 
 const config = defineCommand({

src/cli/index.ts

@@ -7,6 +7,8 @@ import { installGlobally } from './install-globally.js'
 import type { DetectedIDE } from './ide/types.js'
 import { npx } from './settings-builder.js'
 
+const useRemote = process.argv.includes('--remote')
+
 const ides = await detectIDEs()
 
 if (ides.length === 0) {
@@ -29,11 +31,11 @@ if (ides.length === 1) {
 }
 
 if (idesToInstall === null) {
-  config()
+  config(undefined, useRemote)
   process.exit(0)
 }
 
-config(idesToInstall as DetectedIDE)
+config(idesToInstall as DetectedIDE, useRemote)
 
 if ((!npx || !npx?.pure) && (idesToInstall as DetectedIDE).ide === 'claude') {
   log.warn(`Claude probably will fail with resolving your \`npx\`. ${link('See more', 'https://github.com/modelcontextprotocol/servers/issues/64#issuecomment-2878569805')}`)

src/cli/install-globally.ts

@@ -2,7 +2,7 @@ import { parse } from 'jsonc-parser'
 import { writeFile, readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import { resolve } from 'pathe'
-import { serverConfig, getSettingsPath } from './settings-builder.js'
+import { getServerConfig, getSettingsPath } from './settings-builder.js'
 import type { DetectedIDE } from './ide/types.js'
 import { deepset } from './utils/deepset.js'
 
@@ -12,6 +12,7 @@ async function setIdeSettings (ideInstance: DetectedIDE) {
   }
   const configFilePath = resolve(ideInstance.settingsDir, ideInstance.settingsFile)
   const settingsPath = getSettingsPath(ideInstance.ide)
+  const serverConfig = getServerConfig()
   if (existsSync(configFilePath)) {
     const fileContent = await readFile(configFilePath, { encoding: 'utf8' })
     const existingConfig = parse(fileContent)

src/cli/intro.ts

@@ -25,7 +25,7 @@ export const intro = (): void => {
   console.warn(startMessage)
 }
 
-export const config = (ide: DetectedIDE = defaultIde): void => {
-  const message = `\n${configMessage(ide)}\n\n${getSettingsBuilder(ide.ide)}`
+export const config = (ide: DetectedIDE = defaultIde, remote?: boolean): void => {
+  const message = `\n${configMessage(ide)}\n\n${getSettingsBuilder(ide.ide, undefined, remote)}`
   console.warn(message)
 }

src/cli/settings-builder.ts

@@ -62,17 +62,23 @@ export const getSettingsPath = (ide: IDEId): string => {
   }
 }
 
-export const serverConfig = npx?.wsl ? wslConfig : defaultConfig
+export const remoteConfig = {
+  url: 'https://mcp.vuetifyjs.com/mcp',
+}
 
-export function getServerConfig (transport?: 'stdio' | 'http') {
+export function getServerConfig (transport?: 'stdio' | 'http', remote?: boolean) {
+  // Remote always takes precedence
+  if (remote) {
+    return remoteConfig
+  }
   if (transport === 'http') {
     return npx?.wsl ? wslHttpConfig : httpConfig
   }
-  return serverConfig
+  return npx?.wsl ? wslConfig : defaultConfig
 }
 
-export const getSettingsBuilder = (ide: IDEId, transport?: 'stdio' | 'http'): string => {
-  const config = getServerConfig(transport)
+export const getSettingsBuilder = (ide: IDEId, transport?: 'stdio' | 'http', remote?: boolean): string => {
+  const config = getServerConfig(transport, remote)
   switch (ide) {
     case 'code':
     case 'code-insiders': {