Open Agent Platform + Arcade MCP

A production-ready agent management platform powered by LangChain's Open Agent Platform and Arcade's MCP Gateway

🤖 LangGraph Agents • 🔧 Arcade MCP Tools • 🚀 Enterprise Ready

Quick Start • Architecture • Configuration • Documentation

Overview

This is a customized implementation of LangChain's Open Agent Platform integrated with Arcade.dev's MCP Gateway for secure, scalable tool access. The platform provides a modern web interface for creating, managing, and interacting with LangGraph agents that can access 1000+ external tools through Arcade's production-grade MCP infrastructure.

What Makes This Special

🔐 Multi-Provider SSO: Okta, Microsoft Entra ID, and PingID - choose your identity provider
🛠️ 100+ Tools via Arcade: GitHub, Slack, Gmail, Calendar, Linear, and more
🔒 Custom Verifier: Production-ready OAuth security with user verification
⚡ Proxy Architecture: Zero client-side credentials, full request control
🎯 True Multi-User: Per-user tool authorization with session-based identity
🏢 Enterprise Ready: Complete SSO integration with phishing and session hijacking protection

Key Features

✨ Agent Management

Build and configure LangGraph agents through an intuitive web interface. No code required for agent deployment and configuration.

🔧 Arcade MCP Integration

Access Arcade's entire tool ecosystem:

Productivity: Gmail, Google Calendar, Outlook, Notion, Asana
Developer Tools: GitHub, Jira, Linear
Communication: Slack, Microsoft Teams, Discord
And 1000+ more... Full list: docs.arcade.dev/en/mcp-servers

🔐 Secure Tool Authorization

Custom Verifier Endpoint: Validates user identity during OAuth flows
Server-side API keys: Never exposed to browser
Per-user OAuth: Each user authorizes tools with their own accounts
Phishing/Session Hijacking Protection: Ensures session user matches authorizing user
Multi-user Isolation: Users cannot access each other's tool authorizations
Production-ready: Implements Arcade's security requirements

💬 Advanced Chat Interface

Real-time streaming responses
Tool execution visualization
Multi-modal support (text, images, files)
Thread history and management

🎨 No-Code Configuration

Visual tool selection interface
Agent configuration through UI forms
Model selection and parameter tuning
MCP server configuration

Architecture

┌──────────────────────────────────────────────────────────────────────┐
│                         Browser (Client)                             │
│  ┌────────────┐    ┌──────────────┐    ┌──────────────────────────┐  │
│  │  Chat UI   │    │  Tools UI    │    │  Agent Management        │  │
│  └──────┬─────┘    └──────┬───────┘    └──────────┬───────────────┘  │
│         │                 │                       │                  │
│         └─────────────────┴───────────────────────┘                  │
│                           │                                          │
│                 User authenticated via:                              │
│                 Okta / Entra ID / PingID                             │
│                            │                                         │
└────────────────────────────┼─────────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────────┐
│              Next.js Backend (Server) + NextAuth                    │
│                                                                     │
│  ┌─────────────────────┐  ┌──────────────────┐  ┌────────────────┐  │
│  │ /api/auth/          │  │ Session Mgmt     │  │ /api/arcade/   │  │
│  │ [..nextauth]        │  │ (JWT Cookies)    │  │ verify         │  │
│  │                     │  │                  │  │                │  │
│  │ • Okta OIDC         │  │ Gets user email  │  │ Custom         │  │
│  │ • Entra ID OIDC     │  │ from session     │  │ Verifier       │  │
│  │ • PingID OIDC       │  │                  │  │ (Phase 3)      │  │
│  └─────────────────────┘  └────────┬─────────┘  └────────┬───────┘  │
│                                    │                     │          │
│  ┌─────────────────────┐  ┌────────▼──────────┐          │          │
│  │ /api/langgraph/     │  │ /api/oap_mcp      │◄─────────┘          │
│  │ proxy/{id}          │  │                   │  (on OAuth redirect)│
│  │                     │  │ Gets session:     │                     │
│  │ Injects:            │  │ user.email        │                     │
│  │ • LANGSMITH_API_KEY │  │                   │                     │
│  │ • x-auth-scheme     │  │ Injects:          │                     │
│  └──────────┬──────────┘  │ • Authorization:  │                     │
│             │             │   Bearer ${KEY}   │                     │
│             │             │ • Arcade-User-ID: │                     │
│             │             │   ${session.email}│                     │
│             │             └─────────┬─────────┘                     │
└─────────────┼───────────────────────┼───────────────────────────────┘
              │                       │
              ▼                       ▼
┌───────────────────────┐   ┌─────────────────────────────────────────┐
│  LangGraph Deployment │   │      Arcade MCP Gateway                 │
│                       │   │                                         │
│  • localhost:2024     │   │  1. Receives tool call with             │
│  • LangSmith Cloud    │   │     Arcade-User-ID: user@company.com    │
│                       │   │  2. User needs GitHub OAuth?            │
│  Executes agents with │   │  3. Redirects to GitHub                 │
│  configured MCP tools │   │  4. User authorizes                     │
│                       │   │  5. Redirects to /api/arcade/verify     │
│                       │   │  6. Verifier confirms user identity     │
│                       │   │  7. Tool authorized for this user       │
│                       │   │  8. Executes with user's OAuth token    │
└───────────────────────┘   └─────────────────────────────────────────┘

Data Flow

User Authentication & Session Flow (Phase 2)

1. User visits OAP → Unauthenticated
2. Middleware checks session → None found
3. Redirect to SSO login page (Okta/Entra/Ping)
4. User authenticates with corporate SSO
5. SSO redirects to /api/auth/callback/{provider}
6. NextAuth validates OAuth code & creates JWT session
7. Session cookie stored (httpOnly, secure)
8. User redirected to OAP → Authenticated
9. All subsequent requests include session cookie

MCP Tool Execution with Multi-User Auth (Phases 2 & 3)

1. User A (alice@company.com) → Agent: "Check my GitHub repos"
2. Agent → LangGraph: Invokes GitHub tool
3. LangGraph → OAP /api/oap_mcp
4. OAP extracts session: alice@company.com
5. OAP → Arcade with headers:
   • Authorization: Bearer ${ARCADE_API_KEY}
   • Arcade-User-ID: alice@company.com
6. Arcade checks: Does alice@company.com have GitHub OAuth?
   
   If NO:
   7a. Arcade → User's browser: GitHub OAuth page
   7b. User authorizes with THEIR GitHub account
   7c. GitHub → Arcade with auth code
   7d. Arcade → OAP Custom Verifier: /api/arcade/verify?flow_id=xxx
   7e. Verifier gets session email: alice@company.com
   7f. Verifier → Arcade: confirmUser(flow_id, alice@company.com)
   7g. Arcade validates identity match ✓
   7h. Tool authorized for alice@company.com
   
   If YES:
   7. Use existing OAuth token
   
8. Arcade → GitHub API with alice@company.com's token
9. GitHub returns Alice's repos
10. Arcade → OAP → Agent → User: Alice sees HER repos

// Meanwhile, User B (bob@company.com) has separate auth
// Bob's tools use BOB's GitHub account, completely isolated

Dynamic Headers (Multi-User)

// Sent to Arcade on every MCP request - dynamically per user
Authorization: Bearer arc_proj... // Same for all (project key)
Arcade-User-ID: alice@company.com  // Different per user from session!

Quick Start

Prerequisites

Node.js 18+ and Yarn
Python 3.10+ (for LangGraph agent)
LangGraph CLI: pip install langgraph-cli
Arcade Account: Sign up at arcade.dev
LangSmith Account: Sign up at smith.langchain.com
Anthropic API Key: Get from console.anthropic.com
SSO Provider (choose one): Okta, Microsoft Entra ID, or PingID account

Step 1: Set Up Arcade MCP Gateway

Create an Arcade account at arcade.dev
Get your API key from the Arcade dashboard
Note your MCP gateway URL: https://api.arcade.dev/mcp/<your-slug>
Configure tools you want to use (GitHub, Slack, etc.)

Step 2: Create a LangGraph Agent

# Use the example agent included
cd simple-langgraph-agent

# Install dependencies
pip install -r requirements.txt

# Add your Anthropic API key
echo "ANTHROPIC_API_KEY=sk-ant-..." > .env

# Start the LangGraph server
langgraph dev --port 2024

When the server starts, note the assistant ID shown in the output or LangSmith Studio URL.

Step 3: Configure SSO Provider

Choose one (or more) identity providers:

Option A: Okta

# In Okta Dashboard, create OIDC Web App
# Redirect URI: http://localhost:3000/api/auth/callback/okta
# Copy: Client ID, Client Secret, Issuer

Option B: Microsoft Entra ID

# In Azure Portal, create App Registration
# Redirect URI: http://localhost:3000/api/auth/callback/entra-id
# Copy: Application ID, Client Secret, Tenant ID

Option C: PingID

# In PingOne Console, create OIDC Web App
# Redirect URI: http://localhost:3000/api/auth/callback/ping
# Copy: Client ID, Client Secret, Issuer URL

Step 4: Configure OAP

cd open-agent-platform/apps/web
cp .env.example .env.local

# Generate NextAuth secret
openssl rand -base64 32

# Edit .env.local with ALL required values:

Complete .env.local Example:

# Base & NextAuth
NEXT_PUBLIC_BASE_API_URL=http://localhost:3000/api
NEXTAUTH_SECRET=<output-from-openssl>
NEXTAUTH_URL=http://localhost:3000

# SSO Provider (at least one)
PING_CLIENT_ID=<from-ping>
PING_CLIENT_SECRET=<from-ping>
PING_ISSUER=https://auth.pingone.com/{env-id}/as

# LangGraph
NEXT_PUBLIC_DEPLOYMENTS='[{"id":"<ASSISTANT-ID>","deploymentUrl":"http://localhost:2024","isDefault":true,"defaultGraphId":"chat_agent","name":"Local"}]'
NEXT_PUBLIC_USE_LANGSMITH_AUTH=true
LANGSMITH_API_KEY=lsv2_pt_...

# Arcade
ARCADE_MCP_GATEWAY_URL=https://api.arcade.dev/mcp/your-slug
ARCADE_API_KEY=arc_proj_...
NEXT_PUBLIC_MCP_AUTH_REQUIRED=true

# Optional fallback (only for dev without SSO)
# ARCADE_USER_ID=dev@example.com

Step 5: Run OAP

# From project root
yarn install
yarn dev

Navigate to http://localhost:3000

Step 6: Authenticate & Create Agent

Sign In: Click user menu → Choose your SSO provider → Authenticate
Browse Tools: Go to /tools → See all 1000+ Arcade MCP tools
Create Agent: Go to /agents → Click "Create Agent"
Select Graph: Choose "Chat Agent" from dropdown
Configure MCP Tools: Select which tools the agent can access
Name & Create: Give your agent a name and description
Start Chatting: Click into your agent and start a conversation!

Step 7: (Optional) Configure Custom Verifier for Production

For production multi-user OAuth security:

Deploy OAP to a public URL or use ngrok
Go to Arcade Dashboard → Auth → Settings
Select "Custom verifier"
Enter verifier URL: https://your-domain.com/api/arcade/verify
Save and test tool authorization flow

See PHASE3-COMPLETE.md for detailed verifier setup.

Configuration

Environment Variables

See apps/web/.env.example for the complete template with detailed instructions.

Core Variables (Required)

Variable	Description	Example
`NEXT_PUBLIC_BASE_API_URL`	API base URL (must include `/api`)	`http://localhost:3000/api`
`NEXTAUTH_SECRET`	NextAuth JWT signing secret	Generate with `openssl rand -base64 32`
`NEXTAUTH_URL`	Application base URL	`http://localhost:3000`

SSO Providers (Configure at least ONE)

Variable	Provider	Description
`OKTA_CLIENT_ID` `OKTA_CLIENT_SECRET` `OKTA_ISSUER`	Okta	Okta OIDC application credentials
`ENTRA_CLIENT_ID` `ENTRA_CLIENT_SECRET` `ENTRA_TENANT_ID`	Microsoft	Azure AD/Entra ID app registration
`PING_CLIENT_ID` `PING_CLIENT_SECRET` `PING_ISSUER`	PingID	Ping Identity OIDC application

Arcade MCP (Required)

Variable	Description	Example
`ARCADE_MCP_GATEWAY_URL`	Your Arcade MCP gateway URL	`https://api.arcade.dev/mcp/yourslug`
`ARCADE_API_KEY`	Arcade project API key (server-side only)	`arc_proj_...`
`ARCADE_USER_ID`	Optional fallback for dev without SSO	`dev@example.com`
`NEXT_PUBLIC_MCP_AUTH_REQUIRED`	Enable MCP authentication	`true`

LangGraph (Required)

Variable	Description	Example
`NEXT_PUBLIC_DEPLOYMENTS`	LangGraph deployment config (JSON)	See below
`LANGSMITH_API_KEY`	LangSmith API key for proxy auth	`lsv2_pt_...`
`NEXT_PUBLIC_USE_LANGSMITH_AUTH`	Enable proxy mode	`true`

LangGraph Deployments Configuration

The NEXT_PUBLIC_DEPLOYMENTS is a JSON array. Important: The id field must be the assistant ID, not a random UUID.

[{
  "id": "LANGGRAPH_ASSISTANT_ID_HERE",            // Assistant ID from langgraph dev
  "deploymentUrl": "http://localhost:2024",       // Where LangGraph is running
  "isDefault": true,                              // Whether this is the default
  "defaultGraphId": "chat_agent",                 // Graph ID from langgraph.json
  "name": "Local Development"                     // Display name
}]

To find your assistant ID:

# Start your LangGraph agent
langgraph dev --port 2024

# Look for the assistant ID in the LangSmith Studio URL, or:
curl http://localhost:2024/assistants/search | jq

How It Works

Arcade MCP Integration

Server-Side Proxy Pattern

All MCP requests are proxied through the Next.js backend to protect API keys:

// Browser makes request to local endpoint
const client = new StreamableHTTPClientTransport(
  new URL("http://localhost:3000/api/oap_mcp")
);

// Server proxies to Arcade with auth headers
headers.set("Authorization", `Bearer ${ARCADE_API_KEY}`);
headers.set("Arcade-User-ID", ${ARCADE_USER_ID});

// Request forwarded to Arcade
fetch("https://api.arcade.dev/mcp/yourslug", { headers });

Per-User Tool Authorization

Arcade handles OAuth for each tool:

User authorizes a tool (e.g., GitHub) through Arcade's OAuth flow
Arcade stores the authorization linked to the user's email
When tool is called, Arcade-User-ID header identifies which user
Arcade uses that user's OAuth tokens to execute the tool
Results returned to agent

This means each user can have their own GitHub/Slack/etc. authorizations.

Authentication Architecture

Current Implementation (Phase 2)

NextAuth + Multi-Provider SSO: Production-ready authentication supporting multiple enterprise identity providers:

Supported Providers:

Okta - Enterprise SSO platform
Microsoft Entra ID (formerly Azure AD) - Microsoft's identity platform
PingID - Ping Identity SSO solution

Development Mode (NODE_ENV=development):

Authentication optional - allows testing without SSO
Falls back to ARCADE_USER_ID from environment
Sign in buttons available but not required
Fully backward compatible with Phase 1

Production Mode (NODE_ENV=production):

SSO required for access (any configured provider)
Users authenticate with their corporate identity provider
Per-user Arcade tool authorization
Session managed via secure JWT cookies

Implementation:

// apps/web/src/lib/auth/auth.ts - Dynamic provider configuration
const getProviders = () => {
  const providers = [];
  
  // Okta
  if (process.env.OKTA_CLIENT_ID && process.env.OKTA_ISSUER) {
    providers.push({ id: "okta", type: "oidc", ... });
  }
  
  // Microsoft Entra ID
  if (process.env.ENTRA_CLIENT_ID && process.env.ENTRA_TENANT_ID) {
    providers.push({ id: "entra-id", type: "oidc", ... });
  }
  
  // PingID
  if (process.env.PING_CLIENT_ID && process.env.PING_ISSUER) {
    providers.push({ id: "ping", type: "oidc", ... });
  }
  
  return providers;
};

// apps/web/src/app/api/oap_mcp/proxy-request.ts  
// Multi-user support - each user's email from their SSO session
const session = await auth();
const userEmail = session?.user?.email || ARCADE_USER_ID_FALLBACK;
headers.set("Arcade-User-ID", userEmail);

Benefits:

Multi-provider flexibility - Choose your enterprise SSO provider
Per-user tool access - Each user has their own Arcade OAuth authorizations
Secure - Email from validated JWT session, not client input
Zero-config defaults - Only configure the provider(s) you need
Enterprise-ready - Standard OIDC protocol, works with any OIDC provider

LangGraph Proxy Mode

All LangGraph requests use server-side authentication:

// Client creates SDK client pointing to proxy
const client = new Client({
  apiUrl: "http://localhost:3000/api/langgraph/proxy/{deploymentId}",
  defaultHeaders: { "x-auth-scheme": "langsmith" }
});

// Server uses LangSmith API key (never exposed to client)
const headers = {
  "Authorization": `Bearer ${LANGSMITH_API_KEY}`,
  "x-auth-scheme": "langsmith"
};

Benefits:

No client-side credentials
Centralized auth management
Easy to rotate API keys
Compatible with enterprise security policies

Project Structure

open-agent-platform/
├── apps/
│   ├── web/                          # Main Next.js application
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── (app)/            # Main app routes
│   │   │   │   │   ├── agents/       # Agent management
│   │   │   │   │   ├── tools/        # Tool browser & playground
│   │   │   │   │   └── layout.tsx    # Root layout with providers
│   │   │   │   └── api/
│   │   │   │       ├── oap_mcp/      # 🎯 Arcade MCP proxy
│   │   │   │       │   ├── route.ts
│   │   │   │       │   └── proxy-request.ts  # Header injection
│   │   │   │       └── langgraph/
│   │   │   │           ├── proxy/    # LangGraph proxy
│   │   │   │           └── defaults/ # Default assistants
│   │   │   ├── components/           # Reusable UI components
│   │   │   ├── features/             # Feature modules
│   │   │   │   ├── agents/           # Agent CRUD operations
│   │   │   │   ├── chat/             # Chat interface
│   │   │   │   └── tools/            # Tool management
│   │   │   ├── hooks/
│   │   │   │   ├── use-mcp.tsx       # 🎯 MCP client hook
│   │   │   │   └── use-agents.tsx    # Agent operations
│   │   │   ├── lib/
│   │   │   │   ├── auth/
│   │   │   │   │   ├── types.ts      # Auth interfaces
│   │   │   │   │   ├── mock-provider.ts  # 🎯 Mock auth
│   │   │   │   │   └── middleware.ts # Request middleware
│   │   │   │   └── client.ts         # LangGraph SDK factory
│   │   │   └── providers/
│   │   │       ├── Session.tsx       # 🎯 Session context
│   │   │       ├── MCP.tsx           # 🎯 MCP context
│   │   │       └── Agents.tsx        # Agents context
│   │   └── .env.example              # 🎯 Configuration template
│   └── docs/                         # Documentation site
│
├── simple-langgraph-agent/           # 🎯 Example agent for testing
│   ├── agent.py                      # Minimal agent with MCP support
│   ├── langgraph.json               # LangGraph configuration
│   └── requirements.txt
│
├── PHASE1-COMPLETE.md                # 🎯 Phase 1 implementation notes
└── README.md                         # This file

🎯 = Modified/created for Arcade integration

Development

Running Locally

Terminal 1 - LangGraph Agent:

cd simple-langgraph-agent
langgraph dev --port 2024

Terminal 2 - OAP Frontend:

cd open-agent-platform
yarn dev

Access:

OAP: http://localhost:3000
LangGraph Studio: http://localhost:2024 (or via LangSmith)

Testing MCP Tools

Browse and test Arcade tools without creating an agent:

# Open in browser
http://localhost:3000/tools          # Browse all available tools
http://localhost:3000/tools/playground  # Test tool execution

Creating Agents

Ensure LangGraph agent is running
Go to /agents in OAP
Click "Create Agent"
Select graph from dropdown
Configure MCP tools
Create and start chatting!

Implementation Details

Changes from Original OAP

Removed

❌ All Supabase authentication code
❌ Auth UI pages (signin, signup, password reset)
❌ User management features
❌ Supabase SDK dependencies (@supabase/ssr, @supabase/supabase-js)

Added

✅ Arcade MCP Gateway integration
✅ Custom header injection for Arcade auth
✅ Mock authentication provider
✅ Environment variable rename: ARCADE_MCP_GATEWAY_URL
✅ Enhanced documentation

Modified

🔄 Middleware: Allow all requests (no auth checks)
🔄 MCP Proxy: Inject Arcade-specific headers
🔄 Client Creation: Enforce proxy-only mode
🔄 All components: Remove session/token dependencies
🔄 RAG: Temporarily stubbed out

Files Modified (Summary)

Deleted (15+ files):

src/lib/auth/supabase.ts
src/lib/auth/supabase-client.ts
src/providers/Auth.tsx
src/app/(auth)/          # Entire directory
src/features/signin/
src/features/signup/
src/features/forgot-password/
src/features/reset-password/
src/app/debug-auth/
src/components/auth/

Created:

# Phase 1: Core Infrastructure
src/lib/auth/mock-provider.ts        # Mock auth for testing
src/providers/Session.tsx            # Session provider (now uses NextAuth)
apps/web/.env.example                # Configuration template
simple-langgraph-agent/              # Example LangGraph agent

# Phase 2: Multi-Provider Authentication
src/lib/auth/auth.ts                 # NextAuth config with 3 providers
src/lib/auth/providers.ts            # Provider utilities
src/app/api/auth/[...nextauth]/      # NextAuth API routes

# Phase 3: Custom Verifier
src/app/api/arcade/verify/           # Arcade custom verifier endpoint

Modified (30+ files):

# Core Changes
apps/web/package.json                # Removed Supabase, added NextAuth + Arcade SDK
src/app/api/oap_mcp/proxy-request.ts # Dynamic Arcade-User-ID from session
src/hooks/use-mcp.tsx                # Protocol 2025-06-18 support
src/lib/client.ts                    # Proxy-only mode
src/lib/auth/middleware.ts           # NextAuth session validation
src/components/sidebar/nav-user.tsx  # Multi-provider sign-in UI
src/providers/Agents.tsx             # Removed session dependencies
src/providers/Session.tsx            # NextAuth integration
src/app/(app)/layout.tsx             # NextAuthSessionProvider wrapper

# 25+ more files updated

Troubleshooting

Tools Not Loading

Symptom: /tools page is empty or shows "No tools available"

Solutions:

Verify ARCADE_MCP_GATEWAY_URL is correct (check Arcade dashboard)
Confirm ARCADE_API_KEY is valid
Ensure ARCADE_USER_ID matches your Arcade account email
Check browser console for errors
Look for terminal logs: MCP Proxy: Forwarding request to...

Common Issues:

Protocol version mismatch → Upgrade MCP SDK: yarn add @modelcontextprotocol/sdk@latest
404 errors → Check URL doesn't have double /mcp/mcp/
401/403 errors → Verify API key and user ID

Graph Dropdown Empty

Symptom: "Create Agent" dialog shows no graphs

Solutions:

Ensure LangGraph agent is running: curl http://localhost:2024/ok
Verify NEXT_PUBLIC_DEPLOYMENTS id is the assistant ID (not random UUID)
Check NEXT_PUBLIC_BASE_API_URL includes /api suffix
Restart OAP after env changes
Check browser console for "Deployment not found" errors

Finding Assistant ID:

# From LangSmith Studio URL, or:
curl http://localhost:2024/assistants/search | jq '.[0].assistant_id'

404 Errors on LangGraph Routes

Symptom: Requests to /langgraph/... return 404

Solution: Add /api to NEXT_PUBLIC_BASE_API_URL:

# Wrong:
NEXT_PUBLIC_BASE_API_URL=http://localhost:3000

# Correct:
NEXT_PUBLIC_BASE_API_URL=http://localhost:3000/api

MCP Protocol Version Error

Symptom: Server's protocol version is not supported: 2025-06-18

Solution: Update MCP SDK:

cd apps/web
yarn add @modelcontextprotocol/sdk@latest

Current Status & Roadmap

✅ Phase 1: Complete

Supabase authentication removed
Arcade MCP Gateway integrated
Proxy-only architecture implemented
Mock auth provider for testing
Full agent + tool functionality working

✅ Phase 2: Complete

NextAuth + Multi-Provider SSO Integration

✅ NextAuth.js v5 installed and configured
✅ Three enterprise identity providers:
- Okta OIDC with PKCE
- Microsoft Entra ID (Azure AD)
- PingID with Ping Identity
✅ Dynamic provider detection (zero-config)
✅ Real authentication with JWT session management
✅ Dynamic Arcade-User-ID from authenticated user email
✅ Development mode fallback (backward compatible)
✅ Multi-provider sign-in UI
✅ Production auth enforcement via middleware

✅ Phase 3: Complete

Arcade Custom Verifier

✅ Custom verifier endpoint at /api/arcade/verify
✅ Arcade SDK integration for confirmUser API
✅ Session-based user identity validation
✅ Phishing attack prevention
✅ Multi-user OAuth isolation
✅ Production-ready security implementation
✅ Styled success/error pages
✅ Comprehensive error handling

📋 Future Enhancements

RAG Re-implementation

Restore RAG functionality with NextAuth integration
Per-user document collections
Authenticated vector store access

Multi-Deployment Support

Multiple LangGraph deployments simultaneously
Cloud + local deployment mixing
Deployment selection UI

Security & Production Readiness

Production-Ready Features ✅

Authentication & Authorization:

✅ Multi-provider SSO (Okta, Entra ID, PingID)
✅ NextAuth session management with JWT
✅ Arcade Custom Verifier for OAuth security
✅ Per-user tool authorization
✅ Phishing attack prevention
✅ Server-side API key storage

Architecture Security:

✅ Proxy pattern prevents credential exposure
✅ No client-side tokens or secrets
✅ Session-based user identification
✅ Multi-user OAuth isolation
✅ HTTPS-ready (configure in production)

Deployment Modes

Development Mode (NODE_ENV=development):

Authentication optional
Fallback to ARCADE_USER_ID env var
Great for local testing
All features functional

Production Mode (NODE_ENV=production):

SSO required (configure at least one provider)
Per-user authentication and tool access
Custom verifier active
Session validation enforced

Pre-Production Checklist

Before going live:

✅ Auth: NextAuth with SSO configured (Phases 2 & 3 complete)
✅ Verifier: Custom verifier implemented and tested
✅ Multi-user: Per-user tool authorization working
⚠️ HTTPS/TLS: Required for production OAuth (configure on hosting)
⚠️ Domain: Real domain needed (ngrok for testing)
⚠️ Rate Limiting: Add if needed for your use case
⚠️ Monitoring: Set up logging/alerting
⚠️ Backup: Configure data persistence strategy

Arcade MCP Reference

Supported Tool Categories

Productivity: Gmail, Google Calendar, Outlook, Notion, Asana, ClickUp
Developer: GitHub, GitLab, Jira, Linear
Communication: Slack, Microsoft Teams, Discord, Zoom
CRM: Salesforce, HubSpot
Storage: Google Drive, Dropbox, Box
Social: LinkedIn, Twitter/X, Reddit
And many more...

Full list: docs.arcade.dev/en/mcp-servers

Custom Verifier Implementation

The platform includes a production-ready custom verifier for secure multi-user OAuth:

Endpoint: /api/arcade/verify

How it Works:

User initiates tool authorization (e.g., GitHub)
Arcade handles OAuth with external service
After OAuth, Arcade redirects to verifier with flow_id
Verifier extracts user email from NextAuth session
Calls arcade.auth.confirmUser(flow_id, user_email)
Arcade validates user identity matches the flow
Tool authorization completed securely

Security Benefits:

✅ Prevents phishing attacks
✅ Validates session user = OAuth user
✅ Multi-user isolation enforced
✅ Cannot authorize tools for other users

Configuration:

Development: Use Arcade's default verifier
Testing: Configure ngrok URL in Arcade Dashboard
Production: Configure production domain in Arcade Dashboard

Documentation: Arcade Custom Verifier

Related Projects

LangChain Open Agent Platform: github.com/langchain-ai/open-agent-platform
Arcade MCP: arcade.dev
Model Context Protocol: modelcontextprotocol.io

License

See LICENSE file for details.

Acknowledgments

LangChain for the Open Agent Platform foundation
Arcade.dev for the MCP Gateway infrastructure and tool ecosystem

Built with LangGraph • Arcade MCP • Next.js

Name		Name	Last commit message	Last commit date
Latest commit History 571 Commits
.github/workflows		.github/workflows
apps		apps
.codespellignore		.codespellignore
.gitignore		.gitignore
.yarnrc.yml		.yarnrc.yml
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
turbo.json		turbo.json
yarn.lock		yarn.lock

Uh oh!

License

Uh oh!

ArcadeAI/arcade-mcp-agent-platform

Folders and files

Latest commit

History

Repository files navigation

Open Agent Platform + Arcade MCP

Overview

What Makes This Special

Key Features

✨ Agent Management

🔧 Arcade MCP Integration

🔐 Secure Tool Authorization

💬 Advanced Chat Interface

🎨 No-Code Configuration

Architecture

Data Flow

User Authentication & Session Flow (Phase 2)

MCP Tool Execution with Multi-User Auth (Phases 2 & 3)

Dynamic Headers (Multi-User)

Quick Start

Prerequisites

Step 1: Set Up Arcade MCP Gateway

Step 2: Create a LangGraph Agent

Step 3: Configure SSO Provider

Step 4: Configure OAP

Step 5: Run OAP

Step 6: Authenticate & Create Agent

Step 7: (Optional) Configure Custom Verifier for Production

Configuration

Environment Variables

Core Variables (Required)

SSO Providers (Configure at least ONE)

Arcade MCP (Required)

LangGraph (Required)

LangGraph Deployments Configuration

How It Works

Arcade MCP Integration

Server-Side Proxy Pattern

Per-User Tool Authorization

Authentication Architecture

Current Implementation (Phase 2)

LangGraph Proxy Mode

Project Structure

Development

Running Locally

Testing MCP Tools

Creating Agents

Implementation Details

Changes from Original OAP

Removed

Added

Modified

Files Modified (Summary)

Troubleshooting

Tools Not Loading

Graph Dropdown Empty

404 Errors on LangGraph Routes

MCP Protocol Version Error

Current Status & Roadmap

✅ Phase 1: Complete

✅ Phase 2: Complete

✅ Phase 3: Complete

📋 Future Enhancements

Security & Production Readiness

Production-Ready Features ✅

Deployment Modes

Pre-Production Checklist

Arcade MCP Reference

Supported Tool Categories

Custom Verifier Implementation

Related Projects

License

Acknowledgments

About

Resources

License

Uh oh!

Packages