add session management; UI changes

.env

@@ -0,0 +1 @@
+API_BASE_URL=http://localhost:3000

.gitignore

@@ -6,3 +6,5 @@ client/node_modules
 client/dist
 client/package-lock.json
 client/build
+**/.DS_Store
+node_modules

Dockerfile.client

@@ -11,6 +11,10 @@ RUN npm install
 COPY client/ ./
 COPY shared/ ./shared/
 
+# Set API base URL as an ARG that can be passed during build
+ARG REACT_APP_API_BASE_URL=http://localhost:4000
+ENV REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL}
+
 # Build the application
 RUN npm run build
 
@@ -23,9 +27,6 @@ COPY --from=build /app/build /usr/share/nginx/html
 # Copy nginx configuration
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-# Set environment variables
-ENV API_BASE_URL=http://localhost:4000
-
 # Expose port
 EXPOSE 3000
 

Dockerfile.server

@@ -1,18 +1,25 @@
 # Dockerfile.server
 FROM node:20-alpine
 
+# Set base working directory
 WORKDIR /app
 
-# Copy package files
+# Copy shared code first
+COPY shared/ ./shared/
+
+# Create server directory and copy server-specific files
+WORKDIR /app/server
 COPY server/package*.json ./
 COPY server/tsconfig.json ./
+
+# Install dependencies in the server directory
 RUN npm install
 
-# Copy source code
+# Copy server source code relative to the new WORKDIR (/app/server)
 COPY server/src ./src
-COPY shared/ ./shared/
 
-# Build the application
+# Build the application (tsc will run in /app/server)
+# With rootDir: "..", output structure will be nested under ./dist
 RUN npm run build
 
 # Expose the server port
@@ -22,5 +29,6 @@ EXPOSE 4000
 ENV NODE_ENV=production
 ENV PORT=4000
 
-# Start the server
-CMD ["node", "dist/index.js"]
+# Start the server from the nested dist folder structure
+# e.g., /app/server/dist/server/src/index.js
+CMD ["node", "dist/server/src/index.js"]

README.md

@@ -2,11 +2,11 @@
 
 MCP Host is a complete end-to-end implementation of a Model Context Protocol (MCP) host with an in-built MCP client. It provides a beautiful, polished chat interface with tool selection capabilities using MCP, and integrates with the MCP Registry for discovering available servers.
 
-![MCP Host Screenshot](/path/to/screenshot.png)
+![MCP Host Screenshot](host_screenshot.png)
 
 ## Features
 
-- **Beautiful Chat Interface**: A clean, modern UI with glassmorphism design and a crimson color theme
+- **Chat Interface**: A modern UI with a glassmorphism design and crimson theme
 - **MCP Client Integration**: Discover and use tools from MCP servers
 - **Registry Integration**: Automatically connect to servers listed in the MCP Registry
 - **Anthropic API Integration**: Powered by Claude, one of the most capable AI assistants
@@ -25,8 +25,8 @@ MCP Host is a complete end-to-end implementation of a Model Context Protocol (MC
 1. Clone the repository:
 
    ```bash
-   git clone https://github.com/yourusername/mcp-host.git
-   cd mcp-host
+   git clone https://github.com/aidecentralized/canvas.git
+   cd canvas
    ```
 
 2. Start the application with Docker Compose:
@@ -96,7 +96,7 @@ server.tool("my-tool", { param: z.string() }, async ({ param }) => ({
 const app = express();
 const port = 3001;
 
-// To support multiple simultaneous connections, we use a lookup object
+// To support multiple simultaneous connections, a session-based lookup object is used
 const transports: { [sessionId: string]: SSEServerTransport } = {};
 
 // SSE endpoint

alyssa-changes.txt

@@ -0,0 +1,21 @@
+1. In docker-compose.yml version is depricated in new format of Docker. Removed this line version: "3.8" from line 1
+
+2. Added .env file with API_BASE_URL as http://localhost:3000
+
+3. In server/src/routes.ts: 
+try {
+      await mcpManager.registerServer({ id, name, url });
+      res.json({ success: true }); <------------------------ this always returns success regardless of outcome 
+    } catch (error) {
+      console.error("Error registering server:", error);
+      res.status(500).json({
+        error:
+          error.message || "An error occurred while registering the server",
+      });
+    }
+  });
+
+  Fix: 
+  A. In server/src/mcp/manager.ts, in registerServer() made a chnage to returned values 
+  B. Changed the receival in routes.ts 
+  C. In client/src/components/SettingsModal.tsx edited handleAddServer

client/.env

@@ -0,0 +1 @@
+REACT_APP_API_BASE_URL=http://localhost:4000 

client/package.json

@@ -10,11 +10,13 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^28.1.8",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^12.20.55",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "axios": "^1.8.4",
     "framer-motion": "^6.5.1",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
@@ -52,7 +54,7 @@
   },
   "devDependencies": {
     "@types/react-syntax-highlighter": "^15.5.9",
-    "@types/uuid": "^9.0.6"
+    "@types/uuid": "^9.0.8"
   },
   "proxy": "http://localhost:4000"
 }

client/public/index.html

@@ -5,18 +5,29 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Nanda Host" />
+    <meta
+      name="description"
+      content="Nanda Host - MCP Integration for Claude"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop.
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the \`public\` folder during the build.
-      Only files inside the \`public\` folder can be referenced from the HTML.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- Force cache invalidation with version parameter -->
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
     <title>Nanda Host</title>
   </head>
   <body>
@@ -28,6 +39,9 @@
 
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
 </html>

client/public/manifest.json

@@ -1,19 +1,19 @@
 {
-  "short_name": "Nanda Host",
-  "name": "Nanda Host",
+  "short_name": "NANDA Host",
+  "name": "NANDA Host",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "NANDA.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
+      "src": "NANDA.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "NANDA.png",
       "type": "image/png",
       "sizes": "512x512"
     }

client/src/App.tsx

@@ -25,9 +25,25 @@ function App() {
         <ChatProvider>
           <Box
             minH="100vh"
-            bgGradient="linear(to-b, crimson.800, crimson.900)"
+            bgGradient="linear(to-b, #16161e, #1e1e2f)"
+            bgImage="radial-gradient(circle at 10% 20%, rgba(90, 26, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(0, 201, 255, 0.1) 0%, transparent 20%)"
+            bgSize="cover"
+            bgPosition="center"
+            bgRepeat="no-repeat"
             display="flex"
             flexDirection="column"
+            position="relative"
+            overflow="hidden"
+            _before={{
+              content: '""',
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              bg: "linear-gradient(180deg, rgba(22, 22, 30, 0.5) 0%, rgba(26, 27, 38, 0.2) 100%)",
+              zIndex: 0,
+            }}
           >
             <Header onOpenSettings={handleOpenSettings} />
 
@@ -37,6 +53,8 @@ function App() {
               align="center"
               justify="center"
               p={4}
+              position="relative"
+              zIndex={1}
             >
               <ChatInterface />
             </Flex>