### Running Open Agent Platform Locally (Bash)

Source: https://docs.oap.langchain.com/quickstart

Provides commands to navigate to the web application directory, install project dependencies using Yarn, and start the development server. This initiates the Open Agent Platform, making it accessible locally at http://localhost:3000.

```bash
# Navigate to the web app directory
cd apps/web

# Install dependencies
yarn install

# Start the development server
yarn dev
```

--------------------------------

### Configuring Supabase Environment Variables (Bash)

Source: https://docs.oap.langchain.com/quickstart

Sets the public Supabase URL and anonymous key as environment variables for the web application, enabling connection to the Supabase project for authentication.

```bash
NEXT_PUBLIC_SUPABASE_URL="<your supabase url>"
NEXT_PUBLIC_SUPABASE_ANON_KEY="<your supabase anon key>"
```

--------------------------------

### Configuring MCP Server URL (Bash)

Source: https://docs.oap.langchain.com/quickstart

Sets the NEXT_PUBLIC_MCP_SERVER_URL environment variable to define the base URL for the MCP server. This allows the Open Agent Platform to connect to the Multi-Agent Communication Protocol server.

```bash
NEXT_PUBLIC_MCP_SERVER_URL="<your MCP server URL>"
```

--------------------------------

### Setting Agent Deployments Environment Variable (Bash)

Source: https://docs.oap.langchain.com/quickstart

Configures the NEXT_PUBLIC_DEPLOYMENTS environment variable with a JSON array of agent configurations. This allows the Open Agent Platform web application to connect to and manage deployed agents, including local development instances.

```bash
NEXT_PUBLIC_DEPLOYMENTS=[{"id":"bf63dc89-1de7-4a65-8336-af9ecda479d6","deploymentUrl":"http://localhost:2024","tenantId":"42d732b3-1324-4226-9fe9-513044dceb58","name":"Local deployment","isDefault":true,"defaultGraphId":"agent"}]
```

--------------------------------

### Configuring RAG Server URL (Bash)

Source: https://docs.oap.langchain.com/quickstart

Sets the NEXT_PUBLIC_RAG_API_URL environment variable to specify the endpoint for the LangConnect RAG server. This enables the Open Agent Platform to interact with the RAG server for retrieval-augmented generation.

```bash
NEXT_PUBLIC_RAG_API_URL="http://localhost:8080"
```

--------------------------------

### Enabling MCP Server Authentication (Bash)

Source: https://docs.oap.langchain.com/quickstart

Sets the NEXT_PUBLIC_MCP_AUTH_REQUIRED environment variable to true to indicate that the MCP server requires authentication. This configures the Open Agent Platform to handle authenticated requests to the MCP server.

```bash
NEXT_PUBLIC_MCP_AUTH_REQUIRED=true
```

--------------------------------

### Defining Agent Configuration Object (JSON)

Source: https://docs.oap.langchain.com/quickstart

Defines the structure for a single agent's configuration, including its project ID, tenant ID, deployment URL, name, default status, and optional default graph ID. This object is used to configure agents deployed to LangGraph Platform or run locally.

```json
{
  "id": "The project ID of the deployment",
  "tenantId": "The tenant ID of your LangSmith account",
  "deploymentUrl": "The API URL to your deployment",
  "name": "A custom name for your deployment",
  "isDefault": "Whether this deployment is the default deployment (only one can be default)",
  "defaultGraphId": "The graph ID of the default graph (optional, only required if isDefault is true)"
}
```

--------------------------------

### Setting NEXT_PUBLIC_DEPLOYMENTS Environment Variable (Bash)

Source: https://docs.oap.langchain.com/setup/agents

This example demonstrates how to set the `NEXT_PUBLIC_DEPLOYMENTS` environment variable in a Bash shell. It shows a stringified JSON array containing a single configuration object for a local agent deployment, including its ID, URL, tenant ID, name, and default status. This variable connects deployed agents to the Open Agent Platform instance.

```bash
NEXT_PUBLIC_DEPLOYMENTS=[{"id":"bf63dc89-1de7-4a65-8336-af9ecda479d6","deploymentUrl":"http://localhost:2024","tenantId":"42d732b3-1324-4226-9fe9-513044dceb58","name":"Local deployment","isDefault":true,"defaultGraphId":"agent"}]
```

--------------------------------

### Configuring Supabase Environment Variables (Web App)

Source: https://docs.oap.langchain.com/setup/authentication

This snippet demonstrates how to set the essential Supabase environment variables, NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY, within the 'apps/web/' directory. These variables are crucial for the web application to connect and authenticate with your Supabase project.

```bash
NEXT_PUBLIC_SUPABASE_URL="<your supabase url>"
NEXT_PUBLIC_SUPABASE_ANON_KEY="<your supabase anon key>"
```

--------------------------------

### Python Example: Graph Configuration with UI Metadata

Source: https://docs.oap.langchain.com/custom-agents/configuration

This Python example demonstrates how to define a configurable object using Pydantic, embedding `x_oap_ui_config` metadata within a `Field` definition. It specifically shows how to configure a `model_name` field to be rendered as a `select` dropdown in the UI, including its default value.

```python
from pydantic import BaseModel, Field
from typing import Optional

class GraphConfigPydantic(BaseModel):
    model_name: Optional[str] = Field(
        default="anthropic:claude-3-7-sonnet-latest",
        metadata={
            "x_oap_ui_config": {
                "type": "select",
                "default": "anthropic:claude-3-7-sonnet-latest",

```

--------------------------------

### Setting Base API URL for Web Client (Local Development)

Source: https://docs.oap.langchain.com/setup/authentication

This configuration sets the NEXT_PUBLIC_BASE_API_URL environment variable for the web client, specifically for local development. This URL acts as a proxy route, allowing the server to securely inject the LangSmith API key into requests before forwarding them to the LangGraph server, preventing client-side exposure of the secret key.

```bash
NEXT_PUBLIC_BASE_API_URL="http://localhost:3000/api"
```

--------------------------------

### Defining MCP Tools Configuration in TypeScript

Source: https://docs.oap.langchain.com/custom-agents/configuration

This TypeScript example uses Zod schemas to define the structure for MCP tool configuration. `MCPConfig` specifies the server URL and tool list, while `GraphConfiguration` embeds `mcpConfig` with `x_oap_ui_config` metadata set to `type: "mcp"`. This setup allows the Open Agent Platform to recognize and provide a UI for configuring MCP tools.

```TypeScript
export const MCPConfig = z.object({
  /**
   * The MCP server URL.
   */
  url: z.string(),
  /**
   * The list of tools to provide to the LLM.
   */
  tools: z.array(z.string())
});

export const GraphConfiguration = z.object({
  /**
   * MCP configuration for tool selection. The key (in this case it's `mcpConfig`)
   * can be any value you want.
   */
  mcpConfig: z
    .lazy(() => MCPConfig)
    .optional()
    .langgraph.metadata({
      x_oap_ui_config: {
        // Ensure the type is `mcp`
        type: "mcp"
        // Add custom tools to default to here:
        // default: {
        //   tools: ["Math_Divide", "Math_Mod"]
        // }
      }
    })
});
```

--------------------------------

### Configuring LangConnect RAG API URL - Bash

Source: https://docs.oap.langchain.com/setup/rag-server

This snippet shows how to set the `NEXT_PUBLIC_RAG_API_URL` environment variable for local development. This variable points the Open Agent Platform web application to the running LangConnect RAG server, enabling communication between the two components. It is crucial for the web app to correctly locate the RAG service.

```bash
NEXT_PUBLIC_RAG_API_URL="http://localhost:8080"
```

--------------------------------

### TypeScript Example: Graph Configuration with UI Metadata

Source: https://docs.oap.langchain.com/custom-agents/configuration

This example demonstrates how to define a configurable object schema in TypeScript using Zod, integrating `x_oap_ui_config` metadata. It shows how to customize UI elements for fields like `modelName` (select dropdown), `temperature` (slider), `maxTokens` (number input), and `systemPrompt` (textarea), providing default values, descriptions, and component-specific properties.

```typescript
import "@langchain/langgraph/zod";
import { z } from "zod";

export const GraphConfiguration = z.object({
  /**
   * The model ID to use for the reflection generation.
   * Should be in the format `provider/model_name`.
   * Defaults to `anthropic/claude-3-7-sonnet-latest`.
   */
  modelName: z
    .string()
    .optional()
    .langgraph.metadata({
      x_oap_ui_config: {
        type: "select",
        default: "anthropic/claude-3-7-sonnet-latest",
        description: "The model to use in all generations",
        options: [
          {
            label: "Claude 3.7 Sonnet",
            value: "anthropic/claude-3-7-sonnet-latest",
          },
          {
            label: "Claude 3.5 Sonnet",
            value: "anthropic/claude-3-5-sonnet-latest",
          },
          {
            label: "GPT 4o",
            value: "openai/gpt-4o",
          },
          {
            label: "GPT 4.1",
            value: "openai/gpt-4.1",
          },
          {
            label: "o3",
            value: "openai/o3",
          },
          {
            label: "o3 mini",
            value: "openai/o3-mini",
          },
          {
            label: "o4",
            value: "openai/o4",
          },
        ],
      },
    }),
  /**
   * The temperature to use for the reflection generation.
   * Defaults to `0.7`.
   */
  temperature: z
    .number()
    .optional()
    .langgraph.metadata({
      x_oap_ui_config: {
        type: "slider",
        default: 0.7,
        min: 0,
        max: 2,
        step: 0.1,
        description: "Controls randomness (0 = deterministic, 2 = creative)",
      },
    }),
  /**
   * The maximum number of tokens to generate.
   * Defaults to `1000`.
   */
  maxTokens: z
    .number()
    .optional()
    .langgraph.metadata({
      x_oap_ui_config: {
        type: "number",
        default: 4000,
        min: 1,
        description: "The maximum number of tokens to generate",
      },
    }),
  systemPrompt: z
    .string()
    .optional()
    .langgraph.metadata({
      x_oap_ui_config: {
        type: "textarea",
        placeholder: "Enter a system prompt...",
        description: "The system prompt to use in all generations",
      },
    }),
});

// ENSURE YOU PASS THE GRAPH CONFIGURABLE SCHEMA TO THE StateGraph:
const workflow = new StateGraph(MyStateSchema, GraphConfiguration)
```

--------------------------------

### Agent Configuration Object Structure (JSON)

Source: https://docs.oap.langchain.com/setup/agents

This JSON object defines the structure for configuring an agent deployment within the Open Agent Platform. It includes fields for project and tenant IDs, deployment URL, a custom name, default status, and an optional default graph ID for RAG & MCP tools. For local LangGraph servers, 'id' and 'tenantId' can be any UUID v4.

```json
{
  "id": "The project ID of the deployment. For locally running LangGraph servers, this can be any UUID Version 4.",
  "tenantId": "The tenant ID of your LangSmith account. For locally running LangGraph servers, this can be any UUID Version 4.",
  "deploymentUrl": "The API URL to your deployment.",
  "name": "A custom name for your deployment",
  "isDefault": "Whether this deployment is the default deployment. Should only be set to true for one deployment.",
  "defaultGraphId": "The graph ID of the default graph for the entire OAP instance. We recommend this is set to the graph ID of a graph which supports RAG & MCP tools. This must be set in the same deployment which isDefault is set to true on. Optional, but required in at least one deployment."
}
```

--------------------------------

### Running Agent MCP URL Update Script (Bash)

Source: https://docs.oap.langchain.com/setup/mcp-server

This snippet provides the Bash commands to navigate into the `apps/web` directory and execute the `update-agents-mcp-url.ts` script using `npx tsx`. This script is used to update the MCP server URL for all agents across specified deployments, ensuring they point to the latest configured MCP server.

```bash
# Ensure you're inside the `apps/web` directory
cd apps/web

# Run the script via TSX.
npx tsx scripts/update-agents-mcp-url.ts
```

--------------------------------

### Defining MCP Tools Configuration in Python

Source: https://docs.oap.langchain.com/custom-agents/configuration

This Python snippet uses Pydantic `BaseModel` classes to define the schema for MCP tool configuration. `MCPConfig` specifies the server URL and tool list, and `GraphConfigPydantic` includes `mcp_config` with `x_oap_ui_config` metadata set to `type: "mcp"`. This enables the Open Agent Platform to automatically generate a UI for configuring MCP tools.

```Python
class MCPConfig(BaseModel):
    url: Optional[str] = Field(
        default=None,
        optional=True
    )
    """The URL of the MCP server"""
    tools: Optional[List[str]] = Field(
        default=None,
        optional=True
    )
    """The tools to make available to the LLM"""


class GraphConfigPydantic(BaseModel):
    # The key (in this case it's `mcp_config`)
    # can be any value you want.
    mcp_config: Optional[MCPConfig] = Field(
        default=None,
        metadata={
            "x_oap_ui_config": {
                # Ensure the type is `mcp`
                "type": "mcp"
                # Here is where you would set the default tools.
                # "default": {
                #     "tools": ["Math_Divide", "Math_Mod"]
                # }
            }
        }
    )
```

--------------------------------

### Configuring MCP Server URL Environment Variable (Bash)

Source: https://docs.oap.langchain.com/setup/mcp-server

This snippet demonstrates how to set the `NEXT_PUBLIC_MCP_SERVER_URL` environment variable in a Bash shell. It's crucial that the URL does not end with `/mcp`, as the OAP web app appends this path automatically. This variable specifies the base URL for the MCP server connection.

```bash
NEXT_PUBLIC_MCP_SERVER_URL="https://api.arcade.dev/v1/mcps/ms_0ujssxh0cECutqzMgbtXSGnjorm" # no /mcp
```

--------------------------------

### Defining UI Configuration Types in TypeScript

Source: https://docs.oap.langchain.com/custom-agents/configuration

This snippet defines the core TypeScript types and interfaces (`ConfigurableFieldUIType`, `ConfigurableFieldOption`, `ConfigurableFieldUIMetadata`) used to specify custom UI configurations for fields in the Open Agent Platform. It details properties like `label`, `default`, `type`, `description`, `validator`, and `componentProps` for various UI components.

```typescript
export type ConfigurableFieldUIType =
  | "text"
  | "textarea"
  | "number"
  | "boolean"
  | "slider"
  | "select"
  | "json";

/**
 * The type interface for options in a select field.
 */
export interface ConfigurableFieldOption {
  label: string;
  value: string;
}

/**
 * The UI configuration for a field in the configurable object.
 */
export type ConfigurableFieldUIMetadata = {
  /**
   * The label of the field. This will be what is rendered in the UI.
   */
  label: string;
  /**
   * The default value to render in the UI component.
   *
   * @default undefined
   */
  default?: unknown;
  /**
   * The type of the field.
   * @default "text"
   */
  type?: ConfigurableFieldUIType;
  /**
   * The description of the field. This will be rendered below the UI component.
   */
  description?: string;
  /**
   * The validator function to validate the field value. This is a string that will be parsed as a function.
   * You can also include a custom error message to show to the user if the validation fails.
   */
  validator?: {
    /**
     * The validator function to validate the field value.
     */
    fn: string;
    /**
     * The error message to show to the user if the validation fails. If not provided, a default error message will be shown.
     */
    message?: string;
  };
  /**
   * The component specific props. This is only used for certain field types.
   * "slider" - will contain min, max, step
   * "select" - will contain options (array of {label: string, value: string})
   */
  componentProps?: {
    [key: string]: unknown;
  };
};
```

--------------------------------

### Defining LLM Configuration Schema in Python

Source: https://docs.oap.langchain.com/custom-agents/configuration

This Python snippet defines a Pydantic `BaseModel`, `GraphConfigPydantic`, to schema configurable parameters for an LLM. It uses `Field` with `x_oap_ui_config` metadata to specify UI types (dropdown, slider, number, textarea) and options for parameters like model, temperature, max tokens, and system prompt, enabling dynamic configuration within the Open Agent Platform UI.

```Python
from typing import Optional, List
from pydantic import BaseModel, Field

class GraphConfigPydantic(BaseModel):
    model: Optional[str] = Field(
        default="anthropic:claude-3-5-sonnet-latest",
        metadata={
            "x_oap_ui_config": {
                "type": "dropdown",
                "description": "The model to use in all generations",
                "options": [
                    {
                        "label": "Claude 3.7 Sonnet",
                        "value": "anthropic:claude-3-7-sonnet-latest",
                    },
                    {
                        "label": "Claude 3.5 Sonnet",
                        "value": "anthropic:claude-3-5-sonnet-latest",
                    },
                    {"label": "GPT 4o", "value": "openai:gpt-4o"},
                    {"label": "GPT 4o mini", "value": "openai:gpt-4o-mini"},
                    {"label": "GPT 4.1", "value": "openai:gpt-4.1"}
                ]
            }
        }
    )
    temperature: Optional[float] = Field(
        default=0.7,
        metadata={
            "x_oap_ui_config": {
                "type": "slider",
                "default": 0.7,
                "min": 0,
                "max": 2,
                "step": 0.1,
                "description": "Controls randomness (0 = deterministic, 2 = creative)"
            }
        }
    )
    max_tokens: Optional[int] = Field(
        default=4000,
        metadata={
            "x_oap_ui_config": {
                "type": "number",
                "default": 4000,
                "min": 1,
                "description": "The maximum number of tokens to generate"
            }
        }
    )
    system_prompt: Optional[str] = Field(
        default=None,
        metadata={
            "x_oap_ui_config": {
                "type": "textarea",
                "placeholder": "Enter a system prompt...",
                "description": "The system prompt to use in all generations"
            }
        }
    )
```

--------------------------------

### Configuring RAG in TypeScript

Source: https://docs.oap.langchain.com/custom-agents/configuration

This snippet demonstrates how to define RAG configuration using Zod schemas in TypeScript. It shows the `RAGConfig` schema for `rag_url` and `collections`, and the `GraphConfiguration` schema which includes an optional `rag` field. The `langgraph.metadata` is used to set `x_oap_ui_config` with `type: "rag"`, enabling proper UI rendering and allowing for default collection IDs.

```TypeScript
export const RAGConfig = z.object({
  /**
   * The LangConnect RAG server URL.
   */
  rag_url: z.string(),
  /**
   * The collections to use for RAG. Will be an
   * array of collection IDs
   */
  collections: z.string().array(),
});

export const GraphConfiguration = z.object({
  /**
   * LangConnect RAG configuration. The key (in this case it's `rag`)
   * can be any value you want.
   */
  rag: z
    .lazy(() => RAGConfig)
    .optional()
    .langgraph.metadata({
      x_oap_ui_config: {
        // Ensure the type is `rag`
        type: "rag",
        // Here is where you would set the default collection. Use collection IDs
        // default: {
        //   collections: [
        //     "fd4fac19-886c-4ac8-8a59-fff37d2b847f",
        //     "659abb76-fdeb-428a-ac8f-03b111183e25",
        //   ]
        // }
      }
    })
});
```

--------------------------------

### Configuring RAG in Python

Source: https://docs.oap.langchain.com/custom-agents/configuration

This snippet illustrates how to define RAG configuration using Pydantic `BaseModel` in Python. It defines `RagConfig` for `rag_url` and `collections`, and `GraphConfigPydantic` which includes an optional `rag` field. The `Field` function is used to attach `metadata` with `x_oap_ui_config` and `type: "rag"`, enabling proper UI integration and allowing for default collection IDs.

```Python
class RagConfig(BaseModel):
    rag_url: Optional[str] = None
    """The URL of the rag server"""
    collections: Optional[List[str]] = None
    """The collections to use for rag. Will be a list of collection IDs"""


class GraphConfigPydantic(BaseModel):
    # Once again, the key (in this case it's `rag`)
    # can be any value you want.
    rag: Optional[RagConfig] = Field(
        default=None,
        optional=True,
        metadata={
            "x_oap_ui_config": {
                # Ensure the type is `rag`
                "type": "rag",
                # Here is where you would set the default collection. Use collection IDs
                # "default": {
                #     "collections": [
                #         "fd4fac19-886c-4ac8-8a59-fff37d2b847f",
                #         "659abb76-fdeb-428a-ac8f-03b111183e25",
                #     ]
                # },
            }
        }
    )
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.