Implementation:Infiniflow Ragflow UseMcpRequest Hooks

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, React_Hooks, MCP
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete React Query hooks providing comprehensive MCP (Model Context Protocol) server management with 11 hooks for CRUD, tool listing, and server configuration in the RAGFlow frontend.

Description

The use-mcp-request.ts module provides hooks for: listing MCP servers, creating/updating/deleting servers, fetching server details, listing available tools from a server, testing server connectivity, and managing server variables. These hooks power the MCP server management UI in the admin and agent configuration sections.

Usage

Import these hooks in MCP server management pages and agent workflow configuration where MCP tool servers need to be registered and managed.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/hooks/use-mcp-request.ts
• Lines: 1-270

Signature

export function useFetchMcpServerList(): UseQueryResult;
export function useCreateMcpServer(): UseMutationResult;
export function useUpdateMcpServer(): UseMutationResult;
export function useDeleteMcpServer(): UseMutationResult;
export function useFetchMcpServerTools(serverId: string): UseQueryResult;
export function useTestMcpServer(): UseMutationResult;
// ... additional hooks

Import

import { useFetchMcpServerList, useCreateMcpServer } from '@/hooks/use-mcp-request';

I/O Contract

Inputs

Name	Type	Required	Description
serverId	string	Varies	MCP server ID for detail/tools queries

Outputs

Name	Type	Description
useFetchMcpServerList()	UseQueryResult	List of registered MCP servers
useFetchMcpServerTools()	UseQueryResult	Available tools from a server

Usage Examples

import { useFetchMcpServerList, useDeleteMcpServer } from '@/hooks/use-mcp-request';

function McpServerList() {
  const { data: servers } = useFetchMcpServerList();
  const { mutate: deleteServer } = useDeleteMcpServer();
  return servers?.map(s => (
    <ServerCard key={s.id} server={s} onDelete={() => deleteServer(s.id)} />
  ));
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment