Client Remote MCP React
This project is a React-based MCP client that talks to the Remote Box MCP server.
Installation
npx mcp-client-remote-mcp-reactAsk AI about Client Remote MCP React
Powered by Claude Β· Grounded in docs
I know everything about Client Remote MCP React. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
Box MCP Client React
A React-based client application for interacting with Box through the Model Context Protocol (MCP). This application provides a chat interface to communicate with Box MCP servers and access Box content and tools.
Features
- Box OAuth Authentication: Secure login with Box using OAuth 2.0
- MCP Integration: Connect to Box MCP servers to access Box tools and resources
- Chat Interface: Interactive chat UI to communicate with MCP servers
- Tool Execution: Execute Box MCP tools directly from the chat interface
- Development Mode: Mock responses when no MCP server is configured
- Modern UI: Responsive design with styled-components and TypeScript
- Error Handling: Comprehensive error boundaries and user-friendly messages
Architecture
React App β MCP Client β Box MCP Server
The application follows a layered architecture:
- Presentation Layer: React components with styled-components
- Service Layer: Authentication and MCP client services
- Integration Layer: Box API and MCP protocol handlers
Tech Stack
- Frontend: React 19 with TypeScript
- Build Tool: Vite
- Styling: Styled Components with theme provider
- MCP SDK:
@modelcontextprotocol/sdk(official TypeScript SDK) - Authentication: OAuth 2.0 with Box
- Development: Hot reload and fast refresh
Quick Start
Prerequisites
- Node.js 18 or higher
- npm or yarn package manager
- A Box Developer Account
- A deployed Box MCP Server (optional for development)
Installation
-
Clone and install dependencies:
git clone <repository-url> cd box-mcp-client-react npm install -
Set up environment variables:
cp .env.example .envEdit
.envwith your configuration:# Required: Box OAuth credentials VITE_BOX_CLIENT_ID=your_box_client_id_here VITE_BOX_CLIENT_SECRET=your_box_client_secret_here VITE_BOX_REDIRECT_URI=http://localhost:3000/auth/callback # Optional: Box MCP Server URL VITE_BOX_MCP_SERVER_URL=https://your-box-mcp-server.example.com # OpenAI API Configuration VITE_OPENAI_API_KEY=your_openai_key # Optional: Debug mode VITE_DEBUG=false -
Run the development server:
npm run dev -
Open your browser: Navigate to
http://localhost:3000
Box Developer Setup
-
Create a Box App:
- Go to Box Developer Console
- Create a new Custom App with OAuth 2.0 (User Authentication)
- Note your Client ID and Client Secret
-
Configure OAuth:
- Set Redirect URI to:
http://localhost:3000/auth/callback - Enable required scopes (typically "Read all files and folders")
- Set Redirect URI to:
-
Update Environment:
- Add your Client ID and Secret to
.env
- Add your Client ID and Secret to
MCP Server Integration
This client works with Box MCP servers that implement the Model Context Protocol.
With a Real MCP Server
- Deploy a Box MCP server (see MCP Servers)
- Set
VITE_BOX_MCP_SERVER_URLin your.envfile - The app will connect and show available tools
Development Mode
If no MCP server URL is configured, the app runs in development mode with mock responses. This allows you to:
- Test the authentication flow
- Explore the chat interface
- Develop UI components
Usage
-
Authentication:
- Click "Login with Box" to authenticate
- Complete OAuth flow in popup/redirect
-
Chat Interface:
- Once authenticated, use the chat interface
- Send messages to interact with the MCP server
- View available tools and resources
-
Tool Commands:
- Use
!tool <toolname> [parameters]to execute MCP tools - Example:
!tool list_files path=/
- Use
Project Structure
src/
βββ components/
β βββ Auth/ # Authentication components
β β βββ LoginButton.tsx
β β βββ AuthCallback.tsx
β βββ Chat/ # Chat interface components
β β βββ ChatContainer.tsx
β β βββ ChatHeader.tsx
β β βββ MessageList.tsx
β β βββ MessageBubble.tsx
β β βββ MessageInput.tsx
β β βββ TypingIndicator.tsx
β βββ Common/ # Shared components
β βββ ThemeProvider.tsx
β βββ GlobalStyles.tsx
β βββ ErrorBoundary.tsx
βββ services/
β βββ authService.ts # Box OAuth handling
β βββ mcpClient.ts # MCP client implementation
βββ hooks/
β βββ useAuth.ts # Authentication hook
βββ types/
β βββ auth.ts # Authentication types
β βββ chat.ts # Chat message types
β βββ mcp.ts # MCP protocol types
βββ styles/
β βββ theme.ts # Theme configuration
βββ utils/
β βββ crypto.ts # Token encryption utilities
βββ App.tsx # Main application component
βββ index.tsx # Application entry point
Available Scripts
npm run dev- Start development server on port 3000npm run build- Build for productionnpm run preview- Preview production buildnpm test- Run tests (not configured yet)
Security Features
- Token Encryption: Access tokens are encrypted before storage
- HTTPS Only: All communication uses HTTPS
- PKCE Flow: OAuth 2.1 with Proof Key for Code Exchange
- Secure Headers: Proper authorization headers for all MCP requests
- Error Boundaries: Prevents application crashes from propagating
MCP Protocol Implementation
The application implements the Model Context Protocol specification:
- Authentication: Bearer token authentication on every request
- Session Management: Proper session creation and cleanup
- Transport: Streamable HTTP with session ID headers
- Error Handling: Comprehensive MCP error response handling
- Tool Calling: Support for Box-specific MCP tools
- Resource Access: Access to Box resources through MCP
Troubleshooting
Common Issues
-
Authentication Fails
- Verify Box Client ID is correct
- Check redirect URI matches Box app configuration
- Ensure HTTPS in production
-
MCP Connection Issues
- Verify MCP server URL is accessible
- Check network connectivity
- Review browser console for detailed errors
-
Build Issues
- Ensure Node.js version compatibility
- Clear npm cache:
npm cache clean --force - Delete node_modules and reinstall
Debug Mode
Enable debug logging by setting:
REACT_APP_DEBUG=true
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
License
This project is licensed under the ISC License.
Support
For issues related to:
- Box API: See Box Developer Documentation
- MCP Protocol: See Model Context Protocol Documentation
- This Application: Open an issue in this repository
