Fastmcp React Oauth Client
This React application validates the connection from a React App to a FastMCP Cloud Server with OAuth authentication.
Ask AI about Fastmcp React Oauth Client
Powered by Claude Β· Grounded in docs
I know everything about Fastmcp React Oauth Client. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
FastMCP React Client
A modern React application that demonstrates integration with FastMCP servers using OAuth authentication. This project provides a clean, TypeScript-based interface for calling MCP tools and displaying results.
Features
- FastMCP Integration: Full support for MCP (Model Context Protocol) tool calling with OAuth authentication
- Search Interface: Ready-to-use search component with multiple search types (hybrid, semantic, keyword)
- Modern UI: Responsive interface with loading states and comprehensive error handling
- TypeScript: Fully typed for better development experience and code safety
- Multiple Results Display: Shows all search results with metadata
Getting Started
Prerequisites
- Node.js (v14 or higher)
- npm or yarn
- Access to a FastMCP server
- OAuth access token from your FastMCP provider
Installation
- Clone the repository:
git clone <repository-url>
cd fastmcp_react_oauth_client
- Install dependencies:
npm install
-
Configure environment variables:
Create a
.envfile in the project root:REACT_APP_MCP_SERVER_URL=https://your-mcp-server.com/mcpReplace
https://your-mcp-server.com/mcpwith your actual FastMCP server URL. -
Start the development server:
npm start
-
Open http://localhost:3000 in your browser.
-
Enter your OAuth access token when prompted.
Usage
Search Interface
- Enter Query: Type your search query in the search input field
- Select Search Type: Choose between:
- Hybrid: Combines multiple search strategies
- Semantic: Semantic similarity search
- Keyword: Traditional keyword matching
- Execute Search: Click "Search" or press Enter
- View Results: All matching results are displayed with content and scores
- Clear Auth: Use "Clear Auth" to reset your stored authentication token
Project Structure
src/
βββ components/
β βββ SearchComponent.tsx # Main search interface component
β βββ SearchComponent.css # Component styles
βββ services/
β βββ FastMCPClient.ts # FastMCP client and API integration
βββ App.tsx # Root app component
βββ App.css # App-level styles
βββ index.tsx # Application entry point
βββ index.css # Global styles
Configuration
Environment Variables
The application requires one environment variable:
REACT_APP_MCP_SERVER_URL: The URL of your FastMCP server (e.g.,https://your-server.com/mcp)
OAuth Authentication
The application uses OAuth token-based authentication:
- Tokens are securely stored in browser localStorage
- Tokens expire after 1 hour by default
- Users are prompted to re-authenticate when tokens expire
- The "Clear Auth" button allows manual token removal
Features
FastMCPClient API
The FastMCPClient class provides:
search(query, type): Execute search queries with specified search typetestConnection(): Verify connection to the MCP servercallTool(name, parameters): Call any MCP tool with parametersclearAuth(): Clear stored authentication tokensinitializeAuth(): Initialize OAuth authentication flow
Search Types
- Hybrid: Combines multiple search approaches for balanced results
- Semantic: Uses semantic similarity for finding related content
- Keyword: Traditional text matching
Development
Available Scripts
npm start- Runs the app in development modenpm run build- Creates an optimized production buildnpm test- Launches the test runnernpm eject- Ejects from Create React App (irreversible)
Tech Stack
- React 18: Modern React with hooks
- TypeScript: Type safety and enhanced developer experience
- Axios: HTTP client for API requests
- CSS3: Modern styling with animations
Production Deployment
- Build the application:
npm run build
-
Deploy the
buildfolder to your hosting service:- Netlify
- Vercel
- AWS S3 + CloudFront
- Any static hosting provider
-
Set environment variables in your hosting platform's configuration.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Support
For issues and questions, please open an issue on GitHub.
