Improve MCP integration for Cloudflare Workers environment

- Move MCP button to better position (after file upload, before enhance)
- Add runtime environment detection for stdio servers
- Update example config to focus on SSE-based servers
- Add warning about stdio server limitations in Cloudflare Workers
- Provide clearer error messages for unsupported server types

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/components/chat/ChatBox.tsx

@@ -241,6 +241,7 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
             <IconButton title="Upload file" className="transition-all" onClick={() => props.handleFileUpload()}>
               <div className="i-ph:paperclip text-xl"></div>
             </IconButton>
+            <McpConnection />
             <IconButton
               title="Enhance prompt"
               disabled={props.input.length === 0 || props.enhancingPrompt}
@@ -303,7 +304,6 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
             </div>
           ) : null}
           <SupabaseConnection />
-          <McpConnection />
           <ExpoQrModal open={props.qrModalOpen} onClose={() => props.setQrModalOpen(false)} />
         </div>
       </div>

app/components/chat/MCPConnection.tsx

@@ -5,17 +5,18 @@ import { useMCPConfig, type MCPConfig } from '~/lib/hooks/useMCPConfig';
 import { IconButton } from '~/components/ui/IconButton';
 
 // Example MCP configuration that users can load
+// Note: Buildify runs on Cloudflare Workers, so only SSE-based servers are supported
 const EXAMPLE_MCP_CONFIG: MCPConfig = {
   mcpServers: {
-    everything: {
-      command: 'npx',
-      args: ['-y', '@modelcontextprotocol/server-everything'],
+    'brave-search': {
+      type: 'sse',
+      url: 'https://mcp.brave.com/sse',
     },
-    git: {
-      command: 'uvx',
-      args: ['mcp-server-git'],
+    'github-mcp': {
+      type: 'sse', 
+      url: 'https://github-mcp-server.vercel.app/sse',
     },
-    'remote-sse': {
+    'local-sse-server': {
       type: 'sse',
       url: 'http://localhost:8000/sse',
     },
@@ -368,6 +369,10 @@ export function McpConnection() {
                   {error && <p className="mt-2 text-sm text-bolt-elements-icon-error">{error}</p>}
 
                   <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                    <div className="mb-2 p-2 bg-bolt-elements-background-depth-1 rounded border border-bolt-elements-borderColor">
+                      <strong>⚠️ Runtime Limitation:</strong> Buildify runs on Cloudflare Workers, which only supports SSE-based MCP servers. 
+                      Stdio servers (using commands like npx, uvx, docker) are not supported.
+                    </div>
                     The MCP configuration format is identical to the one used in Claude Desktop.
                     <a
                       href="https://modelcontextprotocol.io/examples"

app/lib/services/mcp.ts

@@ -82,6 +82,11 @@ async function createStdioClient(serverName: string, config: ServerConfig): Prom
 
   logger.debug(`Creating stdio MCP client for '${serverName}' with command: '${command}' ${args?.join(' ') || ''}`);
 
+  // Check if we're in Cloudflare Workers environment (no child_process support)
+  if (typeof process === 'undefined' || !process.versions?.node) {
+    throw new Error(`Stdio MCP servers are not supported in the current runtime environment. Please use SSE-based servers instead. See: https://modelcontextprotocol.io/examples`);
+  }
+
   try {
     const transport = new Experimental_StdioMCPTransport({
       command: command!,