mcp-inflight 0.2.2 → 0.2.4

package/README.md

@@ -25,25 +25,117 @@ Then restart Claude Code.
 
 ## Usage
 
-Use `/share` to share your current project:
+Ask Claude to share your project:
 
 ```
-User: /share
+User: Share this project on InFlight
 
-Claude: Sharing your project...
+Claude: I'll share your project to InFlight...
 Your prototype is live at: https://www.inflight.co/v/xyz789
 ```
 
-## Commands
+## Tools
 
-- `/share` - Share current project as a live prototype
-- `/sandbox-list` - List your deployed prototypes
-- `/sandbox-sync` - Sync changes to an existing prototype
-- `/sandbox-delete` - Delete a prototype
+The MCP server provides these tools:
+
+| Tool | Description |
+|------|-------------|
+| `share` | Share a local project as a live prototype |
+| `prototype_list` | List your deployed prototypes |
+| `prototype_sync` | Sync changes to an existing prototype |
+| `prototype_delete` | Delete a prototype |
+| `login` | Login to InFlight (opens browser) |
+| `logout` | Logout from InFlight |
 
 ## Supported Projects
 
-Next.js, Vite, Create React App, Node.js, and static HTML.
+- **Next.js** (App Router and Pages Router)
+- **Vite** (React, Vue, Svelte, etc.)
+- **Create React App**
+- **Node.js**
+- **Static HTML**
+
+## Features
+
+### Binary File Support
+
+The MCP server automatically handles binary files including:
+
+- **Images**: PNG, JPG, JPEG, GIF, WebP, ICO, SVG, BMP, TIFF, AVIF
+- **Fonts**: WOFF, WOFF2, TTF, EOT, OTF
+- **Media**: MP3, MP4, WebM, OGG, WAV
+- **Other**: PDF, ZIP
+
+Binary files are base64 encoded during upload and properly decoded in the sandbox, ensuring your `/public` folder assets work correctly.
+
+### Monorepo Support
+
+Automatically detects and bundles workspace dependencies for monorepo projects using pnpm, npm, or yarn workspaces.
+
+### Automatic Patching
+
+The server automatically patches configuration files for CodeSandbox compatibility:
+
+- **Vite**: Adds `allowedHosts` for CodeSandbox domains
+- **Next.js**: Configures CSP headers to allow iframe embedding
+
+### Large Project Support
+
+Projects over 3MB are automatically chunked into smaller uploads to handle Vercel's serverless function body size limits.
+
+## Slash Commands (Optional)
+
+For a better experience, install the included slash commands. These provide `/share` and `/inflight` commands in Claude Code.
+
+### Installation
+
+Copy the command files to your Claude Code commands directory:
+
+```bash
+# Create the commands directory if it doesn't exist
+mkdir -p ~/.claude/commands
+
+# Copy the commands (run from the mcp-inflight package directory, or adjust the path)
+cp node_modules/mcp-inflight/commands/*.md ~/.claude/commands/
+```
+
+Or if you cloned the repo:
+
+```bash
+cp packages/mcp-inflight/commands/*.md ~/.claude/commands/
+```
+
+### Available Commands
+
+| Command | Description |
+|---------|-------------|
+| `/share` | Share a project to InFlight (shortcut for the share tool) |
+| `/inflight` | Menu for managing prototypes: list, sync, delete, login, logout |
+
+## Troubleshooting
+
+### Server Startup Timeout
+
+If you see "Timeout: Waiting for server to start took longer than 120s", this usually means:
+
+1. The project is large and takes a while to start
+2. There's an error in the dev server startup
+
+The deployment logs will show the exact command being used. Try running it locally to verify it works.
+
+### Missing Images or Assets
+
+If images from your `/public` folder aren't loading, ensure:
+
+1. The file extension is in the supported binary file list
+2. The file path is correct (paths are relative to project root)
+
+### Authentication Issues
+
+If you're getting authentication errors:
+
+1. Run the `login` tool to re-authenticate
+2. Check that your InFlight account is active
 
 ## License
 

package/dist/index.js

@@ -496,6 +496,52 @@ function detectProjectType(projectPath) {
 // src/utils/file-utils.ts
 import * as fs2 from "fs";
 import * as path2 from "path";
+var BINARY_EXTENSIONS = [
+  // Images
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".webp",
+  ".ico",
+  ".svg",
+  ".bmp",
+  ".tiff",
+  ".avif",
+  // Fonts
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".otf",
+  // Other binary
+  ".pdf",
+  ".zip",
+  ".mp3",
+  ".mp4",
+  ".webm",
+  ".ogg",
+  ".wav"
+];
+function isBinaryFile(filename) {
+  const ext = path2.extname(filename).toLowerCase();
+  return BINARY_EXTENSIONS.includes(ext);
+}
+function getFileContent(file) {
+  return typeof file === "string" ? file : file.content;
+}
+function getFileSize(file) {
+  return getFileContent(file).length;
+}
+function getTextContent(file) {
+  if (typeof file === "string") {
+    return file;
+  }
+  if (file.encoding === "utf-8") {
+    return file.content;
+  }
+  return void 0;
+}
 var ALWAYS_IGNORE = [
   "node_modules",
   ".git",
@@ -536,8 +582,15 @@ function readProjectFiles(projectPath, relativePath = "", includeEnvFiles = fals
     } else if (entry.isFile()) {
       const filePath = path2.join(projectPath, entryRelativePath);
       try {
-        const content = fs2.readFileSync(filePath, "utf-8");
-        files[entryRelativePath] = content;
+        if (isBinaryFile(entry.name)) {
+          const buffer = fs2.readFileSync(filePath);
+          const content = buffer.toString("base64");
+          console.log(`[MCP] Read binary file: ${entryRelativePath}, original size=${buffer.length}, base64 length=${content.length}`);
+          files[entryRelativePath] = { content, encoding: "base64" };
+        } else {
+          const content = fs2.readFileSync(filePath, "utf-8");
+          files[entryRelativePath] = content;
+        }
       } catch {
       }
     }
@@ -547,7 +600,7 @@ function readProjectFiles(projectPath, relativePath = "", includeEnvFiles = fals
 var MAX_CHUNK_SIZE = 2 * 1024 * 1024;
 var CHUNK_THRESHOLD = 3 * 1024 * 1024;
 function calculateTotalSize(files) {
-  return Object.values(files).reduce((sum, content) => sum + content.length, 0);
+  return Object.values(files).reduce((sum, file) => sum + getFileSize(file), 0);
 }
 function needsChunkedUpload(files) {
   return calculateTotalSize(files) > CHUNK_THRESHOLD;
@@ -556,16 +609,16 @@ function chunkFiles(files, maxChunkSize = MAX_CHUNK_SIZE) {
   const chunks = [];
   let currentChunk = {};
   let currentSize = 0;
-  const entries = Object.entries(files).sort((a, b) => a[1].length - b[1].length);
-  for (const [filePath, content] of entries) {
-    const fileSize = content.length;
+  const entries = Object.entries(files).sort((a, b) => getFileSize(a[1]) - getFileSize(b[1]));
+  for (const [filePath, file] of entries) {
+    const fileSize = getFileSize(file);
     if (fileSize > maxChunkSize) {
       if (Object.keys(currentChunk).length > 0) {
         chunks.push(currentChunk);
         currentChunk = {};
         currentSize = 0;
       }
-      chunks.push({ [filePath]: content });
+      chunks.push({ [filePath]: file });
       continue;
     }
     if (currentSize + fileSize > maxChunkSize && Object.keys(currentChunk).length > 0) {
@@ -573,7 +626,7 @@ function chunkFiles(files, maxChunkSize = MAX_CHUNK_SIZE) {
       currentChunk = {};
       currentSize = 0;
     }
-    currentChunk[filePath] = content;
+    currentChunk[filePath] = file;
     currentSize += fileSize;
   }
   if (Object.keys(currentChunk).length > 0) {
@@ -1125,7 +1178,7 @@ async function uploadChunk(sandboxId, files, chunkIndex, totalChunks, log) {
     throw new NotAuthenticatedError();
   }
   const fileCount = Object.keys(files).length;
-  const chunkSize = Object.values(files).reduce((sum, content) => sum + content.length, 0);
+  const chunkSize = calculateTotalSize(files);
   await log(`Uploading chunk ${chunkIndex + 1}/${totalChunks} (${fileCount} files, ${(chunkSize / 1024).toFixed(1)} KB)...`);
   const response = await fetch(`${INFLIGHT_API}/api/mcp/sandbox/${sandboxId}/upload`, {
     method: "POST",
@@ -1384,8 +1437,30 @@ function checkMiddleware(content, filePath) {
     configFile: filePath
   };
 }
+function configAllowsCodeSandbox(content) {
+  const literalRegex = /['"`](https?:\/\/[^\s'"`]+|[^'"`\s]+)['"`]/g;
+  let match;
+  while ((match = literalRegex.exec(content)) !== null) {
+    const literal = match[1];
+    let hostname = "";
+    try {
+      if (/^https?:\/\//i.test(literal)) {
+        const url = new URL(literal);
+        hostname = url.hostname.toLowerCase();
+      } else {
+        hostname = literal.toLowerCase();
+      }
+    } catch {
+      hostname = literal.toLowerCase();
+    }
+    if (hostname === "csb.app" || hostname === "codesandbox.io" || hostname.endsWith(".csb.app") || hostname.endsWith(".codesandbox.io")) {
+      return true;
+    }
+  }
+  return false;
+}
 function checkViteConfig(content, filePath) {
-  if (content.includes(".csb.app") || content.includes(".codesandbox.io")) {
+  if (configAllowsCodeSandbox(content)) {
     return { canEmbed: true, issues: [], configFile: filePath };
   }
   const issues = [];
@@ -1579,7 +1654,11 @@ function patchFilesForEmbed(files) {
   const patchedFiles = [];
   const remainingIssues = [];
   const result = { ...files };
-  for (const [filePath, content] of Object.entries(files)) {
+  for (const [filePath, file] of Object.entries(files)) {
+    const content = getTextContent(file);
+    if (content === void 0) {
+      continue;
+    }
     const fileName = filePath.split("/").pop() || "";
     let patched = null;
     if (isMiddlewareFile(filePath)) {
@@ -1641,7 +1720,11 @@ function patchFilesForEmbed(files) {
 }
 function checkEmbedCompatibility(files) {
   const allIssues = [];
-  for (const [filePath, content] of Object.entries(files)) {
+  for (const [filePath, file] of Object.entries(files)) {
+    const content = getTextContent(file);
+    if (content === void 0) {
+      continue;
+    }
     const fileName = filePath.split("/").pop() || "";
     if (fileName === "next.config.js" || fileName === "next.config.mjs" || fileName === "next.config.ts") {
       const result = checkNextConfig(content, filePath);
@@ -1912,7 +1995,7 @@ async function deployPrototype(args, log) {
       }
     }
   }
-  const totalSize = Object.values(files).reduce((sum, content) => sum + content.length, 0);
+  const totalSize = calculateTotalSize(files);
   await log(`Found ${fileCount} files (${(totalSize / 1024 / 1024).toFixed(1)} MB)`);
   let existingSandbox;
   try {
@@ -2054,7 +2137,7 @@ function createServer2() {
   const server = new Server(
     {
       name: "mcp-inflight",
-      version: "0.2.2"
+      version: "0.2.3"
     },
     {
       capabilities: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-inflight",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "MCP server for sharing prototypes via InFlight",
   "author": "InFlight <hello@inflight.co>",
   "homepage": "https://github.com/inflight/mcp-inflight",