Integrate React frontend with MCP Bridge API

[SPerekrestova]

Complete migration from direct GitHub API to MCP Bridge architecture.

BREAKING CHANGES:

• Requires MCP Bridge to be running
• Removed VITE_GITHUB_TOKEN (now on backend only)
• Removed githubService.ts (replaced with mcpService.ts)

Changes:

• Replace all GitHub API calls with MCP Bridge REST API
• Create mcpService.ts for MCP Bridge communication
• Update all hooks (useRepos, useContent) to use mcpService
• Simplify configuration (only MCP Bridge URL needed)
• Add MCP status indicator component
• Add cache management functionality
• Update environment variables
• Remove GitHub token from frontend (security improvement)
• Add Docker Compose orchestration
• Update documentation with new architecture
• Add integration test script

New Architecture:
React → MCP Bridge (FastAPI) → MCP Server (FastMCP) → GitHub API

Security: GitHub token now secure on backend only
Performance: 5-minute caching on bridge layer
Features: All existing functionality maintained

Files Changed:

• .env (new MCP configuration)
• .env.example (updated template)
• .env.production (production config)
• src/config/github.ts (simplified config)
• src/utils/mcpService.ts (new MCP service)
• src/utils/index.ts (service exports)
• src/hooks/useRepos.tsx (use mcpService)
• src/hooks/useContent.tsx (use mcpService)
• src/components/ContentList.tsx (import from mcpService)
• src/components/MCPStatusIndicator.tsx (new component)
• src/components/ClearCacheButton.tsx (new component)
• Dockerfile (production deployment)
• docker-compose.yml (orchestration)
• README.md (architecture docs)
• package.json (new scripts)
• scripts/test-mcp-integration.sh (test script)

Removed:

• src/utils/githubService.ts (replaced by mcpService.ts)

Testing: TypeScript compilation passed

[Copilot]

Pull Request Overview

This PR completes the migration from direct GitHub API integration to a 3-tier MCP (Model Context Protocol) architecture, significantly improving security by moving the GitHub token to the backend. The frontend now communicates exclusively with an MCP Bridge REST API instead of directly with GitHub.

Key Changes

• Architecture transformation: Replaced direct GitHub API calls with MCP Bridge REST API communication
• Security enhancement: Removed GitHub token from frontend environment variables (now backend-only)
• New service layer: Created mcpService.ts to replace githubService.ts with cleaner REST API calls
• Simplified configuration: Reduced frontend config to just MCP Bridge URL and organization name

Reviewed Changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 18 comments.

Show a summary per file

File	Description
src/utils/mcpService.ts	New service client for MCP Bridge REST API communication, replacing direct GitHub integration
src/utils/index.ts	Export mappings with backward compatibility alias for githubService
src/utils/githubService.ts	Removed - replaced entirely by mcpService
src/hooks/useRepos.tsx	Updated to use mcpService.getRepositories() instead of githubService
src/hooks/useContent.tsx	Updated to use mcpService methods for content fetching
src/config/github.ts	Simplified to MCP Bridge configuration with validation
src/components/MCPStatusIndicator.tsx	New component for displaying MCP Bridge connection status
src/components/ClearCacheButton.tsx	New component for clearing both bridge and client-side caches
src/components/ContentList.tsx	Updated import to use mcpService types
docker-compose.yml	Orchestration for frontend, MCP Bridge, and optional MCP Server
Dockerfile	Multi-stage build for production frontend deployment
.env.example	Updated template with new MCP configuration variables
.env.production	Production configuration (contains hardcoded org name)
package.json	Added Docker Compose convenience scripts
scripts/test-mcp-integration.sh	Integration test script for verifying all services
README.md	Comprehensive update documenting new architecture, setup, and troubleshooting

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The checkDocsFolderExists method inefficiently fetches all repositories just to check one repo's hasDocFolder flag. This performs unnecessary work and doesn't leverage the caching on the MCP Bridge side.

Consider passing the repo name directly to check the folder on the bridge side, or cache the repositories result in the class instance if this method is called multiple times in quick succession.

Suggested change

	async checkDocsFolderExists(repoId: string): Promise<boolean> {
	const repos = await this.getRepositories();
	const repo = repos.find(r => r.id === repoId);
	return repo?.hasDocFolder ?? false;
	/**
	* Check if repository has /doc folder by querying MCP Bridge for this repo only
	*/
	async checkDocsFolderExists(repoId: string): Promise<boolean> {
	// Directly query MCP Bridge for this repository's doc folder status
	// Assumes MCP Bridge exposes /api/repos/:repoId/hasDocFolder endpoint
	const result = await this.fetchWithErrorHandling<{ hasDocFolder: boolean }>(
	`${this.baseUrl}/api/repos/${repoId}/hasDocFolder`
	);
	return result.hasDocFolder;

[Copilot]

Missing JSDoc documentation for the MCPService class. As this is a central service that replaces the old GitHub service, it should have comprehensive documentation explaining:

• The purpose of the class
• How it differs from the old implementation
• Any caching behavior
• Expected error handling

Example:

/**
 * MCP Service - REST API client for MCP Bridge
 * 
 * This service replaces the direct GitHub API integration with communication
 * through the MCP Bridge. The bridge handles:
 * - GitHub authentication (token is server-side only)
 * - Response caching (5-minute TTL)
 * - Content filtering and transformation
 * 
 * All methods throw APIError or NetworkError on failure.
 * 
 * @example
 * ```typescript
 * const repos = await mcpService.getRepositories();
 * const content = await mcpService.getRepoContent(repos[0].id);
 * ```
 */
class MCPService {

[Copilot]

The comment "Bridge handles filtering" on line 121 is misleading. Looking at the deleted githubService code, the old implementation had explicit file type filtering logic (checking extensions, parsing JSON/YAML, etc.). It's unclear whether the MCP Bridge actually handles this filtering or if it's just passed through from the MCP Server.

Update the comment to clarify what filtering the bridge performs, or add a note that skipped file tracking has been removed in this architecture.