Configuration Components

ToolSDK provides pre-built React components to let users configure MCP servers and tools directly in your application.

1. Installation

The React components are part of the toolsdk package, but require React 19+.

npm install toolsdk react react-dom

2. PackageInstanceVORenderer

The PackageInstanceVORenderer (also exported as MCPServerForm) is the main component for rendering a complete tool configuration form. It handles:

1. MCP Server Selection: Search and select from available packages.
2. Authentication: OAuth (Google, GitHub, etc.) and API Key configuration.
3. Tool Selection: Browse and select tools within the package.
4. Input Form: Dynamic form generation based on tool schemas.

2.1 Usage

import { PackageInstanceVORenderer } from 'toolsdk/react';

function ToolConfigForm() {
  return (
    <PackageInstanceVORenderer
      accountToken="your-account-token"
      consumerKey="unique-consumer-key-for-user"
      onChange={(instance) => {
        console.log('Instance Created:', instance);
        // instance.id -> Use this to run tools later
        // instance.toolKey -> Selected tool
        // instance.inputData -> Form data
      }}
    />
  );
}

2.2 Props

2.3 API Integration

Once a user configures a tool using this component, you receive a PackageInstanceVO. You can use its id to execute the tool server-side without needing to handle the credentials or input manually again.

// Server-side
await client.packageInstance(instanceId).run();