### Run Open Agent Platform

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/quickstart.mdx

Navigate to the web app directory, install dependencies using yarn, and start the development server.

```bash
cd apps/web

yarn install

yarn dev
```

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

### Install Mintlify Globally and Preview Docs

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/README.md

Alternatively, install Mintlify globally first, then run the development server command. This is useful for frequent use.

```bash
npm i -g mintlify
mintlify dev
```

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

### Preview Docs Locally with Mintlify CLI

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/README.md

Run this command to start a local development server for previewing documentation. Ensure you have Node.js and npm installed.

```bash
npx mintlify dev
```

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

### Running the Platform

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Commands for installing dependencies, starting the development server, and building/starting the production version of the Open Agent Platform web application.

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

# Install dependencies
yarn install

# Start the development server
yarn dev

# The platform will be available at http://localhost:3000

# For production build
yarn build
yarn start
```

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

### Deployment Interface and Example Configuration

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Defines the structure for deployment configurations and provides an example array of deployment objects. Use this to manage LangGraph Platform instances.

```typescript
import { Deployment } from "@/types/deployment";

// Deployment interface definition
interface Deployment {
  // The deployment's ID from the /info endpoint
  id: string;
  // The API URL of the deployment
  deploymentUrl: string;
  // The tenant ID from the /info endpoint
  tenantId: string;
  // A custom display name for the deployment
  name: string;
  // Whether this is the default deployment (only one can be true)
  isDefault?: boolean;
  // The default graph ID for this deployment
  defaultGraphId?: string;
  // Whether API keys are required for this deployment
  requiresApiKeys?: boolean;
  // Custom message when API keys are required
  apiKeysRequiredMessage?: string;
}

// Example: Get deployment info from LangGraph Platform
// curl https://your-deployment-url/info
// Response: { "project_id": "...", "tenant_id": "..." }

// Example deployment configuration
const deployments: Deployment[] = [
  {
    id: "bf63dc89-1de7-4a65-8336-af9ecda479d6",
    deploymentUrl: "http://localhost:2024",
    tenantId: "42d732b3-1324-4226-9fe9-513044dceb58",
    name: "Local Development",
    isDefault: true,
    defaultGraphId: "agent"
  },
  {
    id: "production-deployment-id",
    deploymentUrl: "https://api.langchain.com/v1/deployments/xyz",
    tenantId: "your-langsmith-tenant-id",
    name: "Production Agents",
    requiresApiKeys: true,
    apiKeysRequiredMessage: "Please set your OpenAI API key in Settings"
  }
];
```

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

### Python Agent Configuration Example

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Example of defining agent configuration using Pydantic model with custom UI metadata for the model name field.

```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",

```

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

### NEXT_PUBLIC_DEPLOYMENTS Environment Variable Example

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/agents.mdx

This bash example shows how to set the NEXT_PUBLIC_DEPLOYMENTS environment variable with a stringified JSON array for a single local deployment. Ensure each graph has a unique 'id' and all graphs share the same 'tenantId'.

```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"}]
```

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

### TypeScript Agent Configuration Example

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Example of defining agent configuration using Zod schema with custom UI metadata for fields like model name, temperature, max tokens, and system prompt.

```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 Example

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/quickstart.mdx

Define a configuration object for deployed agents, including IDs, URLs, and deployment status. Use generated UUIDs for local development.

```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)"
}
```

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

### MCP Proxy API Example

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Proxies requests to MCP servers, handling authentication token exchange and forwarding requests securely. Supports all HTTP methods.

```typescript
// All HTTP methods (GET, POST, PUT, PATCH, DELETE) are proxied
// Path: /api/oap_mcp/<mcp-path>

// Example: List available tools
const response = await fetch("/api/oap_mcp/tools/list", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({}),
});

// The proxy handles authentication:
// 1. Checks for X-MCP-Access-Token cookie
// 2. Falls back to MCP_TOKENS environment variable
// 3. Exchanges Supabase JWT for MCP access token via OAuth

// Response includes X-MCP-Access-Token cookie for subsequent requests
// Cookie expires after 1 hour
```

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

### Configure Supabase Environment Variables

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/authentication.mdx

Set these environment variables in the `apps/web/` directory to configure Supabase authentication. Ensure you replace placeholders with your actual Supabase URL and anon key.

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

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

### Set Environment Variables for Platform

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/quickstart.mdx

Configure essential environment variables for running the Open Agent Platform locally. Ensure you have a LangSmith API key and an LLM API key.

```bash
NEXT_PUBLIC_BASE_API_URL="http://localhost:3000/api"
LANGSMITH_API_KEY="lsv2_..."
# Or whichever LLM's API key you're using
OPENAI_API_KEY="..."
```

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

### Set RAG API URL for Local Development

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/rag-server.mdx

Configure the NEXT_PUBLIC_RAG_API_URL environment variable for local development to point to your LangConnect server.

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

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

### Agent Configuration Object

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/agents.mdx

This JSON object defines the configuration parameters for deploying agents. Ensure 'id' and 'tenantId' are valid UUIDs when running locally.

```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."
}
```

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

### Configure LangGraph Server for LangSmith Authentication

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/authentication.mdx

Enable LangSmith API key authentication for LangGraph servers by setting this environment variable to `true`. Ensure your `LANGSMITH_API_KEY` is also set in the environment variables within the `apps/web/` directory. Do not prefix the LangSmith API key with `NEXT_PUBLIC_` as it is a secret.

```bash
NEXT_PUBLIC_USE_LANGSMITH_AUTH=true
```

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

### Environment Variables for Open Agent Platform

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Set these environment variables in `apps/web/.env` to configure API URLs, authentication, and integrations for the web application.

```bash
# Base API URL for the platform (used for proxy routes)
NEXT_PUBLIC_BASE_API_URL="http://localhost:3000/api"

# LangSmith API key for admin tasks
LANGSMITH_API_KEY="lsv2_..."

# Authentication mode - set to "true" to use LangSmith auth instead of user-scoped auth
NEXT_PUBLIC_USE_LANGSMITH_AUTH="false"

# Deployments configuration (JSON array of deployment objects)
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"}]'

# RAG server URL (LangConnect)
NEXT_PUBLIC_RAG_API_URL="http://localhost:8080"

# MCP server configuration
NEXT_PUBLIC_MCP_SERVER_URL="https://api.arcade.dev/v1/mcps/arcade-anon"
NEXT_PUBLIC_MCP_AUTH_REQUIRED="true"

# Supabase authentication
NEXT_PUBLIC_SUPABASE_URL="<your-supabase-url>"
NEXT_PUBLIC_SUPABASE_ANON_KEY="<your-supabase-anon-key>"

# Disable Google Auth (optional)
NEXT_PUBLIC_GOOGLE_AUTH_DISABLED="false"
```

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

### Configure MCP Authentication

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/quickstart.mdx

Set NEXT_PUBLIC_MCP_AUTH_REQUIRED to true if your MCP server requires authentication.

```bash
NEXT_PUBLIC_MCP_AUTH_REQUIRED=true
```

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

### Disable Google Sign-Up

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/authentication.mdx

Set this environment variable to `true` if you wish to disable Google as an authentication option in the UI. This is configured within the `apps/web/` directory.

```bash
NEXT_PUBLIC_GOOGLE_AUTH_DISABLED=true
```

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

### Set MCP Server URL Environment Variable

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/mcp-server.mdx

Configure the MCP server URL by setting the NEXT_PUBLIC_MCP_SERVER_URL environment variable. Ensure the URL does not end with '/mcp'.

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

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

### Create LangGraph SDK Client

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Use `createClient` to instantiate an authenticated LangGraph SDK client. It supports Supabase JWT for user authentication or LangSmith API key authentication via a proxy route. Ensure environment variables like `NEXT_PUBLIC_BASE_API_URL` are set for proxy authentication.

```typescript
import { Client } from "@langchain/langgraph-sdk";

// Create a client for a specific deployment
function createClient(deploymentId: string, accessToken?: string): Client {
  const deployment = getDeployments().find((d) => d.id === deploymentId);
  if (!deployment) {
    throw new Error(`Deployment ${deploymentId} not found`);
  }

  // Use proxy route with LangSmith auth
  if (!accessToken || process.env.NEXT_PUBLIC_USE_LANGSMITH_AUTH === "true") {
    const baseApiUrl = process.env.NEXT_PUBLIC_BASE_API_URL;
    return new Client({
      apiUrl: `${baseApiUrl}/langgraph/proxy/${deploymentId}`,
      defaultHeaders: {
        "x-auth-scheme": "langsmith",
      },
    });
  }

  // Use direct connection with user auth (Supabase JWT)
  return new Client({
    apiUrl: deployment.deploymentUrl,
    defaultHeaders: {
      Authorization: `Bearer ${accessToken}`,
      "x-supabase-access-token": accessToken,
    },
  });
}

// Example usage: Search for assistants
const client = createClient("deployment-id", userAccessToken);
const assistants = await client.assistants.search({
  limit: 100,
  metadata: { created_by: "system" }
});

// Example usage: Create a new assistant
const newAssistant = await client.assistants.create({
  graphId: "agent",
  name: "My Custom Agent",
  metadata: {
    description: "A helpful assistant",
    _x_oap_is_default: true
  }
});
```

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

### Fetch Default Assistants API

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Retrieves or creates default assistants for a given deployment. Requires a deployment ID and an access token for authentication.

```typescript
// GET /api/langgraph/defaults?deploymentId=<deployment-id>
// Headers: Authorization: Bearer <supabase-jwt>

// Response: Array of default assistants
[
  {
    "assistant_id": "uuid",
    "graph_id": "agent",
    "name": "Default Assistant",
    "metadata": {
      "_x_oap_is_default": true,
      "_x_oap_is_primary": true,
      "description": "Default Assistant"
    }
  }
]

// Example fetch call
const getDefaultAssistants = async (
  deploymentId: string,
  accessToken: string
): Promise<Assistant[]> => {
  const response = await fetch(
    `/api/langgraph/defaults?deploymentId=${deploymentId}`,
    {
      headers: { Authorization: `Bearer ${accessToken}` },
    }
  );
  return response.json();
};
```

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

### Set Base API URL for Local Development

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/authentication.mdx

Configure the base API URL for your web server, especially for local development. This ensures requests are proxied correctly to inject the LangSmith API key.

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

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

### Configure Agent with UI Metadata

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Define agent configurations using Zod schemas with custom UI metadata (`x_oap_ui_config`). This allows rendering fields as various UI components like select dropdowns, sliders, number inputs, and textareas in the Open Agent Platform.

```typescript
// TypeScript agent configuration with Zod schema
import "@langchain/langgraph/zod";
import { z } from "zod";

export const GraphConfiguration = z.object({
  // Select field for model selection
  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" },
          ],
        },
      }),

  // Slider field for temperature
  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)",
        },
      }),

  // Number field for max tokens
  maxTokens:
    z
      .number()
      .optional()
      .langgraph.metadata({
        x_oap_ui_config: {
          type: "number",
          default: 4000,
          min: 1,
          description: "The maximum number of tokens to generate",
        },
      }),

  // Textarea field for system prompt
  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",
        },
      }),
});

// Pass the configuration schema to StateGraph
const workflow = new StateGraph(MyStateSchema, GraphConfiguration);
```

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

### MCP Tools Configuration (Python)

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Defines the configuration schema for MCP tools using Pydantic in Python. Includes URL, tool list, and authentication requirements for MCP servers.

```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"""
    auth_required: Optional[bool] = Field(
        default=False,
        optional=True,
    )
    """Whether the MCP server requires authentication"""


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"]
                # }
            }
        }
    )
```

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

### Graph Configuration Schema

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Defines the schema for graph configurations, including model selection, temperature, max tokens, and system prompts. Used to initialize the StateGraph.

```python
class State:
    pass

class GraphConfigPydantic(BaseModel):
    model: Optional[str] = Field(
        default="openai:gpt-4o",
        metadata={
            "x_oap_ui_config": {
                "type": "select",
                "default": "openai:gpt-4o",
                "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",
            }
        }
    )

# ENSURE YOU PASS THE GRAPH CONFIGURABLE SCHEMA TO THE StateGraph:
workflow = StateGraph(State, config_schema=GraphConfigPydantic)
```

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

### MCP Tools Configuration (TypeScript)

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Defines the configuration schema for MCP tools using Zod in TypeScript. Includes URL, tool list, and authentication requirements for MCP servers.

```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()),
  /**
   * Whether or not the MCP server requires authentication.
   * This is a field which is set on the client whenever a
   * user creates a new agent. It will be set to true if the
   * `NEXT_PUBLIC_MCP_AUTH_REQUIRED` environment variable is set to `true`,
   * and false otherwise.
   * @default false
   */
  auth_required: z.boolean().optional(),
});

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"]
        // }
      },
    });
```

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

### Python Agent Configuration with Pydantic

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Define configurable fields for Python agents using Pydantic models with 'x_oap_ui_config' metadata. This allows UI-driven configuration for model selection, temperature, and system prompts.

```python
from pydantic import BaseModel, Field
from typing import Optional, List
from langgraph.graph import StateGraph

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",
                "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"},
                ],
            }
        }
    )

    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)",
            }
        }
    )

    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",
            }
        }
    )

# Pass the configuration schema to StateGraph
workflow = StateGraph(State, config_schema=GraphConfigPydantic)
```

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

### Use LangGraph SDK for chat streaming

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Integrates real-time chat with agents using LangGraph SDK React hooks. Manages conversation state, message handling, and thread persistence. Requires API URL, assistant ID, and access token.

```typescript
import { useStream } from "@langchain/langgraph-sdk/react";
import { type Message } from "@langchain/langgraph-sdk";
import { uiMessageReducer, type UIMessage } from "@langchain/langgraph-sdk/react-ui";

type StateType = { messages: Message[]; ui?: UIMessage[] };

// Stream hook configuration
const streamValue = useStream<StateType>({
  apiUrl: deploymentUrl,
  assistantId: agentId,
  threadId: threadId ?? null,

  // Handle custom UI events from the agent
  onCustomEvent: (event, options) => {
    options.mutate((prev) => {
      const ui = uiMessageReducer(prev.ui ?? [], event);
      return { ...prev, ui };
    });
  },

  // Callback when a new thread is created
  onThreadId: (id) => {
    setThreadId(id);
  },

  // Authentication headers
  defaultHeaders: {
    Authorization: `Bearer ${accessToken}`,
    "x-supabase-access-token": accessToken,
  },
});

// Access stream state and methods
const { messages, isStreaming, submit, stop } = streamValue;

// Send a message to the agent
await submit({
  messages: [{ role: "user", content: "Hello, how can you help me?" }]
});
```

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

### Python MCP Tools Configuration

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Configure agents to use MCP (Model Context Protocol) tools in Python. The 'mcp_config' field with 'x_oap_ui_config' of type 'mcp' enables UI-based tool selection.

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

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"""
    auth_required: Optional[bool] = Field(default=False, optional=True)
    """Whether the MCP server requires authentication"""

class GraphConfigPydantic(BaseModel):
    mcp_config: Optional[MCPConfig] = Field(
        default=None,
        optional=True,
        metadata={
            "x_oap_ui_config": {
                "type": "mcp",
                # Optional default tools
                # "default": {"tools": ["Math_Divide", "Math_Mod"]}
            }
        }
    )
```

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

### Agent Utility Functions

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Provides TypeScript functions for identifying and managing different types of agents, including default, system-created, and primary assistants.

```typescript
import { Agent } from "@/types/agent";
import { Assistant } from "@langchain/langgraph-sdk";

// Check if agent is a user-created default (per-graph default)
function isUserCreatedDefaultAssistant(agent: Agent | Assistant): boolean {
  return agent.metadata?._x_oap_is_default === true;
}

// Check if agent was created by the system
function isSystemCreatedDefaultAssistant(agent: Agent | Assistant): boolean {
  return agent.metadata?.created_by === "system";
}

// Check if agent is the primary assistant (global default)
function isPrimaryAssistant(agent: Agent | Assistant): boolean {
  return agent.metadata?._x_oap_is_primary === true;
}

// Group agents by their graph ID
function groupAgentsByGraphs<T extends Agent | Assistant>(agents: T[]): T[][] {
  return Object.values(
    agents.reduce<Record<string, T[]>>((acc, agent) => {
      const groupId = agent.graph_id;
      if (!acc[groupId]) acc[groupId] = [];
      acc[groupId].push(agent);
      return acc;
    }, {})
  );
}

// Sort agents within a group (defaults first, then by updated_at)
function sortAgentGroup(agentGroup: Agent[]): Agent[] {
  return [...agentGroup].sort((a, b) => {
    const aIsDefault = isUserCreatedDefaultAssistant(a);
    const bIsDefault = isUserCreatedDefaultAssistant(b);
    if (aIsDefault && !bIsDefault) return -1;
    if (!aIsDefault && bIsDefault) return 1;
    const timeA = a.updated_at ? new Date(a.updated_at).getTime() : 0;
    const timeB = b.updated_at ? new Date(b.updated_at).getTime() : 0;
    return timeB - timeA;
  });
}
```

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

### Update Agents MCP Server URL Script

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/setup/mcp-server.mdx

Execute a script to update agent configurations with a new MCP server URL. Ensure environment variables like NEXT_PUBLIC_MCP_SERVER_URL, NEXT_PUBLIC_DEPLOYMENTS, and LANGSMITH_API_KEY are set.

```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
```

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

### Python RAG Configuration

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Defines the RAG configuration using Pydantic models and sets the `x_oap_ui_config` metadata for UI integration. The `type` should be set to `rag`.

```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",
                #     ]
                # },
            }
        }
    )
```

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

### TypeScript UI Configuration Types

Source: https://github.com/langchain-ai/open-agent-platform/blob/main/apps/docs/custom-agents/configuration.mdx

Defines the types for custom UI configurations in TypeScript, including field types, options for select fields, and metadata for UI elements.

```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;
  };
};
```

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

### Python RAG Configuration

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Configure agents to use RAG (Retrieval Augmented Generation) capabilities in Python. The 'rag' field with 'x_oap_ui_config' of type 'rag' enables UI-based document collection selection.

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

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 (list of collection IDs)"""

class GraphConfigPydantic(BaseModel):
    rag: Optional[RagConfig] = Field(
        default=None,
        optional=True,
        metadata={
            "x_oap_ui_config": {
                "type": "rag",
                # Optional default collections
                # "default": {"collections": ["collection-uuid-1", "collection-uuid-2"]}
            }
        }
    )
```

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

### Create a new RAG collection

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Use this function to create a new collection for storing documents. Requires an access token for authentication.

```typescript
const createCollection = async (
  name: string,
  metadata: Record<string, any> = {},
  accessToken: string
): Promise<Collection> => {
  const response = await fetch(`${RAG_API_URL}/collections`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify({ name, metadata }),
  });
  return response.json();
};
```

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

### Chat Streaming with LangGraph SDK

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Utilizes LangGraph SDK React hooks for real-time streaming chat with agents, managing conversation state and message handling.

```APIDOC
### Description
This hook manages the state and interaction for a real-time chat stream with an agent.

### Usage
```typescript
import { useStream } from "@langchain/langgraph-sdk/react";
import { type Message } from "@langchain/langgraph-sdk";
import { type UIMessage } from "@langchain/langgraph-sdk/react-ui";

type StateType = {
  messages: Message[];
  ui?: UIMessage[];
};

const streamValue = useStream<StateType>({
  apiUrl: deploymentUrl,
  assistantId: agentId,
  threadId: threadId ?? null,
  onCustomEvent: (event, options) => {
    // Handle custom UI events from the agent
    options.mutate((prev) => {
      const ui = uiMessageReducer(prev.ui ?? [], event);
      return { ...prev, ui };
    });
  },
  onThreadId: (id) => {
    setThreadId(id);
  },
  defaultHeaders: {
    Authorization: `Bearer ${accessToken}`,
    "x-supabase-access-token": accessToken,
  },
});

const { messages, isStreaming, submit, stop } = streamValue;

// To send a message:
await submit({
  messages: [{ role: "user", content: "Hello, how can you help me?" }]
});
```

### Parameters for `useStream` hook
- **apiUrl** (string) - Required - The URL of the API endpoint for the agent.
- **assistantId** (string) - Required - The ID of the assistant.
- **threadId** (string | null) - Optional - The ID of the conversation thread. If null, a new thread will be created.
- **onCustomEvent** (function) - Callback function to handle custom events emitted by the agent.
- **onThreadId** (function) - Callback function invoked when a new thread ID is available.
- **defaultHeaders** (object) - Object containing default headers to be sent with each request.

### Returned values from `useStream` hook
- **messages** (Message[]) - The current list of messages in the conversation.
- **isStreaming** (boolean) - Indicates if the agent is currently streaming a response.
- **submit** (function) - Function to submit a new message to the agent.
- **stop** (function) - Function to stop the current streaming response.

```

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

### TypeScript MCP Tools Configuration

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Configure agents to use MCP (Model Context Protocol) tools in TypeScript. The 'mcpConfig' field with type 'mcp' enables UI-based tool selection, with optional default tools.

```typescript
import { z } from "zod";

// TypeScript MCP configuration
export const MCPConfig = z.object({
  url: z.string(),
  tools: z.array(z.string()),
  auth_required: z.boolean().optional(),
});

export const GraphConfiguration = z.object({
  // MCP tools configuration
  mcpConfig:
    z
      .lazy(() => MCPConfig)
      .optional()
      .langgraph.metadata({
        x_oap_ui_config: {
          type: "mcp",
          // Optional: set default tools
          default: {
            tools: ["Math_Divide", "Math_Mod"]
          }
        },
      }),
});
```

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

### List all RAG collections

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Retrieves a list of all available RAG collections. An access token is required for authorization.

```typescript
const getCollections = async (accessToken: string): Promise<Collection[]> => {
  const response = await fetch(`${RAG_API_URL}/collections`, {
    headers: { Authorization: `Bearer ${accessToken}` },
  });
  return response.json();
};
```

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

### Document Management API

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

APIs for uploading, listing, and deleting documents within RAG collections.

```APIDOC
## POST /collections/{collectionId}/documents

### Description
Uploads documents to a specified RAG collection.

### Method
POST

### Endpoint
/collections/{collectionId}/documents

### Parameters
#### Path Parameters
- **collectionId** (string) - Required - The ID of the collection to upload documents to.

#### Request Body
- **files** (File[]) - Required - An array of files to upload.
- **metadatas_json** (string) - Optional - A JSON string representing an array of metadata objects, one for each file.

### Request Example
```json
// Assuming 'files' is a FileList object and 'metadatas' is an array of objects
// The actual request is multipart/form-data
// Example metadata:
// [{"source": "doc1.pdf"}, {"source": "doc2.txt"}]
```

### Response
#### Success Response (200)
- **any** (any) - Response from the server, typically indicating success or details of uploaded documents.

#### Response Example
```json
{
  "message": "Documents uploaded successfully.",
  "ids": ["doc-id-1", "doc-id-2"]
}
```

## GET /collections/{collectionId}/documents

### Description
Lists documents within a specified RAG collection.

### Method
GET

### Endpoint
/collections/{collectionId}/documents

### Parameters
#### Path Parameters
- **collectionId** (string) - Required - The ID of the collection to list documents from.

#### Query Parameters
- **limit** (number) - Optional - The maximum number of documents to return (default: 100).
- **offset** (number) - Optional - The number of documents to skip (default: 0).

### Response
#### Success Response (200)
- **Document[]** (array) - An array of document objects.

#### Response Example
```json
[
  {
    "id": "doc-id-1",
    "content": "Content of the first document...",
    "metadata": {"source": "doc1.pdf"},
    "createdAt": "2023-01-01T12:00:00Z"
  }
]
```

## DELETE /collections/{collectionId}/documents/{documentId}

### Description
Deletes a specific document from a RAG collection.

### Method
DELETE

### Endpoint
/collections/{collectionId}/documents/{documentId}

### Parameters
#### Path Parameters
- **collectionId** (string) - Required - The ID of the collection containing the document.
- **documentId** (string) - Required - The ID of the document to delete.

### Response
#### Success Response (200)
(No content)

```

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

### TypeScript RAG Configuration

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

Configure agents to use RAG (Retrieval Augmented Generation) capabilities in TypeScript. The 'rag' field with type 'rag' enables UI-based document collection selection, with optional default collections.

```typescript
import { z } from "zod";

// TypeScript RAG configuration
export const RAGConfig = z.object({
  rag_url: z.string(),
  collections: z.string().array(),
});

export const GraphConfiguration = z.object({
  rag:
    z
      .lazy(() => RAGConfig)
      .optional()
      .langgraph.metadata({
        x_oap_ui_config: {
          type: "rag",
          // Optional: set default collections by ID
          default: {
            collections: [
              "fd4fac19-886c-4ac8-8a59-fff37d2b847f",
              "659abb76-fdeb-428a-ac8f-03b111183e25",
            ]
          }
        },
      }),
});
```

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

### RAG Collections API

Source: https://context7.com/langchain-ai/open-agent-platform/llms.txt

APIs for managing RAG collections, which store documents for agents to query.

```APIDOC
## POST /collections

### Description
Creates a new RAG collection.

### Method
POST

### Endpoint
/collections

### Request Body
- **name** (string) - Required - The name of the collection.
- **metadata** (object) - Optional - Metadata for the collection.

### Request Example
```json
{
  "name": "my-collection",
  "metadata": {"description": "My first collection"}
}
```

### Response
#### Success Response (200)
- **Collection** (object) - Details of the created collection.

#### Response Example
```json
{
  "id": "collection-id-123",
  "name": "my-collection",
  "metadata": {"description": "My first collection"},
  "createdAt": "2023-01-01T12:00:00Z"
}
```

## GET /collections

### Description
Lists all RAG collections.

### Method
GET

### Endpoint
/collections

### Response
#### Success Response (200)
- **Collection[]** (array) - An array of collection objects.

#### Response Example
```json
[
  {
    "id": "collection-id-123",
    "name": "my-collection",
    "metadata": {"description": "My first collection"},
    "createdAt": "2023-01-01T12:00:00Z"
  }
]
```

## PATCH /collections/{collectionId}

### Description
Updates an existing RAG collection.

### Method
PATCH

### Endpoint
/collections/{collectionId}

### Parameters
#### Path Parameters
- **collectionId** (string) - Required - The ID of the collection to update.

### Request Body
- **name** (string) - Required - The new name of the collection.
- **metadata** (object) - Required - The updated metadata for the collection.

### Request Example
```json
{
  "name": "updated-collection-name",
  "metadata": {"description": "Updated description"}
}
```

### Response
#### Success Response (200)
- **Collection** (object) - Details of the updated collection.

#### Response Example
```json
{
  "id": "collection-id-123",
  "name": "updated-collection-name",
  "metadata": {"description": "Updated description"},
  "createdAt": "2023-01-01T12:00:00Z",
  "updatedAt": "2023-01-01T13:00:00Z"
}
```

## DELETE /collections/{collectionId}

### Description
Deletes a RAG collection.

### Method
DELETE

### Endpoint
/collections/{collectionId}

### Parameters
#### Path Parameters
- **collectionId** (string) - Required - The ID of the collection to delete.

### Response
#### Success Response (200)
(No content)

```