mcp-web-knowledge-coach

Ramakrishna-Gedala/mcp-web-knowledge-coach

3.1

If you are the rightful owner of mcp-web-knowledge-coach and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

This repository contains a streaming Model Context Protocol server implemented in Python and a React web client for demos and training on MCP concepts.

Tools
1
Resources
0
Prompts
0

Knowledge Coach MCP Demo

This repository contains a streaming Model Context Protocol server implemented in Python and a React web client that interacts with it over the Streamable HTTP transport. It is designed for demos and for training new learners on MCP concepts.

Project layout

.
├── server/   # Python MCP server (FastMCP + FastAPI)
└── web/      # React + Vite chat client

Prerequisites

  • Python 3.11+
  • uv ≥ 0.9
  • Node.js 20+

Setup

1. MCP server

cd server
uv sync --extra dev          # install dependencies (runtime + pytest)
uv run knowledge-coach-server

By default the server listens on http://127.0.0.1:8000 and exposes the MCP Streamable HTTP endpoint at http://127.0.0.1:8000/mcp/.

Useful scripts:

  • uv run knowledge-coach-dev – run the server with reload in development mode.
  • uv run knowledge-coach-inspector – launch MCP Inspector pointed at the local server.
  • uv run knowledge-coach-inspector-config – generate an inspector.config.json file that preconfigures the connection.

2. React web client

cd web
npm install
npm run dev

The dev server runs on http://localhost:5173. The client reads the MCP endpoint from VITE_MCP_BASE_URL (defaults to http://127.0.0.1:8000/mcp/). To override, create a .env.local file in web/:

VITE_MCP_BASE_URL=http://127.0.0.1:8001/mcp/

Running tests & checks

# From server/
uv run pytest

# From web/
npm run lint
npm run build

Demo flow

  1. Start the MCP server (uv run knowledge-coach-server).
  2. Optionally launch the inspector (uv run knowledge-coach-inspector) to browse resources, prompts, and tools.
  3. Start the React app (npm run dev) and open http://localhost:5173.
  4. Submit a prompt (e.g., “Design a training plan for sales engineers adopting MCP”) and select an experience level. The web client performs the MCP handshake, calls the coach_resources tool, and renders structured recommendations and next steps.

Troubleshooting

  • Ensure the server is running before opening the React client; otherwise the client status will remain idle or enter error.
  • For cross-origin calls the server allows http://localhost:5173 by default. If you access the client through a different origin, adjust KC_ALLOWED_ORIGINS in server/.env.
  • If the inspector cannot connect, confirm the server is running and the URL matches http://127.0.0.1:8000/mcp/.

Additional notes

  • The MCP server ships with an in-memory knowledge base defined in knowledge_base.yaml, plus resources, prompts, and a structured tool (coach_resources) that returns CoachingResponse data consumed by the UI.
  • React components are organised under web/src/components/chat/ and the MCP HTTP client lives in web/src/services/mcpClient.ts.

Happy demoing!