Hot‑Reloading and Development Server Configuration in Codebase‑Memory‑MCP

The codebase‑memory‑mcp UI includes a Vite‑powered development server with hot‑module‑replacement (HMR) enabled by default, listening on port 5173 and proxying API requests to the MCP back‑end on port 9749.

The DeusData/codebase‑memory‑mcp repository provides a React‑based visualization UI built with Vite. Understanding the hot‑reloading and development server configurations allows developers to run the front‑end locally with instant feedback while maintaining seamless communication with the MCP back‑end.

Vite Configuration for Hot‑Module Replacement

In graph-ui/vite.config.ts, the development server is explicitly configured to enable rapid iteration. The server block defines port 5173 as the entry point for the UI and sets up a proxy to forward API calls to the locally running MCP server.

// graph-ui/vite.config.ts
server: {
  port: 5173,
  proxy: {
    "/rpc": "http://127.0.0.1:9749",
    "/api": "http://127.0.0.1:9749",
  },
},

This configuration ensures that any changes to files under graph-ui/src trigger an incremental rebuild. Vite injects the updated modules directly into the browser without a full page refresh, preserving application state during development.

Starting the Development Server

To launch the UI with hot‑reloading enabled, navigate to the graph-ui directory and execute the development script defined in package.json.

cd graph-ui
npm install
npm run dev

By default, this command starts the Vite dev server on http://localhost:5173. The development script automatically enables HMR, so editing components such as src/components/NodeLabels.tsx will instantly reflect in the browser without requiring a manual reload.

Running the Back‑End Alongside the UI

For full functionality, you must run the MCP server simultaneously to handle API requests. The Vite dev server proxies specific routes to this back‑end.

# In a separate terminal

codebase-memory-mcp --ui=true --port=9749

The proxy configuration in vite.config.ts intercepts requests to /rpc and /api, forwarding them to http://127.0.0.1:9749. This setup eliminates CORS issues during local development and allows the React application to communicate with the knowledge graph API as if both were served from the same origin.

Summary

• The UI uses Vite with HMR pre‑configured in graph-ui/vite.config.ts.
• The development server runs on port 5173 by default.
• API requests to /rpc and /api are proxied to the MCP back‑end on port 9749.
• Start the UI with npm run dev inside the graph-ui folder.
• Run the back‑end separately with codebase-memory-mcp --ui=true --port=9749 to enable full stack development.

Frequently Asked Questions

What port does the development server use?

The Vite development server listens on port 5173 by default, as defined in graph-ui/vite.config.ts. You can override this by passing the --port flag to the Vite CLI or modifying the server.port value in the configuration file.

Is hot‑reloading available by default?

Yes. Hot‑module‑replacement (HMR) is enabled automatically when you run npm run dev. Vite monitors files in graph-ui/src and pushes updates to the browser instantly without requiring a manual refresh.

Why does the configuration proxy requests to port 9749?

The proxy routes API calls to the MCP back‑end running on port 9749 to avoid CORS restrictions during development. This allows the React UI to make requests to /api and /rpc as relative paths while the Vite server forwards them to the actual MCP server.

Can I change the back‑end port that the UI connects to?

Yes. Edit the proxy object in graph-ui/vite.config.ts and update the target URL from http://127.0.0.1:9749 to your desired port. Ensure you also launch the MCP server using the matching --port flag so the proxy target remains valid.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}