MCP Components

The @gensx/mcp package provides Model Control Protocol (MCP) components for GenSX, bringing in a provider and context helper that enables you to easily call tools, resources, and prompts that are provided by the MCP server.

This supports either a server command and arguments, and will manage the lifecycle of that MCP process, or it accepts a pre-connected MCP client as the source for MCP resources.

See the example here.

Installation

To install the package, run the following command:

npm install @gensx/mcp

Supported components and utilities

Reference

createMCPServerContext()

The createMCPServerContext function creates a context provider and hook for accessing MCP server resources. It returns an object containing a Provider component and a useContext hook. If a server command is provided, it will be used to start the MCP server, and close the connection when the component is unmounted. Otherwise, the MCP client will be used to connect to an existing server.

import { createMCPServerContext } from "@gensx/mcp";
 
const { Provider, useContext } = createMCPServerContext({
  serverCommand: "your-server-command",
  serverArgs: ["--arg1", "--arg2"],
  // Or provide a client directly
  client: yourMCPClient,
});
 
// Use the Provider to wrap your application
<Provider>
  <YourApp />
</Provider>;
 
// Use the context hook in your components
const MyComponent = () => {
  const { tools, resources, resourceTemplates, prompts } = useContext();
  // Use the MCP server context...
};

Parameters

The createMCPServerContext function accepts a server definition object with the following properties:

• Either:
  • serverCommand: The command to start the MCP server
  • serverArgs: Array of arguments for the server command
• Or:
  • client: A pre-configured MCP client instance

Return Value

Returns an object containing:

• Provider: A React component that provides the MCP server context
• useContext: A hook that returns the current MCP server context

Types

MCPServerContext

The context object returned by useContext contains:

interface MCPServerContext {
  tools: MCPTool[]; // Available tools in the server
  resources: MCPResource[]; // Available resources
  resourceTemplates: MCPResourceTemplate[]; // Available resource templates
  prompts: MCPPrompt[]; // Available prompts
}

MCPTool

Wrapper used to call a tool resource provided by an MCP server. This makes it easy to call any of the tools provided by an MCP server, with the correct arguments and parameters.

MCPResource

Wrapper used to call a resource provided by an MCP server. This makes it easy to access any of the resources provided by an MCP server.

MCPResourceTemplate

Wrapper used to call a resource template provided by an MCP server. This makes it easy to access any of the resource templates provided by an MCP server, with the correct arguments and parameters.

MCPPrompt

Wrapper used to call a prompt resource provided by an MCP server. This makes it easy to access any of the prompts provided by an MCP server, with the correct arguments and parameters.

Example Usage

import { createMCPServerContext } from "@gensx/mcp";
import { OpenAIProvider } from "@gensx/openai";
 
// Create the MCP server context
const { Provider, useContext: useMCPContext } = createMCPServerContext({
  serverCommand: "npx",
  serverArgs: ["-y", "@<mcp-server>/<package>"],
});
 
// Wrap your application with the Provider
const App = () => (
  <OpenAIProvider apiKey={process.env.OPENAI_API_KEY}>
    <Provider>
      <MCPComponent />
    </Provider>
  </OpenAIProvider>
);
 
// Use the context in your components
const MCPComponent = () => {
  const { tools, resources } = useMCPContext();
 
  return (
    <ChatCompletion
      model="gpt-4o"
      messages={[{ role: "user", content: "Call these tools if necessary." }]}
      tools={tools.map((tool) => tool.asGSXTool())}
    />
  );
};