Merge branch 'dev' into feat/mcp-blocks

Let credential lookup errors propagate in discover_tools endpoint
instead of silently catching all exceptions. Upgrade block.py
auto-lookup logging from debug to warning. Update tests to mock
creds_manager so they don't hit the database.

autogpt_platform/backend/backend/api/features/chat/tools/utils.py

@@ -15,6 +15,7 @@ from backend.data.model import (
     OAuth2Credentials,
 )
 from backend.integrations.creds_manager import IntegrationCredentialsManager
+from backend.integrations.providers import ProviderName
 from backend.util.exceptions import NotFoundError
 
 logger = logging.getLogger(__name__)
@@ -359,7 +360,7 @@ async def match_user_credentials_to_graph(
         _,
         _,
     ) in aggregated_creds.items():
-        # Find first matching credential by provider, type, and scopes
+        # Find first matching credential by provider, type, scopes, and host/URL
         matching_cred = next(
             (
                 cred
@@ -374,6 +375,10 @@ async def match_user_credentials_to_graph(
                     cred.type != "host_scoped"
                     or _credential_is_for_host(cred, credential_requirements)
                 )
+                and (
+                    cred.provider != ProviderName.MCP
+                    or _credential_is_for_mcp_server(cred, credential_requirements)
+                )
             ),
             None,
         )
@@ -444,6 +449,22 @@ def _credential_is_for_host(
     return credential.matches_url(list(requirements.discriminator_values)[0])
 
 
+def _credential_is_for_mcp_server(
+    credential: Credentials,
+    requirements: CredentialsFieldInfo,
+) -> bool:
+    """Check if an MCP OAuth credential matches the required server URL."""
+    if not requirements.discriminator_values:
+        return True
+
+    server_url = (
+        credential.metadata.get("mcp_server_url")
+        if isinstance(credential, OAuth2Credentials)
+        else None
+    )
+    return server_url in requirements.discriminator_values if server_url else False
+
+
 async def check_user_has_required_credentials(
     user_id: str,
     required_credentials: list[CredentialsMetaInput],

autogpt_platform/backend/backend/api/features/integrations/router.py

@@ -1,7 +1,7 @@
 import asyncio
 import logging
 from datetime import datetime, timedelta, timezone
-from typing import TYPE_CHECKING, Annotated, List, Literal
+from typing import TYPE_CHECKING, Annotated, Any, List, Literal
 
 from autogpt_libs.auth import get_user_id
 from fastapi import (
@@ -14,7 +14,7 @@ from fastapi import (
     Security,
     status,
 )
-from pydantic import BaseModel, Field, SecretStr
+from pydantic import BaseModel, Field, SecretStr, model_validator
 from starlette.status import HTTP_500_INTERNAL_SERVER_ERROR, HTTP_502_BAD_GATEWAY
 
 from backend.api.features.library.db import set_preset_webhook, update_preset
@@ -39,7 +39,11 @@ from backend.data.onboarding import OnboardingStep, complete_onboarding_step
 from backend.data.user import get_user_integrations
 from backend.executor.utils import add_graph_execution
 from backend.integrations.ayrshare import AyrshareClient, SocialPlatform
-from backend.integrations.creds_manager import IntegrationCredentialsManager
+from backend.integrations.credentials_store import provider_matches
+from backend.integrations.creds_manager import (
+    IntegrationCredentialsManager,
+    create_mcp_oauth_handler,
+)
 from backend.integrations.oauth import CREDENTIALS_BY_PROVIDER, HANDLERS_BY_NAME
 from backend.integrations.providers import ProviderName
 from backend.integrations.webhooks import get_webhook_manager
@@ -102,9 +106,37 @@ class CredentialsMetaResponse(BaseModel):
     scopes: list[str] | None
     username: str | None
     host: str | None = Field(
-        default=None, description="Host pattern for host-scoped credentials"
+        default=None,
+        description="Host pattern for host-scoped or MCP server URL for MCP credentials",
     )
 
+    @model_validator(mode="before")
+    @classmethod
+    def _normalize_provider(cls, data: Any) -> Any:
+        """Fix ``ProviderName.X`` format from Python 3.13 ``str(Enum)`` bug."""
+        if isinstance(data, dict):
+            prov = data.get("provider", "")
+            if isinstance(prov, str) and prov.startswith("ProviderName."):
+                member = prov.removeprefix("ProviderName.")
+                try:
+                    data = {**data, "provider": ProviderName[member].value}
+                except KeyError:
+                    pass
+        return data
+
+    @staticmethod
+    def get_host(cred: Credentials) -> str | None:
+        """Extract host from credential: HostScoped host or MCP server URL."""
+        if isinstance(cred, HostScopedCredentials):
+            return cred.host
+        if isinstance(cred, OAuth2Credentials) and cred.provider in (
+            ProviderName.MCP,
+            ProviderName.MCP.value,
+            "ProviderName.MCP",
+        ):
+            return (cred.metadata or {}).get("mcp_server_url")
+        return None
+
 
 @router.post("/{provider}/callback", summary="Exchange OAuth code for tokens")
 async def callback(
@@ -179,9 +211,7 @@ async def callback(
         title=credentials.title,
         scopes=credentials.scopes,
         username=credentials.username,
-        host=(
-            credentials.host if isinstance(credentials, HostScopedCredentials) else None
-        ),
+        host=(CredentialsMetaResponse.get_host(credentials)),
     )
 
 
@@ -199,7 +229,7 @@ async def list_credentials(
             title=cred.title,
             scopes=cred.scopes if isinstance(cred, OAuth2Credentials) else None,
             username=cred.username if isinstance(cred, OAuth2Credentials) else None,
-            host=cred.host if isinstance(cred, HostScopedCredentials) else None,
+            host=CredentialsMetaResponse.get_host(cred),
         )
         for cred in credentials
     ]
@@ -222,7 +252,7 @@ async def list_credentials_by_provider(
             title=cred.title,
             scopes=cred.scopes if isinstance(cred, OAuth2Credentials) else None,
             username=cred.username if isinstance(cred, OAuth2Credentials) else None,
-            host=cred.host if isinstance(cred, HostScopedCredentials) else None,
+            host=CredentialsMetaResponse.get_host(cred),
         )
         for cred in credentials
     ]
@@ -322,7 +352,11 @@ async def delete_credentials(
 
     tokens_revoked = None
     if isinstance(creds, OAuth2Credentials):
-        handler = _get_provider_oauth_handler(request, provider)
+        if provider_matches(provider.value, ProviderName.MCP.value):
+            # MCP uses dynamic per-server OAuth — create handler from metadata
+            handler = create_mcp_oauth_handler(creds)
+        else:
+            handler = _get_provider_oauth_handler(request, provider)
         tokens_revoked = await handler.revoke_tokens(creds)
 
     return CredentialsDeletionResponse(revoked=tokens_revoked)

autogpt_platform/backend/backend/api/features/mcp/routes.py

@@ -0,0 +1,404 @@
+"""
+MCP (Model Context Protocol) API routes.
+
+Provides endpoints for MCP tool discovery and OAuth authentication so the
+frontend can list available tools on an MCP server before placing a block.
+"""
+
+import logging
+from typing import Annotated, Any
+from urllib.parse import urlparse
+
+import fastapi
+from autogpt_libs.auth import get_user_id
+from fastapi import Security
+from pydantic import BaseModel, Field
+
+from backend.api.features.integrations.router import CredentialsMetaResponse
+from backend.blocks.mcp.client import MCPClient, MCPClientError
+from backend.blocks.mcp.oauth import MCPOAuthHandler
+from backend.data.model import OAuth2Credentials
+from backend.integrations.creds_manager import IntegrationCredentialsManager
+from backend.integrations.providers import ProviderName
+from backend.util.request import HTTPClientError, Requests
+from backend.util.settings import Settings
+
+logger = logging.getLogger(__name__)
+
+settings = Settings()
+router = fastapi.APIRouter(tags=["mcp"])
+creds_manager = IntegrationCredentialsManager()
+
+
+# ====================== Tool Discovery ====================== #
+
+
+class DiscoverToolsRequest(BaseModel):
+    """Request to discover tools on an MCP server."""
+
+    server_url: str = Field(description="URL of the MCP server")
+    auth_token: str | None = Field(
+        default=None,
+        description="Optional Bearer token for authenticated MCP servers",
+    )
+
+
+class MCPToolResponse(BaseModel):
+    """A single MCP tool returned by discovery."""
+
+    name: str
+    description: str
+    input_schema: dict[str, Any]
+
+
+class DiscoverToolsResponse(BaseModel):
+    """Response containing the list of tools available on an MCP server."""
+
+    tools: list[MCPToolResponse]
+    server_name: str | None = None
+    protocol_version: str | None = None
+
+
+@router.post(
+    "/discover-tools",
+    summary="Discover available tools on an MCP server",
+    response_model=DiscoverToolsResponse,
+)
+async def discover_tools(
+    request: DiscoverToolsRequest,
+    user_id: Annotated[str, Security(get_user_id)],
+) -> DiscoverToolsResponse:
+    """
+    Connect to an MCP server and return its available tools.
+
+    If the user has a stored MCP credential for this server URL, it will be
+    used automatically — no need to pass an explicit auth token.
+    """
+    auth_token = request.auth_token
+
+    # Auto-use stored MCP credential when no explicit token is provided.
+    if not auth_token:
+        mcp_creds = await creds_manager.store.get_creds_by_provider(
+            user_id, ProviderName.MCP.value
+        )
+        # Find the freshest credential for this server URL
+        best_cred: OAuth2Credentials | None = None
+        for cred in mcp_creds:
+            if (
+                isinstance(cred, OAuth2Credentials)
+                and cred.metadata.get("mcp_server_url") == request.server_url
+            ):
+                if best_cred is None or (
+                    (cred.access_token_expires_at or 0)
+                    > (best_cred.access_token_expires_at or 0)
+                ):
+                    best_cred = cred
+        if best_cred:
+            # Refresh the token if expired before using it
+            best_cred = await creds_manager.refresh_if_needed(user_id, best_cred)
+            logger.info(
+                f"Using MCP credential {best_cred.id} for {request.server_url}, "
+                f"expires_at={best_cred.access_token_expires_at}"
+            )
+            auth_token = best_cred.access_token.get_secret_value()
+
+    client = MCPClient(request.server_url, auth_token=auth_token)
+
+    try:
+        init_result = await client.initialize()
+        tools = await client.list_tools()
+    except HTTPClientError as e:
+        if e.status_code in (401, 403):
+            raise fastapi.HTTPException(
+                status_code=401,
+                detail="This MCP server requires authentication. "
+                "Please provide a valid auth token.",
+            )
+        raise fastapi.HTTPException(status_code=502, detail=str(e))
+    except MCPClientError as e:
+        raise fastapi.HTTPException(status_code=502, detail=str(e))
+    except Exception as e:
+        raise fastapi.HTTPException(
+            status_code=502,
+            detail=f"Failed to connect to MCP server: {e}",
+        )
+
+    return DiscoverToolsResponse(
+        tools=[
+            MCPToolResponse(
+                name=t.name,
+                description=t.description,
+                input_schema=t.input_schema,
+            )
+            for t in tools
+        ],
+        server_name=(
+            init_result.get("serverInfo", {}).get("name")
+            or urlparse(request.server_url).hostname
+            or "MCP"
+        ),
+        protocol_version=init_result.get("protocolVersion"),
+    )
+
+
+# ======================== OAuth Flow ======================== #
+
+
+class MCPOAuthLoginRequest(BaseModel):
+    """Request to start an OAuth flow for an MCP server."""
+
+    server_url: str = Field(description="URL of the MCP server that requires OAuth")
+
+
+class MCPOAuthLoginResponse(BaseModel):
+    """Response with the OAuth login URL for the user to authenticate."""
+
+    login_url: str
+    state_token: str
+
+
+@router.post(
+    "/oauth/login",
+    summary="Initiate OAuth login for an MCP server",
+)
+async def mcp_oauth_login(
+    request: MCPOAuthLoginRequest,
+    user_id: Annotated[str, Security(get_user_id)],
+) -> MCPOAuthLoginResponse:
+    """
+    Discover OAuth metadata from the MCP server and return a login URL.
+
+    1. Discovers the protected-resource metadata (RFC 9728)
+    2. Fetches the authorization server metadata (RFC 8414)
+    3. Performs Dynamic Client Registration (RFC 7591) if available
+    4. Returns the authorization URL for the frontend to open in a popup
+    """
+    client = MCPClient(request.server_url)
+
+    # Step 1: Discover protected-resource metadata (RFC 9728)
+    protected_resource = await client.discover_auth()
+
+    metadata: dict[str, Any] | None = None
+
+    if protected_resource and protected_resource.get("authorization_servers"):
+        auth_server_url = protected_resource["authorization_servers"][0]
+        resource_url = protected_resource.get("resource", request.server_url)
+
+        # Step 2a: Discover auth-server metadata (RFC 8414)
+        metadata = await client.discover_auth_server_metadata(auth_server_url)
+    else:
+        # Fallback: Some MCP servers (e.g. Linear) are their own auth server
+        # and serve OAuth metadata directly without protected-resource metadata.
+        # Don't assume a resource_url — omitting it lets the auth server choose
+        # the correct audience for the token (RFC 8707 resource is optional).
+        resource_url = None
+        metadata = await client.discover_auth_server_metadata(request.server_url)
+
+    if (
+        not metadata
+        or "authorization_endpoint" not in metadata
+        or "token_endpoint" not in metadata
+    ):
+        raise fastapi.HTTPException(
+            status_code=400,
+            detail="This MCP server does not advertise OAuth support. "
+            "You may need to provide an auth token manually.",
+        )
+
+    authorize_url = metadata["authorization_endpoint"]
+    token_url = metadata["token_endpoint"]
+    registration_endpoint = metadata.get("registration_endpoint")
+    revoke_url = metadata.get("revocation_endpoint")
+
+    # Step 3: Dynamic Client Registration (RFC 7591) if available
+    frontend_base_url = settings.config.frontend_base_url
+    if not frontend_base_url:
+        raise fastapi.HTTPException(
+            status_code=500,
+            detail="Frontend base URL is not configured.",
+        )
+    redirect_uri = f"{frontend_base_url}/auth/integrations/mcp_callback"
+
+    client_id = ""
+    client_secret = ""
+    if registration_endpoint:
+        reg_result = await _register_mcp_client(
+            registration_endpoint, redirect_uri, request.server_url
+        )
+        if reg_result:
+            client_id = reg_result.get("client_id", "")
+            client_secret = reg_result.get("client_secret", "")
+
+    if not client_id:
+        client_id = "autogpt-platform"
+
+    # Step 4: Store state token with OAuth metadata for the callback
+    scopes = (protected_resource or {}).get("scopes_supported") or metadata.get(
+        "scopes_supported", []
+    )
+    state_token, code_challenge = await creds_manager.store.store_state_token(
+        user_id,
+        ProviderName.MCP.value,
+        scopes,
+        state_metadata={
+            "authorize_url": authorize_url,
+            "token_url": token_url,
+            "revoke_url": revoke_url,
+            "resource_url": resource_url,
+            "server_url": request.server_url,
+            "client_id": client_id,
+            "client_secret": client_secret,
+        },
+    )
+
+    # Step 5: Build and return the login URL
+    handler = MCPOAuthHandler(
+        client_id=client_id,
+        client_secret=client_secret,
+        redirect_uri=redirect_uri,
+        authorize_url=authorize_url,
+        token_url=token_url,
+        resource_url=resource_url,
+    )
+    login_url = handler.get_login_url(
+        scopes, state_token, code_challenge=code_challenge
+    )
+
+    return MCPOAuthLoginResponse(login_url=login_url, state_token=state_token)
+
+
+class MCPOAuthCallbackRequest(BaseModel):
+    """Request to exchange an OAuth code for tokens."""
+
+    code: str = Field(description="Authorization code from OAuth callback")
+    state_token: str = Field(description="State token for CSRF verification")
+
+
+class MCPOAuthCallbackResponse(BaseModel):
+    """Response after successfully storing OAuth credentials."""
+
+    credential_id: str
+
+
+@router.post(
+    "/oauth/callback",
+    summary="Exchange OAuth code for MCP tokens",
+)
+async def mcp_oauth_callback(
+    request: MCPOAuthCallbackRequest,
+    user_id: Annotated[str, Security(get_user_id)],
+) -> CredentialsMetaResponse:
+    """
+    Exchange the authorization code for tokens and store the credential.
+
+    The frontend calls this after receiving the OAuth code from the popup.
+    On success, subsequent ``/discover-tools`` calls for the same server URL
+    will automatically use the stored credential.
+    """
+    valid_state = await creds_manager.store.verify_state_token(
+        user_id, request.state_token, ProviderName.MCP.value
+    )
+    if not valid_state:
+        raise fastapi.HTTPException(
+            status_code=400,
+            detail="Invalid or expired state token.",
+        )
+
+    meta = valid_state.state_metadata
+    frontend_base_url = settings.config.frontend_base_url
+    if not frontend_base_url:
+        raise fastapi.HTTPException(
+            status_code=500,
+            detail="Frontend base URL is not configured.",
+        )
+    redirect_uri = f"{frontend_base_url}/auth/integrations/mcp_callback"
+
+    handler = MCPOAuthHandler(
+        client_id=meta["client_id"],
+        client_secret=meta.get("client_secret", ""),
+        redirect_uri=redirect_uri,
+        authorize_url=meta["authorize_url"],
+        token_url=meta["token_url"],
+        revoke_url=meta.get("revoke_url"),
+        resource_url=meta.get("resource_url"),
+    )
+
+    try:
+        credentials = await handler.exchange_code_for_tokens(
+            request.code, valid_state.scopes, valid_state.code_verifier
+        )
+    except Exception as e:
+        raise fastapi.HTTPException(
+            status_code=400,
+            detail=f"OAuth token exchange failed: {e}",
+        )
+
+    # Enrich credential metadata for future lookup and token refresh
+    if credentials.metadata is None:
+        credentials.metadata = {}
+    credentials.metadata["mcp_server_url"] = meta["server_url"]
+    credentials.metadata["mcp_client_id"] = meta["client_id"]
+    credentials.metadata["mcp_client_secret"] = meta.get("client_secret", "")
+    credentials.metadata["mcp_token_url"] = meta["token_url"]
+    credentials.metadata["mcp_resource_url"] = meta.get("resource_url", "")
+
+    hostname = urlparse(meta["server_url"]).hostname or meta["server_url"]
+    credentials.title = f"MCP: {hostname}"
+
+    # Remove old MCP credentials for the same server to prevent stale token buildup.
+    try:
+        old_creds = await creds_manager.store.get_creds_by_provider(
+            user_id, ProviderName.MCP.value
+        )
+        for old in old_creds:
+            if (
+                isinstance(old, OAuth2Credentials)
+                and old.metadata.get("mcp_server_url") == meta["server_url"]
+            ):
+                await creds_manager.store.delete_creds_by_id(user_id, old.id)
+                logger.info(
+                    f"Removed old MCP credential {old.id} for {meta['server_url']}"
+                )
+    except Exception:
+        logger.debug("Could not clean up old MCP credentials", exc_info=True)
+
+    await creds_manager.create(user_id, credentials)
+
+    return CredentialsMetaResponse(
+        id=credentials.id,
+        provider=credentials.provider,
+        type=credentials.type,
+        title=credentials.title,
+        scopes=credentials.scopes,
+        username=credentials.username,
+        host=credentials.metadata.get("mcp_server_url"),
+    )
+
+
+# ======================== Helpers ======================== #
+
+
+async def _register_mcp_client(
+    registration_endpoint: str,
+    redirect_uri: str,
+    server_url: str,
+) -> dict[str, Any] | None:
+    """Attempt Dynamic Client Registration (RFC 7591) with an MCP auth server."""
+    try:
+        response = await Requests(raise_for_status=True).post(
+            registration_endpoint,
+            json={
+                "client_name": "AutoGPT Platform",
+                "redirect_uris": [redirect_uri],
+                "grant_types": ["authorization_code"],
+                "response_types": ["code"],
+                "token_endpoint_auth_method": "client_secret_post",
+            },
+        )
+        data = response.json()
+        if isinstance(data, dict) and "client_id" in data:
+            return data
+        return None
+    except Exception as e:
+        logger.warning(f"Dynamic client registration failed for {server_url}: {e}")
+        return None

autogpt_platform/backend/backend/api/features/mcp/test_routes.py

@@ -0,0 +1,436 @@
+"""Tests for MCP API routes.
+
+Uses httpx.AsyncClient with ASGITransport instead of fastapi.testclient.TestClient
+to avoid creating blocking portals that can corrupt pytest-asyncio's session event loop.
+"""
+
+from unittest.mock import AsyncMock, patch
+
+import fastapi
+import httpx
+import pytest
+import pytest_asyncio
+from autogpt_libs.auth import get_user_id
+
+from backend.api.features.mcp.routes import router
+from backend.blocks.mcp.client import MCPClientError, MCPTool
+from backend.util.request import HTTPClientError
+
+app = fastapi.FastAPI()
+app.include_router(router)
+app.dependency_overrides[get_user_id] = lambda: "test-user-id"
+
+
+@pytest_asyncio.fixture(scope="module")
+async def client():
+    transport = httpx.ASGITransport(app=app)
+    async with httpx.AsyncClient(transport=transport, base_url="http://test") as c:
+        yield c
+
+
+class TestDiscoverTools:
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_success(self, client):
+        mock_tools = [
+            MCPTool(
+                name="get_weather",
+                description="Get weather for a city",
+                input_schema={
+                    "type": "object",
+                    "properties": {"city": {"type": "string"}},
+                    "required": ["city"],
+                },
+            ),
+            MCPTool(
+                name="add_numbers",
+                description="Add two numbers",
+                input_schema={
+                    "type": "object",
+                    "properties": {
+                        "a": {"type": "number"},
+                        "b": {"type": "number"},
+                    },
+                },
+            ),
+        ]
+
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+        ):
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[])
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(
+                return_value={
+                    "protocolVersion": "2025-03-26",
+                    "serverInfo": {"name": "test-server"},
+                }
+            )
+            instance.list_tools = AsyncMock(return_value=mock_tools)
+
+            response = await client.post(
+                "/discover-tools",
+                json={"server_url": "https://mcp.example.com/mcp"},
+            )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert len(data["tools"]) == 2
+        assert data["tools"][0]["name"] == "get_weather"
+        assert data["tools"][1]["name"] == "add_numbers"
+        assert data["server_name"] == "test-server"
+        assert data["protocol_version"] == "2025-03-26"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_with_auth_token(self, client):
+        with patch("backend.api.features.mcp.routes.MCPClient") as MockClient:
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(
+                return_value={"serverInfo": {}, "protocolVersion": "2025-03-26"}
+            )
+            instance.list_tools = AsyncMock(return_value=[])
+
+            response = await client.post(
+                "/discover-tools",
+                json={
+                    "server_url": "https://mcp.example.com/mcp",
+                    "auth_token": "my-secret-token",
+                },
+            )
+
+        assert response.status_code == 200
+        MockClient.assert_called_once_with(
+            "https://mcp.example.com/mcp",
+            auth_token="my-secret-token",
+        )
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_auto_uses_stored_credential(self, client):
+        """When no explicit token is given, stored MCP credentials are used."""
+        from pydantic import SecretStr
+
+        from backend.data.model import OAuth2Credentials
+
+        stored_cred = OAuth2Credentials(
+            provider="mcp",
+            title="MCP: example.com",
+            access_token=SecretStr("stored-token-123"),
+            refresh_token=None,
+            access_token_expires_at=None,
+            refresh_token_expires_at=None,
+            scopes=[],
+            metadata={"mcp_server_url": "https://mcp.example.com/mcp"},
+        )
+
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+        ):
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[stored_cred])
+            mock_cm.refresh_if_needed = AsyncMock(return_value=stored_cred)
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(
+                return_value={"serverInfo": {}, "protocolVersion": "2025-03-26"}
+            )
+            instance.list_tools = AsyncMock(return_value=[])
+
+            response = await client.post(
+                "/discover-tools",
+                json={"server_url": "https://mcp.example.com/mcp"},
+            )
+
+        assert response.status_code == 200
+        MockClient.assert_called_once_with(
+            "https://mcp.example.com/mcp",
+            auth_token="stored-token-123",
+        )
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_mcp_error(self, client):
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+        ):
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[])
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(
+                side_effect=MCPClientError("Connection refused")
+            )
+
+            response = await client.post(
+                "/discover-tools",
+                json={"server_url": "https://bad-server.example.com/mcp"},
+            )
+
+        assert response.status_code == 502
+        assert "Connection refused" in response.json()["detail"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_generic_error(self, client):
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+        ):
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[])
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(side_effect=Exception("Network timeout"))
+
+            response = await client.post(
+                "/discover-tools",
+                json={"server_url": "https://timeout.example.com/mcp"},
+            )
+
+        assert response.status_code == 502
+        assert "Failed to connect" in response.json()["detail"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_auth_required(self, client):
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+        ):
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[])
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(
+                side_effect=HTTPClientError("HTTP 401 Error: Unauthorized", 401)
+            )
+
+            response = await client.post(
+                "/discover-tools",
+                json={"server_url": "https://auth-server.example.com/mcp"},
+            )
+
+        assert response.status_code == 401
+        assert "requires authentication" in response.json()["detail"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_forbidden(self, client):
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+        ):
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[])
+            instance = MockClient.return_value
+            instance.initialize = AsyncMock(
+                side_effect=HTTPClientError("HTTP 403 Error: Forbidden", 403)
+            )
+
+            response = await client.post(
+                "/discover-tools",
+                json={"server_url": "https://auth-server.example.com/mcp"},
+            )
+
+        assert response.status_code == 401
+        assert "requires authentication" in response.json()["detail"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_tools_missing_url(self, client):
+        response = await client.post("/discover-tools", json={})
+        assert response.status_code == 422
+
+
+class TestOAuthLogin:
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_oauth_login_success(self, client):
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+            patch("backend.api.features.mcp.routes.settings") as mock_settings,
+            patch(
+                "backend.api.features.mcp.routes._register_mcp_client"
+            ) as mock_register,
+        ):
+            instance = MockClient.return_value
+            instance.discover_auth = AsyncMock(
+                return_value={
+                    "authorization_servers": ["https://auth.sentry.io"],
+                    "resource": "https://mcp.sentry.dev/mcp",
+                    "scopes_supported": ["openid"],
+                }
+            )
+            instance.discover_auth_server_metadata = AsyncMock(
+                return_value={
+                    "authorization_endpoint": "https://auth.sentry.io/authorize",
+                    "token_endpoint": "https://auth.sentry.io/token",
+                    "registration_endpoint": "https://auth.sentry.io/register",
+                }
+            )
+            mock_register.return_value = {
+                "client_id": "registered-client-id",
+                "client_secret": "registered-secret",
+            }
+            mock_cm.store.store_state_token = AsyncMock(
+                return_value=("state-token-123", "code-challenge-abc")
+            )
+            mock_settings.config.frontend_base_url = "http://localhost:3000"
+
+            response = await client.post(
+                "/oauth/login",
+                json={"server_url": "https://mcp.sentry.dev/mcp"},
+            )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert "login_url" in data
+        assert data["state_token"] == "state-token-123"
+        assert "auth.sentry.io/authorize" in data["login_url"]
+        assert "registered-client-id" in data["login_url"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_oauth_login_no_oauth_support(self, client):
+        with patch("backend.api.features.mcp.routes.MCPClient") as MockClient:
+            instance = MockClient.return_value
+            instance.discover_auth = AsyncMock(return_value=None)
+            instance.discover_auth_server_metadata = AsyncMock(return_value=None)
+
+            response = await client.post(
+                "/oauth/login",
+                json={"server_url": "https://simple-server.example.com/mcp"},
+            )
+
+        assert response.status_code == 400
+        assert "does not advertise OAuth" in response.json()["detail"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_oauth_login_fallback_to_public_client(self, client):
+        """When DCR is unavailable, falls back to default public client ID."""
+        with (
+            patch("backend.api.features.mcp.routes.MCPClient") as MockClient,
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+            patch("backend.api.features.mcp.routes.settings") as mock_settings,
+        ):
+            instance = MockClient.return_value
+            instance.discover_auth = AsyncMock(
+                return_value={
+                    "authorization_servers": ["https://auth.example.com"],
+                    "resource": "https://mcp.example.com/mcp",
+                }
+            )
+            instance.discover_auth_server_metadata = AsyncMock(
+                return_value={
+                    "authorization_endpoint": "https://auth.example.com/authorize",
+                    "token_endpoint": "https://auth.example.com/token",
+                    # No registration_endpoint
+                }
+            )
+            mock_cm.store.store_state_token = AsyncMock(
+                return_value=("state-abc", "challenge-xyz")
+            )
+            mock_settings.config.frontend_base_url = "http://localhost:3000"
+
+            response = await client.post(
+                "/oauth/login",
+                json={"server_url": "https://mcp.example.com/mcp"},
+            )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert "autogpt-platform" in data["login_url"]
+
+
+class TestOAuthCallback:
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_oauth_callback_success(self, client):
+        from pydantic import SecretStr
+
+        from backend.data.model import OAuth2Credentials
+
+        mock_creds = OAuth2Credentials(
+            provider="mcp",
+            title=None,
+            access_token=SecretStr("access-token-xyz"),
+            refresh_token=None,
+            access_token_expires_at=None,
+            refresh_token_expires_at=None,
+            scopes=[],
+            metadata={
+                "mcp_token_url": "https://auth.sentry.io/token",
+                "mcp_resource_url": "https://mcp.sentry.dev/mcp",
+            },
+        )
+
+        with (
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+            patch("backend.api.features.mcp.routes.settings") as mock_settings,
+            patch("backend.api.features.mcp.routes.MCPOAuthHandler") as MockHandler,
+        ):
+            mock_settings.config.frontend_base_url = "http://localhost:3000"
+
+            # Mock state verification
+            mock_state = AsyncMock()
+            mock_state.state_metadata = {
+                "authorize_url": "https://auth.sentry.io/authorize",
+                "token_url": "https://auth.sentry.io/token",
+                "client_id": "test-client-id",
+                "client_secret": "test-secret",
+                "server_url": "https://mcp.sentry.dev/mcp",
+            }
+            mock_state.scopes = ["openid"]
+            mock_state.code_verifier = "verifier-123"
+            mock_cm.store.verify_state_token = AsyncMock(return_value=mock_state)
+            mock_cm.create = AsyncMock()
+
+            handler_instance = MockHandler.return_value
+            handler_instance.exchange_code_for_tokens = AsyncMock(
+                return_value=mock_creds
+            )
+
+            # Mock old credential cleanup
+            mock_cm.store.get_creds_by_provider = AsyncMock(return_value=[])
+
+            response = await client.post(
+                "/oauth/callback",
+                json={"code": "auth-code-abc", "state_token": "state-token-123"},
+            )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert "id" in data
+        assert data["provider"] == "mcp"
+        assert data["type"] == "oauth2"
+        mock_cm.create.assert_called_once()
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_oauth_callback_invalid_state(self, client):
+        with patch("backend.api.features.mcp.routes.creds_manager") as mock_cm:
+            mock_cm.store.verify_state_token = AsyncMock(return_value=None)
+
+            response = await client.post(
+                "/oauth/callback",
+                json={"code": "auth-code", "state_token": "bad-state"},
+            )
+
+        assert response.status_code == 400
+        assert "Invalid or expired" in response.json()["detail"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_oauth_callback_token_exchange_fails(self, client):
+        with (
+            patch("backend.api.features.mcp.routes.creds_manager") as mock_cm,
+            patch("backend.api.features.mcp.routes.settings") as mock_settings,
+            patch("backend.api.features.mcp.routes.MCPOAuthHandler") as MockHandler,
+        ):
+            mock_settings.config.frontend_base_url = "http://localhost:3000"
+            mock_state = AsyncMock()
+            mock_state.state_metadata = {
+                "authorize_url": "https://auth.example.com/authorize",
+                "token_url": "https://auth.example.com/token",
+                "client_id": "cid",
+                "server_url": "https://mcp.example.com/mcp",
+            }
+            mock_state.scopes = []
+            mock_state.code_verifier = "v"
+            mock_cm.store.verify_state_token = AsyncMock(return_value=mock_state)
+
+            handler_instance = MockHandler.return_value
+            handler_instance.exchange_code_for_tokens = AsyncMock(
+                side_effect=RuntimeError("Token exchange failed")
+            )
+
+            response = await client.post(
+                "/oauth/callback",
+                json={"code": "bad-code", "state_token": "state"},
+            )
+
+        assert response.status_code == 400
+        assert "token exchange failed" in response.json()["detail"].lower()

autogpt_platform/backend/backend/api/rest_api.py

@@ -26,6 +26,7 @@ import backend.api.features.executions.review.routes
 import backend.api.features.library.db
 import backend.api.features.library.model
 import backend.api.features.library.routes
+import backend.api.features.mcp.routes as mcp_routes
 import backend.api.features.oauth
 import backend.api.features.otto.routes
 import backend.api.features.postmark.postmark
@@ -343,6 +344,11 @@ app.include_router(
     tags=["workspace"],
     prefix="/api/workspace",
 )
+app.include_router(
+    mcp_routes.router,
+    tags=["v2", "mcp"],
+    prefix="/api/mcp",
+)
 app.include_router(
     backend.api.features.oauth.router,
     tags=["oauth"],

autogpt_platform/backend/backend/blocks/mcp/block.py

@@ -0,0 +1,301 @@
+"""
+MCP (Model Context Protocol) Tool Block.
+
+A single dynamic block that can connect to any MCP server, discover available tools,
+and execute them. Works like AgentExecutorBlock — the user selects a tool from a
+dropdown and the input/output schema adapts dynamically.
+"""
+
+import json
+import logging
+from typing import Any, Literal
+
+from pydantic import SecretStr
+
+from backend.blocks.mcp.client import MCPClient, MCPClientError
+from backend.data.block import (
+    Block,
+    BlockCategory,
+    BlockInput,
+    BlockOutput,
+    BlockSchemaInput,
+    BlockSchemaOutput,
+    BlockType,
+)
+from backend.data.model import (
+    CredentialsField,
+    CredentialsMetaInput,
+    OAuth2Credentials,
+    SchemaField,
+)
+from backend.integrations.providers import ProviderName
+from backend.util.json import validate_with_jsonschema
+
+logger = logging.getLogger(__name__)
+
+TEST_CREDENTIALS = OAuth2Credentials(
+    id="test-mcp-cred",
+    provider="mcp",
+    access_token=SecretStr("mock-mcp-token"),
+    refresh_token=SecretStr("mock-refresh"),
+    scopes=[],
+    title="Mock MCP credential",
+)
+TEST_CREDENTIALS_INPUT = {
+    "provider": TEST_CREDENTIALS.provider,
+    "id": TEST_CREDENTIALS.id,
+    "type": TEST_CREDENTIALS.type,
+    "title": TEST_CREDENTIALS.title,
+}
+
+
+MCPCredentials = CredentialsMetaInput[Literal[ProviderName.MCP], Literal["oauth2"]]
+
+
+class MCPToolBlock(Block):
+    """
+    A block that connects to an MCP server, lets the user pick a tool,
+    and executes it with dynamic input/output schema.
+
+    The flow:
+    1. User provides an MCP server URL (and optional credentials)
+    2. Frontend calls the backend to get tool list from that URL
+    3. User selects a tool from a dropdown (available_tools)
+    4. The block's input schema updates to reflect the selected tool's parameters
+    5. On execution, the block calls the MCP server to run the tool
+    """
+
+    class Input(BlockSchemaInput):
+        server_url: str = SchemaField(
+            description="URL of the MCP server (Streamable HTTP endpoint)",
+            placeholder="https://mcp.example.com/mcp",
+        )
+        credentials: MCPCredentials = CredentialsField(
+            discriminator="server_url",
+            description="MCP server OAuth credentials",
+            default={},
+        )
+        selected_tool: str = SchemaField(
+            description="The MCP tool to execute",
+            placeholder="Select a tool",
+            default="",
+        )
+        tool_input_schema: dict[str, Any] = SchemaField(
+            description="JSON Schema for the selected tool's input parameters. "
+            "Populated automatically when a tool is selected.",
+            default={},
+            hidden=True,
+        )
+
+        tool_arguments: dict[str, Any] = SchemaField(
+            description="Arguments to pass to the selected MCP tool. "
+            "The fields here are defined by the tool's input schema.",
+            default={},
+        )
+
+        @classmethod
+        def get_input_schema(cls, data: BlockInput) -> dict[str, Any]:
+            """Return the tool's input schema so the builder UI renders dynamic fields."""
+            return data.get("tool_input_schema", {})
+
+        @classmethod
+        def get_input_defaults(cls, data: BlockInput) -> BlockInput:
+            """Return the current tool_arguments as defaults for the dynamic fields."""
+            return data.get("tool_arguments", {})
+
+        @classmethod
+        def get_missing_input(cls, data: BlockInput) -> set[str]:
+            """Check which required tool arguments are missing."""
+            required_fields = cls.get_input_schema(data).get("required", [])
+            tool_arguments = data.get("tool_arguments", {})
+            return set(required_fields) - set(tool_arguments)
+
+        @classmethod
+        def get_mismatch_error(cls, data: BlockInput) -> str | None:
+            """Validate tool_arguments against the tool's input schema."""
+            tool_schema = cls.get_input_schema(data)
+            if not tool_schema:
+                return None
+            tool_arguments = data.get("tool_arguments", {})
+            return validate_with_jsonschema(tool_schema, tool_arguments)
+
+    class Output(BlockSchemaOutput):
+        result: Any = SchemaField(description="The result returned by the MCP tool")
+        error: str = SchemaField(description="Error message if the tool call failed")
+
+    def __init__(self):
+        super().__init__(
+            id="a0a4b1c2-d3e4-4f56-a7b8-c9d0e1f2a3b4",
+            description="Connect to any MCP server and execute its tools. "
+            "Provide a server URL, select a tool, and pass arguments dynamically.",
+            categories={BlockCategory.DEVELOPER_TOOLS},
+            input_schema=MCPToolBlock.Input,
+            output_schema=MCPToolBlock.Output,
+            block_type=BlockType.MCP_TOOL,
+            test_credentials=TEST_CREDENTIALS,
+            test_input={
+                "server_url": "https://mcp.example.com/mcp",
+                "credentials": TEST_CREDENTIALS_INPUT,
+                "selected_tool": "get_weather",
+                "tool_input_schema": {
+                    "type": "object",
+                    "properties": {"city": {"type": "string"}},
+                    "required": ["city"],
+                },
+                "tool_arguments": {"city": "London"},
+            },
+            test_output=[
+                (
+                    "result",
+                    {"weather": "sunny", "temperature": 20},
+                ),
+            ],
+            test_mock={
+                "_call_mcp_tool": lambda *a, **kw: {
+                    "weather": "sunny",
+                    "temperature": 20,
+                },
+            },
+        )
+
+    async def _call_mcp_tool(
+        self,
+        server_url: str,
+        tool_name: str,
+        arguments: dict[str, Any],
+        auth_token: str | None = None,
+    ) -> Any:
+        """Call a tool on the MCP server. Extracted for easy mocking in tests."""
+        client = MCPClient(server_url, auth_token=auth_token)
+        await client.initialize()
+        result = await client.call_tool(tool_name, arguments)
+
+        if result.is_error:
+            error_text = ""
+            for item in result.content:
+                if item.get("type") == "text":
+                    error_text += item.get("text", "")
+            raise MCPClientError(
+                f"MCP tool '{tool_name}' returned an error: "
+                f"{error_text or 'Unknown error'}"
+            )
+
+        # Extract text content from the result
+        output_parts = []
+        for item in result.content:
+            if item.get("type") == "text":
+                text = item.get("text", "")
+                # Try to parse as JSON for structured output
+                try:
+                    output_parts.append(json.loads(text))
+                except (json.JSONDecodeError, ValueError):
+                    output_parts.append(text)
+            elif item.get("type") == "image":
+                output_parts.append(
+                    {
+                        "type": "image",
+                        "data": item.get("data"),
+                        "mimeType": item.get("mimeType"),
+                    }
+                )
+            elif item.get("type") == "resource":
+                output_parts.append(item.get("resource", {}))
+
+        # If single result, unwrap
+        if len(output_parts) == 1:
+            return output_parts[0]
+        return output_parts if output_parts else None
+
+    @staticmethod
+    async def _auto_lookup_credential(
+        user_id: str, server_url: str
+    ) -> "OAuth2Credentials | None":
+        """Auto-lookup stored MCP credential for a server URL.
+
+        This is a fallback for nodes that don't have ``credentials`` explicitly
+        set (e.g. nodes created before the credential field was wired up).
+        """
+        from backend.integrations.creds_manager import IntegrationCredentialsManager
+        from backend.integrations.providers import ProviderName
+
+        try:
+            mgr = IntegrationCredentialsManager()
+            mcp_creds = await mgr.store.get_creds_by_provider(
+                user_id, ProviderName.MCP.value
+            )
+            best: OAuth2Credentials | None = None
+            for cred in mcp_creds:
+                if (
+                    isinstance(cred, OAuth2Credentials)
+                    and cred.metadata.get("mcp_server_url") == server_url
+                ):
+                    if best is None or (
+                        (cred.access_token_expires_at or 0)
+                        > (best.access_token_expires_at or 0)
+                    ):
+                        best = cred
+            if best:
+                best = await mgr.refresh_if_needed(user_id, best)
+                logger.info(
+                    "Auto-resolved MCP credential %s for %s", best.id, server_url
+                )
+            return best
+        except Exception:
+            logger.warning("Auto-lookup MCP credential failed", exc_info=True)
+            return None
+
+    async def run(
+        self,
+        input_data: Input,
+        *,
+        user_id: str,
+        credentials: OAuth2Credentials | None = None,
+        **kwargs,
+    ) -> BlockOutput:
+        if not input_data.server_url:
+            yield "error", "MCP server URL is required"
+            return
+
+        if not input_data.selected_tool:
+            yield "error", "No tool selected. Please select a tool from the dropdown."
+            return
+
+        # Validate required tool arguments before calling the server.
+        # The executor-level validation is bypassed for MCP blocks because
+        # get_input_defaults() flattens tool_arguments, stripping tool_input_schema
+        # from the validation context.
+        required = set(input_data.tool_input_schema.get("required", []))
+        if required:
+            missing = required - set(input_data.tool_arguments.keys())
+            if missing:
+                yield "error", (
+                    f"Missing required argument(s): {', '.join(sorted(missing))}. "
+                    f"Please fill in all required fields marked with * in the block form."
+                )
+                return
+
+        # If no credentials were injected by the executor (e.g. legacy nodes
+        # that don't have the credentials field set), try to auto-lookup
+        # the stored MCP credential for this server URL.
+        if credentials is None:
+            credentials = await self._auto_lookup_credential(
+                user_id, input_data.server_url
+            )
+
+        auth_token = (
+            credentials.access_token.get_secret_value() if credentials else None
+        )
+
+        try:
+            result = await self._call_mcp_tool(
+                server_url=input_data.server_url,
+                tool_name=input_data.selected_tool,
+                arguments=input_data.tool_arguments,
+                auth_token=auth_token,
+            )
+            yield "result", result
+        except MCPClientError as e:
+            yield "error", str(e)
+        except Exception as e:
+            logger.exception(f"MCP tool call failed: {e}")
+            yield "error", f"MCP tool call failed: {str(e)}"

autogpt_platform/backend/backend/blocks/mcp/client.py

@@ -0,0 +1,323 @@
+"""
+MCP (Model Context Protocol) HTTP client.
+
+Implements the MCP Streamable HTTP transport for listing tools and calling tools
+on remote MCP servers. Uses JSON-RPC 2.0 over HTTP POST.
+
+Handles both JSON and SSE (text/event-stream) response formats per the MCP spec.
+
+Reference: https://modelcontextprotocol.io/specification/2025-03-26/basic/transports
+"""
+
+import json
+import logging
+from dataclasses import dataclass, field
+from typing import Any
+
+from backend.util.request import Requests
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class MCPTool:
+    """Represents an MCP tool discovered from a server."""
+
+    name: str
+    description: str
+    input_schema: dict[str, Any]
+
+
+@dataclass
+class MCPCallResult:
+    """Result from calling an MCP tool."""
+
+    content: list[dict[str, Any]] = field(default_factory=list)
+    is_error: bool = False
+
+
+class MCPClientError(Exception):
+    """Raised when an MCP protocol error occurs."""
+
+    pass
+
+
+class MCPClient:
+    """
+    Async HTTP client for the MCP Streamable HTTP transport.
+
+    Communicates with MCP servers using JSON-RPC 2.0 over HTTP POST.
+    Supports optional Bearer token authentication.
+    """
+
+    def __init__(
+        self,
+        server_url: str,
+        auth_token: str | None = None,
+    ):
+        self.server_url = server_url.rstrip("/")
+        self.auth_token = auth_token
+        self._request_id = 0
+        self._session_id: str | None = None
+
+    def _next_id(self) -> int:
+        self._request_id += 1
+        return self._request_id
+
+    def _build_headers(self) -> dict[str, str]:
+        headers = {
+            "Content-Type": "application/json",
+            "Accept": "application/json, text/event-stream",
+        }
+        if self.auth_token:
+            headers["Authorization"] = f"Bearer {self.auth_token}"
+        if self._session_id:
+            headers["Mcp-Session-Id"] = self._session_id
+        return headers
+
+    def _build_jsonrpc_request(
+        self, method: str, params: dict[str, Any] | None = None
+    ) -> dict[str, Any]:
+        req: dict[str, Any] = {
+            "jsonrpc": "2.0",
+            "method": method,
+            "id": self._next_id(),
+        }
+        if params is not None:
+            req["params"] = params
+        return req
+
+    @staticmethod
+    def _parse_sse_response(text: str) -> dict[str, Any]:
+        """Parse an SSE (text/event-stream) response body into JSON-RPC data.
+
+        MCP servers may return responses as SSE with format:
+            event: message
+            data: {"jsonrpc":"2.0","result":{...},"id":1}
+
+        We extract the last `data:` line that contains a JSON-RPC response
+        (i.e. has an "id" field), which is the reply to our request.
+        """
+        last_data: dict[str, Any] | None = None
+        for line in text.splitlines():
+            stripped = line.strip()
+            if stripped.startswith("data:"):
+                payload = stripped[len("data:") :].strip()
+                if not payload:
+                    continue
+                try:
+                    parsed = json.loads(payload)
+                    # Only keep JSON-RPC responses (have "id"), skip notifications
+                    if isinstance(parsed, dict) and "id" in parsed:
+                        last_data = parsed
+                except (json.JSONDecodeError, ValueError):
+                    continue
+        if last_data is None:
+            raise MCPClientError("No JSON-RPC response found in SSE stream")
+        return last_data
+
+    async def _send_request(
+        self, method: str, params: dict[str, Any] | None = None
+    ) -> Any:
+        """Send a JSON-RPC request to the MCP server and return the result.
+
+        Handles both ``application/json`` and ``text/event-stream`` responses
+        as required by the MCP Streamable HTTP transport specification.
+        """
+        payload = self._build_jsonrpc_request(method, params)
+        headers = self._build_headers()
+
+        requests = Requests(
+            raise_for_status=True,
+            extra_headers=headers,
+        )
+        response = await requests.post(self.server_url, json=payload)
+
+        # Capture session ID from response (MCP Streamable HTTP transport)
+        session_id = response.headers.get("Mcp-Session-Id")
+        if session_id:
+            self._session_id = session_id
+
+        content_type = response.headers.get("content-type", "")
+        if "text/event-stream" in content_type:
+            body = self._parse_sse_response(response.text())
+        else:
+            try:
+                body = response.json()
+            except Exception as e:
+                raise MCPClientError(
+                    f"MCP server returned non-JSON response: {e}"
+                ) from e
+
+        if not isinstance(body, dict):
+            raise MCPClientError(
+                f"MCP server returned unexpected JSON type: {type(body).__name__}"
+            )
+
+        # Handle JSON-RPC error
+        if "error" in body:
+            error = body["error"]
+            if isinstance(error, dict):
+                raise MCPClientError(
+                    f"MCP server error [{error.get('code', '?')}]: "
+                    f"{error.get('message', 'Unknown error')}"
+                )
+            raise MCPClientError(f"MCP server error: {error}")
+
+        return body.get("result")
+
+    async def _send_notification(self, method: str) -> None:
+        """Send a JSON-RPC notification (no id, no response expected)."""
+        headers = self._build_headers()
+        notification = {"jsonrpc": "2.0", "method": method}
+        requests = Requests(
+            raise_for_status=False,
+            extra_headers=headers,
+        )
+        await requests.post(self.server_url, json=notification)
+
+    async def discover_auth(self) -> dict[str, Any] | None:
+        """Probe the MCP server's OAuth metadata (RFC 9728 / MCP spec).
+
+        Returns ``None`` if the server doesn't require auth, otherwise returns
+        a dict with:
+          - ``authorization_servers``: list of authorization server URLs
+          - ``resource``: the resource indicator URL (usually the MCP endpoint)
+          - ``scopes_supported``: optional list of supported scopes
+
+        The caller can then fetch the authorization server metadata to get
+        ``authorization_endpoint``, ``token_endpoint``, etc.
+        """
+        from urllib.parse import urlparse
+
+        parsed = urlparse(self.server_url)
+        base = f"{parsed.scheme}://{parsed.netloc}"
+
+        # Build candidates for protected-resource metadata (per RFC 9728)
+        path = parsed.path.rstrip("/")
+        candidates = []
+        if path and path != "/":
+            candidates.append(f"{base}/.well-known/oauth-protected-resource{path}")
+        candidates.append(f"{base}/.well-known/oauth-protected-resource")
+
+        requests = Requests(
+            raise_for_status=False,
+        )
+        for url in candidates:
+            try:
+                resp = await requests.get(url)
+                if resp.status == 200:
+                    data = resp.json()
+                    if isinstance(data, dict) and "authorization_servers" in data:
+                        return data
+            except Exception:
+                continue
+
+        return None
+
+    async def discover_auth_server_metadata(
+        self, auth_server_url: str
+    ) -> dict[str, Any] | None:
+        """Fetch the OAuth Authorization Server Metadata (RFC 8414).
+
+        Given an authorization server URL, returns a dict with:
+          - ``authorization_endpoint``
+          - ``token_endpoint``
+          - ``registration_endpoint`` (for dynamic client registration)
+          - ``scopes_supported``
+          - ``code_challenge_methods_supported``
+          - etc.
+        """
+        from urllib.parse import urlparse
+
+        parsed = urlparse(auth_server_url)
+        base = f"{parsed.scheme}://{parsed.netloc}"
+        path = parsed.path.rstrip("/")
+
+        # Try standard metadata endpoints (RFC 8414 and OpenID Connect)
+        candidates = []
+        if path and path != "/":
+            candidates.append(f"{base}/.well-known/oauth-authorization-server{path}")
+        candidates.append(f"{base}/.well-known/oauth-authorization-server")
+        candidates.append(f"{base}/.well-known/openid-configuration")
+
+        requests = Requests(
+            raise_for_status=False,
+        )
+        for url in candidates:
+            try:
+                resp = await requests.get(url)
+                if resp.status == 200:
+                    data = resp.json()
+                    if isinstance(data, dict) and "authorization_endpoint" in data:
+                        return data
+            except Exception:
+                continue
+
+        return None
+
+    async def initialize(self) -> dict[str, Any]:
+        """
+        Send the MCP initialize request.
+
+        This is required by the MCP protocol before any other requests.
+        Returns the server's capabilities.
+        """
+        result = await self._send_request(
+            "initialize",
+            {
+                "protocolVersion": "2025-03-26",
+                "capabilities": {},
+                "clientInfo": {"name": "AutoGPT-Platform", "version": "1.0.0"},
+            },
+        )
+        # Send initialized notification (no response expected)
+        await self._send_notification("notifications/initialized")
+
+        return result or {}
+
+    async def list_tools(self) -> list[MCPTool]:
+        """
+        Discover available tools from the MCP server.
+
+        Returns a list of MCPTool objects with name, description, and input schema.
+        """
+        result = await self._send_request("tools/list")
+        if not result or "tools" not in result:
+            return []
+
+        tools = []
+        for tool_data in result["tools"]:
+            tools.append(
+                MCPTool(
+                    name=tool_data.get("name", ""),
+                    description=tool_data.get("description", ""),
+                    input_schema=tool_data.get("inputSchema", {}),
+                )
+            )
+        return tools
+
+    async def call_tool(
+        self, tool_name: str, arguments: dict[str, Any]
+    ) -> MCPCallResult:
+        """
+        Call a tool on the MCP server.
+
+        Args:
+            tool_name: The name of the tool to call.
+            arguments: The arguments to pass to the tool.
+
+        Returns:
+            MCPCallResult with the tool's response content.
+        """
+        result = await self._send_request(
+            "tools/call",
+            {"name": tool_name, "arguments": arguments},
+        )
+        if not result:
+            return MCPCallResult(is_error=True)
+
+        return MCPCallResult(
+            content=result.get("content", []),
+            is_error=result.get("isError", False),
+        )

autogpt_platform/backend/backend/blocks/mcp/oauth.py

@@ -0,0 +1,204 @@
+"""
+MCP OAuth handler for MCP servers that use OAuth 2.1 authorization.
+
+Unlike other OAuth handlers (GitHub, Google, etc.) where endpoints are fixed,
+MCP servers have dynamic endpoints discovered via RFC 9728 / RFC 8414 metadata.
+This handler accepts those endpoints at construction time.
+"""
+
+import logging
+import time
+import urllib.parse
+from typing import ClassVar, Optional
+
+from pydantic import SecretStr
+
+from backend.data.model import OAuth2Credentials
+from backend.integrations.oauth.base import BaseOAuthHandler
+from backend.integrations.providers import ProviderName
+from backend.util.request import Requests
+
+logger = logging.getLogger(__name__)
+
+
+class MCPOAuthHandler(BaseOAuthHandler):
+    """
+    OAuth handler for MCP servers with dynamically-discovered endpoints.
+
+    Construction requires the authorization and token endpoint URLs,
+    which are obtained via MCP OAuth metadata discovery
+    (``MCPClient.discover_auth`` + ``discover_auth_server_metadata``).
+    """
+
+    PROVIDER_NAME: ClassVar[ProviderName | str] = ProviderName.MCP
+    DEFAULT_SCOPES: ClassVar[list[str]] = []
+
+    def __init__(
+        self,
+        client_id: str,
+        client_secret: str,
+        redirect_uri: str,
+        *,
+        authorize_url: str,
+        token_url: str,
+        revoke_url: str | None = None,
+        resource_url: str | None = None,
+    ):
+        self.client_id = client_id
+        self.client_secret = client_secret
+        self.redirect_uri = redirect_uri
+        self.authorize_url = authorize_url
+        self.token_url = token_url
+        self.revoke_url = revoke_url
+        self.resource_url = resource_url
+
+    def get_login_url(
+        self,
+        scopes: list[str],
+        state: str,
+        code_challenge: Optional[str],
+    ) -> str:
+        scopes = self.handle_default_scopes(scopes)
+
+        params: dict[str, str] = {
+            "response_type": "code",
+            "client_id": self.client_id,
+            "redirect_uri": self.redirect_uri,
+            "state": state,
+        }
+        if scopes:
+            params["scope"] = " ".join(scopes)
+        # PKCE (S256) — included when the caller provides a code_challenge
+        if code_challenge:
+            params["code_challenge"] = code_challenge
+            params["code_challenge_method"] = "S256"
+        # MCP spec requires resource indicator (RFC 8707)
+        if self.resource_url:
+            params["resource"] = self.resource_url
+
+        return f"{self.authorize_url}?{urllib.parse.urlencode(params)}"
+
+    async def exchange_code_for_tokens(
+        self,
+        code: str,
+        scopes: list[str],
+        code_verifier: Optional[str],
+    ) -> OAuth2Credentials:
+        data: dict[str, str] = {
+            "grant_type": "authorization_code",
+            "code": code,
+            "redirect_uri": self.redirect_uri,
+            "client_id": self.client_id,
+        }
+        if self.client_secret:
+            data["client_secret"] = self.client_secret
+        if code_verifier:
+            data["code_verifier"] = code_verifier
+        if self.resource_url:
+            data["resource"] = self.resource_url
+
+        response = await Requests(raise_for_status=True).post(
+            self.token_url,
+            data=data,
+            headers={"Content-Type": "application/x-www-form-urlencoded"},
+        )
+        tokens = response.json()
+
+        if "error" in tokens:
+            raise RuntimeError(
+                f"Token exchange failed: {tokens.get('error_description', tokens['error'])}"
+            )
+
+        if "access_token" not in tokens:
+            raise RuntimeError("OAuth token response missing 'access_token' field")
+
+        now = int(time.time())
+        expires_in = tokens.get("expires_in")
+
+        return OAuth2Credentials(
+            provider=self.PROVIDER_NAME,
+            title=None,
+            access_token=SecretStr(tokens["access_token"]),
+            refresh_token=(
+                SecretStr(tokens["refresh_token"])
+                if tokens.get("refresh_token")
+                else None
+            ),
+            access_token_expires_at=now + expires_in if expires_in else None,
+            refresh_token_expires_at=None,
+            scopes=scopes,
+            metadata={
+                "mcp_token_url": self.token_url,
+                "mcp_resource_url": self.resource_url,
+            },
+        )
+
+    async def _refresh_tokens(
+        self, credentials: OAuth2Credentials
+    ) -> OAuth2Credentials:
+        if not credentials.refresh_token:
+            raise ValueError("No refresh token available for MCP OAuth credentials")
+
+        data: dict[str, str] = {
+            "grant_type": "refresh_token",
+            "refresh_token": credentials.refresh_token.get_secret_value(),
+            "client_id": self.client_id,
+        }
+        if self.client_secret:
+            data["client_secret"] = self.client_secret
+        if self.resource_url:
+            data["resource"] = self.resource_url
+
+        response = await Requests(raise_for_status=True).post(
+            self.token_url,
+            data=data,
+            headers={"Content-Type": "application/x-www-form-urlencoded"},
+        )
+        tokens = response.json()
+
+        if "error" in tokens:
+            raise RuntimeError(
+                f"Token refresh failed: {tokens.get('error_description', tokens['error'])}"
+            )
+
+        if "access_token" not in tokens:
+            raise RuntimeError("OAuth refresh response missing 'access_token' field")
+
+        now = int(time.time())
+        expires_in = tokens.get("expires_in")
+
+        return OAuth2Credentials(
+            id=credentials.id,
+            provider=self.PROVIDER_NAME,
+            title=credentials.title,
+            access_token=SecretStr(tokens["access_token"]),
+            refresh_token=(
+                SecretStr(tokens["refresh_token"])
+                if tokens.get("refresh_token")
+                else credentials.refresh_token
+            ),
+            access_token_expires_at=now + expires_in if expires_in else None,
+            refresh_token_expires_at=credentials.refresh_token_expires_at,
+            scopes=credentials.scopes,
+            metadata=credentials.metadata,
+        )
+
+    async def revoke_tokens(self, credentials: OAuth2Credentials) -> bool:
+        if not self.revoke_url:
+            return False
+
+        try:
+            data = {
+                "token": credentials.access_token.get_secret_value(),
+                "token_type_hint": "access_token",
+                "client_id": self.client_id,
+            }
+            await Requests().post(
+                self.revoke_url,
+                data=data,
+                headers={"Content-Type": "application/x-www-form-urlencoded"},
+            )
+            return True
+        except Exception:
+            logger.warning("Failed to revoke MCP OAuth tokens", exc_info=True)
+            return False

autogpt_platform/backend/backend/blocks/mcp/test_e2e.py

@@ -0,0 +1,109 @@
+"""
+End-to-end tests against a real public MCP server.
+
+These tests hit the OpenAI docs MCP server (https://developers.openai.com/mcp)
+which is publicly accessible without authentication and returns SSE responses.
+
+Mark: These are tagged with ``@pytest.mark.e2e`` so they can be run/skipped
+independently of the rest of the test suite (they require network access).
+"""
+
+import json
+import os
+
+import pytest
+
+from backend.blocks.mcp.client import MCPClient
+
+# Public MCP server that requires no authentication
+OPENAI_DOCS_MCP_URL = "https://developers.openai.com/mcp"
+
+# Skip all tests in this module unless RUN_E2E env var is set
+pytestmark = pytest.mark.skipif(
+    not os.environ.get("RUN_E2E"), reason="set RUN_E2E=1 to run e2e tests"
+)
+
+
+class TestRealMCPServer:
+    """Tests against the live OpenAI docs MCP server."""
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_initialize(self):
+        """Verify we can complete the MCP handshake with a real server."""
+        client = MCPClient(OPENAI_DOCS_MCP_URL)
+        result = await client.initialize()
+
+        assert result["protocolVersion"] == "2025-03-26"
+        assert "serverInfo" in result
+        assert result["serverInfo"]["name"] == "openai-docs-mcp"
+        assert "tools" in result.get("capabilities", {})
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_list_tools(self):
+        """Verify we can discover tools from a real MCP server."""
+        client = MCPClient(OPENAI_DOCS_MCP_URL)
+        await client.initialize()
+        tools = await client.list_tools()
+
+        assert len(tools) >= 3  # server has at least 5 tools as of writing
+
+        tool_names = {t.name for t in tools}
+        # These tools are documented and should be stable
+        assert "search_openai_docs" in tool_names
+        assert "list_openai_docs" in tool_names
+        assert "fetch_openai_doc" in tool_names
+
+        # Verify schema structure
+        search_tool = next(t for t in tools if t.name == "search_openai_docs")
+        assert "query" in search_tool.input_schema.get("properties", {})
+        assert "query" in search_tool.input_schema.get("required", [])
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_list_api_endpoints(self):
+        """Call the list_api_endpoints tool and verify we get real data."""
+        client = MCPClient(OPENAI_DOCS_MCP_URL)
+        await client.initialize()
+        result = await client.call_tool("list_api_endpoints", {})
+
+        assert not result.is_error
+        assert len(result.content) >= 1
+        assert result.content[0]["type"] == "text"
+
+        data = json.loads(result.content[0]["text"])
+        assert "paths" in data or "urls" in data
+        # The OpenAI API should have many endpoints
+        total = data.get("total", len(data.get("paths", [])))
+        assert total > 50
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_search(self):
+        """Search for docs and verify we get results."""
+        client = MCPClient(OPENAI_DOCS_MCP_URL)
+        await client.initialize()
+        result = await client.call_tool(
+            "search_openai_docs", {"query": "chat completions", "limit": 3}
+        )
+
+        assert not result.is_error
+        assert len(result.content) >= 1
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_sse_response_handling(self):
+        """Verify the client correctly handles SSE responses from a real server.
+
+        This is the key test — our local test server returns JSON,
+        but real MCP servers typically return SSE. This proves the
+        SSE parsing works end-to-end.
+        """
+        client = MCPClient(OPENAI_DOCS_MCP_URL)
+        # initialize() internally calls _send_request which must parse SSE
+        result = await client.initialize()
+
+        # If we got here without error, SSE parsing works
+        assert isinstance(result, dict)
+        assert "protocolVersion" in result
+
+        # Also verify list_tools works (another SSE response)
+        tools = await client.list_tools()
+        assert len(tools) > 0
+        assert all(hasattr(t, "name") for t in tools)

autogpt_platform/backend/backend/blocks/mcp/test_integration.py

@@ -0,0 +1,389 @@
+"""
+Integration tests for MCP client and MCPToolBlock against a real HTTP server.
+
+These tests spin up a local MCP test server and run the full client/block flow
+against it — no mocking, real HTTP requests.
+"""
+
+import asyncio
+import json
+import threading
+from unittest.mock import patch
+
+import pytest
+from aiohttp import web
+from pydantic import SecretStr
+
+from backend.blocks.mcp.block import MCPToolBlock
+from backend.blocks.mcp.client import MCPClient
+from backend.blocks.mcp.test_server import create_test_mcp_app
+from backend.data.model import OAuth2Credentials
+
+MOCK_USER_ID = "test-user-integration"
+
+
+class _MCPTestServer:
+    """
+    Run an MCP test server in a background thread with its own event loop.
+    This avoids event loop conflicts with pytest-asyncio.
+    """
+
+    def __init__(self, auth_token: str | None = None):
+        self.auth_token = auth_token
+        self.url: str = ""
+        self._runner: web.AppRunner | None = None
+        self._loop: asyncio.AbstractEventLoop | None = None
+        self._thread: threading.Thread | None = None
+        self._started = threading.Event()
+
+    def _run(self):
+        self._loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(self._loop)
+        self._loop.run_until_complete(self._start())
+        self._started.set()
+        self._loop.run_forever()
+
+    async def _start(self):
+        app = create_test_mcp_app(auth_token=self.auth_token)
+        self._runner = web.AppRunner(app)
+        await self._runner.setup()
+        site = web.TCPSite(self._runner, "127.0.0.1", 0)
+        await site.start()
+        port = site._server.sockets[0].getsockname()[1]  # type: ignore[union-attr]
+        self.url = f"http://127.0.0.1:{port}/mcp"
+
+    def start(self):
+        self._thread = threading.Thread(target=self._run, daemon=True)
+        self._thread.start()
+        if not self._started.wait(timeout=5):
+            raise RuntimeError("MCP test server failed to start within 5 seconds")
+        return self
+
+    def stop(self):
+        if self._loop and self._runner:
+            asyncio.run_coroutine_threadsafe(self._runner.cleanup(), self._loop).result(
+                timeout=5
+            )
+            self._loop.call_soon_threadsafe(self._loop.stop)
+        if self._thread:
+            self._thread.join(timeout=5)
+
+
+@pytest.fixture(scope="module")
+def mcp_server():
+    """Start a local MCP test server in a background thread."""
+    server = _MCPTestServer()
+    server.start()
+    yield server.url
+    server.stop()
+
+
+@pytest.fixture(scope="module")
+def mcp_server_with_auth():
+    """Start a local MCP test server with auth in a background thread."""
+    server = _MCPTestServer(auth_token="test-secret-token")
+    server.start()
+    yield server.url, "test-secret-token"
+    server.stop()
+
+
+@pytest.fixture(autouse=True)
+def _allow_localhost():
+    """
+    Allow 127.0.0.1 through SSRF protection for integration tests.
+
+    The Requests class blocks private IPs by default. We patch the Requests
+    constructor to always include 127.0.0.1 as a trusted origin so the local
+    test server is reachable.
+    """
+    from backend.util.request import Requests
+
+    original_init = Requests.__init__
+
+    def patched_init(self, *args, **kwargs):
+        trusted = list(kwargs.get("trusted_origins") or [])
+        trusted.append("http://127.0.0.1")
+        kwargs["trusted_origins"] = trusted
+        original_init(self, *args, **kwargs)
+
+    with patch.object(Requests, "__init__", patched_init):
+        yield
+
+
+def _make_client(url: str, auth_token: str | None = None) -> MCPClient:
+    """Create an MCPClient for integration tests."""
+    return MCPClient(url, auth_token=auth_token)
+
+
+# ── MCPClient integration tests ──────────────────────────────────────
+
+
+class TestMCPClientIntegration:
+    """Test MCPClient against a real local MCP server."""
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_initialize(self, mcp_server):
+        client = _make_client(mcp_server)
+        result = await client.initialize()
+
+        assert result["protocolVersion"] == "2025-03-26"
+        assert result["serverInfo"]["name"] == "test-mcp-server"
+        assert "tools" in result["capabilities"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_list_tools(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        tools = await client.list_tools()
+
+        assert len(tools) == 3
+
+        tool_names = {t.name for t in tools}
+        assert tool_names == {"get_weather", "add_numbers", "echo"}
+
+        # Check get_weather schema
+        weather = next(t for t in tools if t.name == "get_weather")
+        assert weather.description == "Get current weather for a city"
+        assert "city" in weather.input_schema["properties"]
+        assert weather.input_schema["required"] == ["city"]
+
+        # Check add_numbers schema
+        add = next(t for t in tools if t.name == "add_numbers")
+        assert "a" in add.input_schema["properties"]
+        assert "b" in add.input_schema["properties"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_get_weather(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("get_weather", {"city": "London"})
+
+        assert not result.is_error
+        assert len(result.content) == 1
+        assert result.content[0]["type"] == "text"
+
+        data = json.loads(result.content[0]["text"])
+        assert data["city"] == "London"
+        assert data["temperature"] == 22
+        assert data["condition"] == "sunny"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_add_numbers(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("add_numbers", {"a": 3, "b": 7})
+
+        assert not result.is_error
+        data = json.loads(result.content[0]["text"])
+        assert data["result"] == 10
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_echo(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("echo", {"message": "Hello MCP!"})
+
+        assert not result.is_error
+        assert result.content[0]["text"] == "Hello MCP!"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_unknown_tool(self, mcp_server):
+        client = _make_client(mcp_server)
+        await client.initialize()
+        result = await client.call_tool("nonexistent_tool", {})
+
+        assert result.is_error
+        assert "Unknown tool" in result.content[0]["text"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_auth_success(self, mcp_server_with_auth):
+        url, token = mcp_server_with_auth
+        client = _make_client(url, auth_token=token)
+        result = await client.initialize()
+
+        assert result["protocolVersion"] == "2025-03-26"
+
+        tools = await client.list_tools()
+        assert len(tools) == 3
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_auth_failure(self, mcp_server_with_auth):
+        url, _ = mcp_server_with_auth
+        client = _make_client(url, auth_token="wrong-token")
+
+        with pytest.raises(Exception):
+            await client.initialize()
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_auth_missing(self, mcp_server_with_auth):
+        url, _ = mcp_server_with_auth
+        client = _make_client(url)
+
+        with pytest.raises(Exception):
+            await client.initialize()
+
+
+# ── MCPToolBlock integration tests ───────────────────────────────────
+
+
+class TestMCPToolBlockIntegration:
+    """Test MCPToolBlock end-to-end against a real local MCP server."""
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_full_flow_get_weather(self, mcp_server):
+        """Full flow: discover tools, select one, execute it."""
+        # Step 1: Discover tools (simulating what the frontend/API would do)
+        client = _make_client(mcp_server)
+        await client.initialize()
+        tools = await client.list_tools()
+        assert len(tools) == 3
+
+        # Step 2: User selects "get_weather" and we get its schema
+        weather_tool = next(t for t in tools if t.name == "get_weather")
+
+        # Step 3: Execute the block — no credentials (public server)
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="get_weather",
+            tool_input_schema=weather_tool.input_schema,
+            tool_arguments={"city": "Paris"},
+        )
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        result = outputs[0][1]
+        assert result["city"] == "Paris"
+        assert result["temperature"] == 22
+        assert result["condition"] == "sunny"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_full_flow_add_numbers(self, mcp_server):
+        """Full flow for add_numbers tool."""
+        client = _make_client(mcp_server)
+        await client.initialize()
+        tools = await client.list_tools()
+        add_tool = next(t for t in tools if t.name == "add_numbers")
+
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="add_numbers",
+            tool_input_schema=add_tool.input_schema,
+            tool_arguments={"a": 42, "b": 58},
+        )
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1]["result"] == 100
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_full_flow_echo_plain_text(self, mcp_server):
+        """Verify plain text (non-JSON) responses work."""
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="echo",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"message": {"type": "string"}},
+                "required": ["message"],
+            },
+            tool_arguments={"message": "Hello from AutoGPT!"},
+        )
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == "Hello from AutoGPT!"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_full_flow_unknown_tool_yields_error(self, mcp_server):
+        """Calling an unknown tool should yield an error output."""
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="nonexistent_tool",
+            tool_arguments={},
+        )
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "error"
+        assert "returned an error" in outputs[0][1]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_full_flow_with_auth(self, mcp_server_with_auth):
+        """Full flow with authentication via credentials kwarg."""
+        url, token = mcp_server_with_auth
+
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=url,
+            selected_tool="echo",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"message": {"type": "string"}},
+                "required": ["message"],
+            },
+            tool_arguments={"message": "Authenticated!"},
+        )
+
+        # Pass credentials via the standard kwarg (as the executor would)
+        test_creds = OAuth2Credentials(
+            id="test-cred",
+            provider="mcp",
+            access_token=SecretStr(token),
+            refresh_token=SecretStr(""),
+            scopes=[],
+            title="Test MCP credential",
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, user_id=MOCK_USER_ID, credentials=test_creds
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == "Authenticated!"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_no_credentials_runs_without_auth(self, mcp_server):
+        """Block runs without auth when no credentials are provided."""
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url=mcp_server,
+            selected_tool="echo",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"message": {"type": "string"}},
+                "required": ["message"],
+            },
+            tool_arguments={"message": "No auth needed"},
+        )
+
+        outputs = []
+        async for name, data in block.run(
+            input_data, user_id=MOCK_USER_ID, credentials=None
+        ):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == "No auth needed"

autogpt_platform/backend/backend/blocks/mcp/test_mcp.py

@@ -0,0 +1,619 @@
+"""
+Tests for MCP client and MCPToolBlock.
+"""
+
+import json
+from unittest.mock import AsyncMock, patch
+
+import pytest
+
+from backend.blocks.mcp.block import MCPToolBlock
+from backend.blocks.mcp.client import MCPCallResult, MCPClient, MCPClientError
+from backend.util.test import execute_block_test
+
+# ── SSE parsing unit tests ───────────────────────────────────────────
+
+
+class TestSSEParsing:
+    """Tests for SSE (text/event-stream) response parsing."""
+
+    def test_parse_sse_simple(self):
+        sse = (
+            "event: message\n"
+            'data: {"jsonrpc":"2.0","result":{"tools":[]},"id":1}\n'
+            "\n"
+        )
+        body = MCPClient._parse_sse_response(sse)
+        assert body["result"] == {"tools": []}
+        assert body["id"] == 1
+
+    def test_parse_sse_with_notifications(self):
+        """SSE streams can contain notifications (no id) before the response."""
+        sse = (
+            "event: message\n"
+            'data: {"jsonrpc":"2.0","method":"some/notification"}\n'
+            "\n"
+            "event: message\n"
+            'data: {"jsonrpc":"2.0","result":{"ok":true},"id":2}\n'
+            "\n"
+        )
+        body = MCPClient._parse_sse_response(sse)
+        assert body["result"] == {"ok": True}
+        assert body["id"] == 2
+
+    def test_parse_sse_error_response(self):
+        sse = (
+            "event: message\n"
+            'data: {"jsonrpc":"2.0","error":{"code":-32600,"message":"Bad Request"},"id":1}\n'
+        )
+        body = MCPClient._parse_sse_response(sse)
+        assert "error" in body
+        assert body["error"]["code"] == -32600
+
+    def test_parse_sse_no_data_raises(self):
+        with pytest.raises(MCPClientError, match="No JSON-RPC response found"):
+            MCPClient._parse_sse_response("event: message\n\n")
+
+    def test_parse_sse_empty_raises(self):
+        with pytest.raises(MCPClientError, match="No JSON-RPC response found"):
+            MCPClient._parse_sse_response("")
+
+    def test_parse_sse_ignores_non_data_lines(self):
+        sse = (
+            ": comment line\n"
+            "event: message\n"
+            "id: 123\n"
+            'data: {"jsonrpc":"2.0","result":"ok","id":1}\n'
+            "\n"
+        )
+        body = MCPClient._parse_sse_response(sse)
+        assert body["result"] == "ok"
+
+    def test_parse_sse_uses_last_response(self):
+        """If multiple responses exist, use the last one."""
+        sse = (
+            'data: {"jsonrpc":"2.0","result":"first","id":1}\n'
+            "\n"
+            'data: {"jsonrpc":"2.0","result":"second","id":2}\n'
+            "\n"
+        )
+        body = MCPClient._parse_sse_response(sse)
+        assert body["result"] == "second"
+
+
+# ── MCPClient unit tests ─────────────────────────────────────────────
+
+
+class TestMCPClient:
+    """Tests for the MCP HTTP client."""
+
+    def test_build_headers_without_auth(self):
+        client = MCPClient("https://mcp.example.com")
+        headers = client._build_headers()
+        assert "Authorization" not in headers
+        assert headers["Content-Type"] == "application/json"
+
+    def test_build_headers_with_auth(self):
+        client = MCPClient("https://mcp.example.com", auth_token="my-token")
+        headers = client._build_headers()
+        assert headers["Authorization"] == "Bearer my-token"
+
+    def test_build_jsonrpc_request(self):
+        client = MCPClient("https://mcp.example.com")
+        req = client._build_jsonrpc_request("tools/list")
+        assert req["jsonrpc"] == "2.0"
+        assert req["method"] == "tools/list"
+        assert "id" in req
+        assert "params" not in req
+
+    def test_build_jsonrpc_request_with_params(self):
+        client = MCPClient("https://mcp.example.com")
+        req = client._build_jsonrpc_request(
+            "tools/call", {"name": "test", "arguments": {"x": 1}}
+        )
+        assert req["params"] == {"name": "test", "arguments": {"x": 1}}
+
+    def test_request_id_increments(self):
+        client = MCPClient("https://mcp.example.com")
+        req1 = client._build_jsonrpc_request("tools/list")
+        req2 = client._build_jsonrpc_request("tools/list")
+        assert req2["id"] > req1["id"]
+
+    def test_server_url_trailing_slash_stripped(self):
+        client = MCPClient("https://mcp.example.com/mcp/")
+        assert client.server_url == "https://mcp.example.com/mcp"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_send_request_success(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_response = AsyncMock()
+        mock_response.json.return_value = {
+            "jsonrpc": "2.0",
+            "result": {"tools": []},
+            "id": 1,
+        }
+
+        with patch.object(client, "_send_request", return_value={"tools": []}):
+            result = await client._send_request("tools/list")
+            assert result == {"tools": []}
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_send_request_error(self):
+        client = MCPClient("https://mcp.example.com")
+
+        async def mock_send(*args, **kwargs):
+            raise MCPClientError("MCP server error [-32600]: Invalid Request")
+
+        with patch.object(client, "_send_request", side_effect=mock_send):
+            with pytest.raises(MCPClientError, match="Invalid Request"):
+                await client._send_request("tools/list")
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_list_tools(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "tools": [
+                {
+                    "name": "get_weather",
+                    "description": "Get current weather for a city",
+                    "inputSchema": {
+                        "type": "object",
+                        "properties": {"city": {"type": "string"}},
+                        "required": ["city"],
+                    },
+                },
+                {
+                    "name": "search",
+                    "description": "Search the web",
+                    "inputSchema": {
+                        "type": "object",
+                        "properties": {"query": {"type": "string"}},
+                        "required": ["query"],
+                    },
+                },
+            ]
+        }
+
+        with patch.object(client, "_send_request", return_value=mock_result):
+            tools = await client.list_tools()
+
+        assert len(tools) == 2
+        assert tools[0].name == "get_weather"
+        assert tools[0].description == "Get current weather for a city"
+        assert tools[0].input_schema["properties"]["city"]["type"] == "string"
+        assert tools[1].name == "search"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_list_tools_empty(self):
+        client = MCPClient("https://mcp.example.com")
+
+        with patch.object(client, "_send_request", return_value={"tools": []}):
+            tools = await client.list_tools()
+
+        assert tools == []
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_list_tools_none_result(self):
+        client = MCPClient("https://mcp.example.com")
+
+        with patch.object(client, "_send_request", return_value=None):
+            tools = await client.list_tools()
+
+        assert tools == []
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_success(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "content": [
+                {"type": "text", "text": json.dumps({"temp": 20, "city": "London"})}
+            ],
+            "isError": False,
+        }
+
+        with patch.object(client, "_send_request", return_value=mock_result):
+            result = await client.call_tool("get_weather", {"city": "London"})
+
+        assert not result.is_error
+        assert len(result.content) == 1
+        assert result.content[0]["type"] == "text"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_error(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "content": [{"type": "text", "text": "City not found"}],
+            "isError": True,
+        }
+
+        with patch.object(client, "_send_request", return_value=mock_result):
+            result = await client.call_tool("get_weather", {"city": "???"})
+
+        assert result.is_error
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_tool_none_result(self):
+        client = MCPClient("https://mcp.example.com")
+
+        with patch.object(client, "_send_request", return_value=None):
+            result = await client.call_tool("get_weather", {"city": "London"})
+
+        assert result.is_error
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_initialize(self):
+        client = MCPClient("https://mcp.example.com")
+
+        mock_result = {
+            "protocolVersion": "2025-03-26",
+            "capabilities": {"tools": {}},
+            "serverInfo": {"name": "test-server", "version": "1.0.0"},
+        }
+
+        with (
+            patch.object(client, "_send_request", return_value=mock_result) as mock_req,
+            patch.object(client, "_send_notification") as mock_notif,
+        ):
+            result = await client.initialize()
+
+        mock_req.assert_called_once()
+        mock_notif.assert_called_once_with("notifications/initialized")
+        assert result["protocolVersion"] == "2025-03-26"
+
+
+# ── MCPToolBlock unit tests ──────────────────────────────────────────
+
+MOCK_USER_ID = "test-user-123"
+
+
+class TestMCPToolBlock:
+    """Tests for the MCPToolBlock."""
+
+    def test_block_instantiation(self):
+        block = MCPToolBlock()
+        assert block.id == "a0a4b1c2-d3e4-4f56-a7b8-c9d0e1f2a3b4"
+        assert block.name == "MCPToolBlock"
+
+    def test_input_schema_has_required_fields(self):
+        block = MCPToolBlock()
+        schema = block.input_schema.jsonschema()
+        props = schema.get("properties", {})
+        assert "server_url" in props
+        assert "selected_tool" in props
+        assert "tool_arguments" in props
+        assert "credentials" in props
+
+    def test_output_schema(self):
+        block = MCPToolBlock()
+        schema = block.output_schema.jsonschema()
+        props = schema.get("properties", {})
+        assert "result" in props
+        assert "error" in props
+
+    def test_get_input_schema_with_tool_schema(self):
+        tool_schema = {
+            "type": "object",
+            "properties": {"query": {"type": "string"}},
+            "required": ["query"],
+        }
+        data = {"tool_input_schema": tool_schema}
+        result = MCPToolBlock.Input.get_input_schema(data)
+        assert result == tool_schema
+
+    def test_get_input_schema_without_tool_schema(self):
+        result = MCPToolBlock.Input.get_input_schema({})
+        assert result == {}
+
+    def test_get_input_defaults(self):
+        data = {"tool_arguments": {"city": "London"}}
+        result = MCPToolBlock.Input.get_input_defaults(data)
+        assert result == {"city": "London"}
+
+    def test_get_missing_input(self):
+        data = {
+            "tool_input_schema": {
+                "type": "object",
+                "properties": {
+                    "city": {"type": "string"},
+                    "units": {"type": "string"},
+                },
+                "required": ["city", "units"],
+            },
+            "tool_arguments": {"city": "London"},
+        }
+        missing = MCPToolBlock.Input.get_missing_input(data)
+        assert missing == {"units"}
+
+    def test_get_missing_input_all_present(self):
+        data = {
+            "tool_input_schema": {
+                "type": "object",
+                "properties": {"city": {"type": "string"}},
+                "required": ["city"],
+            },
+            "tool_arguments": {"city": "London"},
+        }
+        missing = MCPToolBlock.Input.get_missing_input(data)
+        assert missing == set()
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_with_mock(self):
+        """Test the block using the built-in test infrastructure."""
+        block = MCPToolBlock()
+        await execute_block_test(block)
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_missing_server_url(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="",
+            selected_tool="test",
+        )
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+        assert outputs == [("error", "MCP server URL is required")]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_missing_tool(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="",
+        )
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+        assert outputs == [
+            ("error", "No tool selected. Please select a tool from the dropdown.")
+        ]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_success(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="get_weather",
+            tool_input_schema={
+                "type": "object",
+                "properties": {"city": {"type": "string"}},
+            },
+            tool_arguments={"city": "London"},
+        )
+
+        async def mock_call(*args, **kwargs):
+            return {"temp": 20, "city": "London"}
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert len(outputs) == 1
+        assert outputs[0][0] == "result"
+        assert outputs[0][1] == {"temp": 20, "city": "London"}
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_mcp_error(self):
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="bad_tool",
+        )
+
+        async def mock_call(*args, **kwargs):
+            raise MCPClientError("Tool not found")
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert outputs[0][0] == "error"
+        assert "Tool not found" in outputs[0][1]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_mcp_tool_parses_json_text(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {"type": "text", "text": '{"temp": 20}'},
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == {"temp": 20}
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_mcp_tool_plain_text(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {"type": "text", "text": "Hello, world!"},
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == "Hello, world!"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_mcp_tool_multiple_content(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {"type": "text", "text": "Part 1"},
+                {"type": "text", "text": '{"part": 2}'},
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == ["Part 1", {"part": 2}]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_mcp_tool_error_result(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[{"type": "text", "text": "Something went wrong"}],
+            is_error=True,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            with pytest.raises(MCPClientError, match="returned an error"):
+                await block._call_mcp_tool("https://mcp.example.com", "test_tool", {})
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_call_mcp_tool_image_content(self):
+        block = MCPToolBlock()
+
+        mock_result = MCPCallResult(
+            content=[
+                {
+                    "type": "image",
+                    "data": "base64data==",
+                    "mimeType": "image/png",
+                }
+            ],
+            is_error=False,
+        )
+
+        async def mock_init(self):
+            return {}
+
+        async def mock_call(self, name, args):
+            return mock_result
+
+        with (
+            patch.object(MCPClient, "initialize", mock_init),
+            patch.object(MCPClient, "call_tool", mock_call),
+        ):
+            result = await block._call_mcp_tool(
+                "https://mcp.example.com", "test_tool", {}
+            )
+
+        assert result == {
+            "type": "image",
+            "data": "base64data==",
+            "mimeType": "image/png",
+        }
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_with_credentials(self):
+        """Verify the block uses OAuth2Credentials and passes auth token."""
+        from pydantic import SecretStr
+
+        from backend.data.model import OAuth2Credentials
+
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="test_tool",
+        )
+
+        captured_tokens: list[str | None] = []
+
+        async def mock_call(server_url, tool_name, arguments, auth_token=None):
+            captured_tokens.append(auth_token)
+            return "ok"
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        test_creds = OAuth2Credentials(
+            id="cred-123",
+            provider="mcp",
+            access_token=SecretStr("resolved-token"),
+            refresh_token=SecretStr(""),
+            scopes=[],
+            title="Test MCP credential",
+        )
+
+        async for _ in block.run(
+            input_data, user_id=MOCK_USER_ID, credentials=test_creds
+        ):
+            pass
+
+        assert captured_tokens == ["resolved-token"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_run_without_credentials(self):
+        """Verify the block works without credentials (public server)."""
+        block = MCPToolBlock()
+        input_data = MCPToolBlock.Input(
+            server_url="https://mcp.example.com/mcp",
+            selected_tool="test_tool",
+        )
+
+        captured_tokens: list[str | None] = []
+
+        async def mock_call(server_url, tool_name, arguments, auth_token=None):
+            captured_tokens.append(auth_token)
+            return "ok"
+
+        block._call_mcp_tool = mock_call  # type: ignore
+
+        outputs = []
+        async for name, data in block.run(input_data, user_id=MOCK_USER_ID):
+            outputs.append((name, data))
+
+        assert captured_tokens == [None]
+        assert outputs == [("result", "ok")]

autogpt_platform/backend/backend/blocks/mcp/test_oauth.py

@@ -0,0 +1,242 @@
+"""
+Tests for MCP OAuth handler.
+"""
+
+from unittest.mock import AsyncMock, MagicMock, patch
+
+import pytest
+from pydantic import SecretStr
+
+from backend.blocks.mcp.client import MCPClient
+from backend.blocks.mcp.oauth import MCPOAuthHandler
+from backend.data.model import OAuth2Credentials
+
+
+def _mock_response(json_data: dict, status: int = 200) -> MagicMock:
+    """Create a mock Response with synchronous json() (matching Requests.Response)."""
+    resp = MagicMock()
+    resp.status = status
+    resp.ok = 200 <= status < 300
+    resp.json.return_value = json_data
+    return resp
+
+
+class TestMCPOAuthHandler:
+    """Tests for the MCPOAuthHandler."""
+
+    def _make_handler(self, **overrides) -> MCPOAuthHandler:
+        defaults = {
+            "client_id": "test-client-id",
+            "client_secret": "test-client-secret",
+            "redirect_uri": "https://app.example.com/callback",
+            "authorize_url": "https://auth.example.com/authorize",
+            "token_url": "https://auth.example.com/token",
+        }
+        defaults.update(overrides)
+        return MCPOAuthHandler(**defaults)
+
+    def test_get_login_url_basic(self):
+        handler = self._make_handler()
+        url = handler.get_login_url(
+            scopes=["read", "write"],
+            state="random-state-token",
+            code_challenge="S256-challenge-value",
+        )
+
+        assert "https://auth.example.com/authorize?" in url
+        assert "response_type=code" in url
+        assert "client_id=test-client-id" in url
+        assert "state=random-state-token" in url
+        assert "code_challenge=S256-challenge-value" in url
+        assert "code_challenge_method=S256" in url
+        assert "scope=read+write" in url
+
+    def test_get_login_url_with_resource(self):
+        handler = self._make_handler(resource_url="https://mcp.example.com/mcp")
+        url = handler.get_login_url(
+            scopes=[], state="state", code_challenge="challenge"
+        )
+
+        assert "resource=https" in url
+
+    def test_get_login_url_without_pkce(self):
+        handler = self._make_handler()
+        url = handler.get_login_url(scopes=["read"], state="state", code_challenge=None)
+
+        assert "code_challenge" not in url
+        assert "code_challenge_method" not in url
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_exchange_code_for_tokens(self):
+        handler = self._make_handler()
+
+        resp = _mock_response(
+            {
+                "access_token": "new-access-token",
+                "refresh_token": "new-refresh-token",
+                "expires_in": 3600,
+                "token_type": "Bearer",
+            }
+        )
+
+        with patch("backend.blocks.mcp.oauth.Requests") as MockRequests:
+            instance = MockRequests.return_value
+            instance.post = AsyncMock(return_value=resp)
+
+            creds = await handler.exchange_code_for_tokens(
+                code="auth-code",
+                scopes=["read"],
+                code_verifier="pkce-verifier",
+            )
+
+        assert isinstance(creds, OAuth2Credentials)
+        assert creds.access_token.get_secret_value() == "new-access-token"
+        assert creds.refresh_token is not None
+        assert creds.refresh_token.get_secret_value() == "new-refresh-token"
+        assert creds.scopes == ["read"]
+        assert creds.access_token_expires_at is not None
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_refresh_tokens(self):
+        handler = self._make_handler()
+
+        existing_creds = OAuth2Credentials(
+            id="existing-id",
+            provider="mcp",
+            access_token=SecretStr("old-token"),
+            refresh_token=SecretStr("old-refresh"),
+            scopes=["read"],
+            title="test",
+        )
+
+        resp = _mock_response(
+            {
+                "access_token": "refreshed-token",
+                "refresh_token": "new-refresh",
+                "expires_in": 3600,
+            }
+        )
+
+        with patch("backend.blocks.mcp.oauth.Requests") as MockRequests:
+            instance = MockRequests.return_value
+            instance.post = AsyncMock(return_value=resp)
+
+            refreshed = await handler._refresh_tokens(existing_creds)
+
+        assert refreshed.id == "existing-id"
+        assert refreshed.access_token.get_secret_value() == "refreshed-token"
+        assert refreshed.refresh_token is not None
+        assert refreshed.refresh_token.get_secret_value() == "new-refresh"
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_refresh_tokens_no_refresh_token(self):
+        handler = self._make_handler()
+
+        creds = OAuth2Credentials(
+            provider="mcp",
+            access_token=SecretStr("token"),
+            scopes=["read"],
+            title="test",
+        )
+
+        with pytest.raises(ValueError, match="No refresh token"):
+            await handler._refresh_tokens(creds)
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_revoke_tokens_no_url(self):
+        handler = self._make_handler(revoke_url=None)
+
+        creds = OAuth2Credentials(
+            provider="mcp",
+            access_token=SecretStr("token"),
+            scopes=[],
+            title="test",
+        )
+
+        result = await handler.revoke_tokens(creds)
+        assert result is False
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_revoke_tokens_with_url(self):
+        handler = self._make_handler(revoke_url="https://auth.example.com/revoke")
+
+        creds = OAuth2Credentials(
+            provider="mcp",
+            access_token=SecretStr("token"),
+            scopes=[],
+            title="test",
+        )
+
+        resp = _mock_response({}, status=200)
+
+        with patch("backend.blocks.mcp.oauth.Requests") as MockRequests:
+            instance = MockRequests.return_value
+            instance.post = AsyncMock(return_value=resp)
+
+            result = await handler.revoke_tokens(creds)
+
+        assert result is True
+
+
+class TestMCPClientDiscovery:
+    """Tests for MCPClient OAuth metadata discovery."""
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_auth_found(self):
+        client = MCPClient("https://mcp.example.com/mcp")
+
+        metadata = {
+            "authorization_servers": ["https://auth.example.com"],
+            "resource": "https://mcp.example.com/mcp",
+        }
+
+        resp = _mock_response(metadata, status=200)
+
+        with patch("backend.blocks.mcp.client.Requests") as MockRequests:
+            instance = MockRequests.return_value
+            instance.get = AsyncMock(return_value=resp)
+
+            result = await client.discover_auth()
+
+        assert result is not None
+        assert result["authorization_servers"] == ["https://auth.example.com"]
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_auth_not_found(self):
+        client = MCPClient("https://mcp.example.com/mcp")
+
+        resp = _mock_response({}, status=404)
+
+        with patch("backend.blocks.mcp.client.Requests") as MockRequests:
+            instance = MockRequests.return_value
+            instance.get = AsyncMock(return_value=resp)
+
+            result = await client.discover_auth()
+
+        assert result is None
+
+    @pytest.mark.asyncio(loop_scope="session")
+    async def test_discover_auth_server_metadata(self):
+        client = MCPClient("https://mcp.example.com/mcp")
+
+        server_metadata = {
+            "issuer": "https://auth.example.com",
+            "authorization_endpoint": "https://auth.example.com/authorize",
+            "token_endpoint": "https://auth.example.com/token",
+            "registration_endpoint": "https://auth.example.com/register",
+            "code_challenge_methods_supported": ["S256"],
+        }
+
+        resp = _mock_response(server_metadata, status=200)
+
+        with patch("backend.blocks.mcp.client.Requests") as MockRequests:
+            instance = MockRequests.return_value
+            instance.get = AsyncMock(return_value=resp)
+
+            result = await client.discover_auth_server_metadata(
+                "https://auth.example.com"
+            )
+
+        assert result is not None
+        assert result["authorization_endpoint"] == "https://auth.example.com/authorize"
+        assert result["token_endpoint"] == "https://auth.example.com/token"

autogpt_platform/backend/backend/blocks/mcp/test_server.py

@@ -0,0 +1,162 @@
+"""
+Minimal MCP server for integration testing.
+
+Implements the MCP Streamable HTTP transport (JSON-RPC 2.0 over HTTP POST)
+with a few sample tools. Runs on localhost with a random available port.
+"""
+
+import json
+import logging
+
+from aiohttp import web
+
+logger = logging.getLogger(__name__)
+
+# Sample tools this test server exposes
+TEST_TOOLS = [
+    {
+        "name": "get_weather",
+        "description": "Get current weather for a city",
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "city": {
+                    "type": "string",
+                    "description": "City name",
+                },
+            },
+            "required": ["city"],
+        },
+    },
+    {
+        "name": "add_numbers",
+        "description": "Add two numbers together",
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "a": {"type": "number", "description": "First number"},
+                "b": {"type": "number", "description": "Second number"},
+            },
+            "required": ["a", "b"],
+        },
+    },
+    {
+        "name": "echo",
+        "description": "Echo back the input message",
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "message": {"type": "string", "description": "Message to echo"},
+            },
+            "required": ["message"],
+        },
+    },
+]
+
+
+def _handle_initialize(params: dict) -> dict:
+    return {
+        "protocolVersion": "2025-03-26",
+        "capabilities": {"tools": {"listChanged": False}},
+        "serverInfo": {"name": "test-mcp-server", "version": "1.0.0"},
+    }
+
+
+def _handle_tools_list(params: dict) -> dict:
+    return {"tools": TEST_TOOLS}
+
+
+def _handle_tools_call(params: dict) -> dict:
+    tool_name = params.get("name", "")
+    arguments = params.get("arguments", {})
+
+    if tool_name == "get_weather":
+        city = arguments.get("city", "Unknown")
+        return {
+            "content": [
+                {
+                    "type": "text",
+                    "text": json.dumps(
+                        {"city": city, "temperature": 22, "condition": "sunny"}
+                    ),
+                }
+            ],
+        }
+
+    elif tool_name == "add_numbers":
+        a = arguments.get("a", 0)
+        b = arguments.get("b", 0)
+        return {
+            "content": [{"type": "text", "text": json.dumps({"result": a + b})}],
+        }
+
+    elif tool_name == "echo":
+        message = arguments.get("message", "")
+        return {
+            "content": [{"type": "text", "text": message}],
+        }
+
+    else:
+        return {
+            "content": [{"type": "text", "text": f"Unknown tool: {tool_name}"}],
+            "isError": True,
+        }
+
+
+HANDLERS = {
+    "initialize": _handle_initialize,
+    "tools/list": _handle_tools_list,
+    "tools/call": _handle_tools_call,
+}
+
+
+async def handle_mcp_request(request: web.Request) -> web.Response:
+    """Handle incoming MCP JSON-RPC 2.0 requests."""
+    # Check auth if configured
+    expected_token = request.app.get("auth_token")
+    if expected_token:
+        auth_header = request.headers.get("Authorization", "")
+        if auth_header != f"Bearer {expected_token}":
+            return web.json_response(
+                {
+                    "jsonrpc": "2.0",
+                    "error": {"code": -32001, "message": "Unauthorized"},
+                    "id": None,
+                },
+                status=401,
+            )
+
+    body = await request.json()
+
+    # Handle notifications (no id field) — just acknowledge
+    if "id" not in body:
+        return web.Response(status=202)
+
+    method = body.get("method", "")
+    params = body.get("params", {})
+    request_id = body.get("id")
+
+    handler = HANDLERS.get(method)
+    if not handler:
+        return web.json_response(
+            {
+                "jsonrpc": "2.0",
+                "error": {
+                    "code": -32601,
+                    "message": f"Method not found: {method}",
+                },
+                "id": request_id,
+            }
+        )
+
+    result = handler(params)
+    return web.json_response({"jsonrpc": "2.0", "result": result, "id": request_id})
+
+
+def create_test_mcp_app(auth_token: str | None = None) -> web.Application:
+    """Create an aiohttp app that acts as an MCP server."""
+    app = web.Application()
+    app.router.add_post("/mcp", handle_mcp_request)
+    if auth_token:
+        app["auth_token"] = auth_token
+    return app

autogpt_platform/backend/backend/data/block.py

@@ -74,6 +74,7 @@ class BlockType(Enum):
     AI = "AI"
     AYRSHARE = "Ayrshare"
     HUMAN_IN_THE_LOOP = "Human In The Loop"
+    MCP_TOOL = "MCP Tool"
 
 
 class BlockCategory(Enum):

autogpt_platform/backend/backend/data/graph.py

@@ -39,6 +39,7 @@ from backend.util import type as type_utils
 from backend.util.exceptions import GraphNotAccessibleError, GraphNotInLibraryError
 from backend.util.json import SafeJson
 from backend.util.models import Pagination
+from backend.util.request import parse_url
 
 from .block import (
     AnyBlockSchema,
@@ -462,6 +463,9 @@ class GraphModel(Graph, GraphMeta):
                     continue
                 if ProviderName.HTTP in field.provider:
                     continue
+                # MCP credentials are intentionally split by server URL
+                if ProviderName.MCP in field.provider:
+                    continue
 
                 # If this happens, that means a block implementation probably needs
                 # to be updated.
@@ -518,6 +522,18 @@ class GraphModel(Graph, GraphMeta):
                 "required": ["id", "provider", "type"],
             }
 
+            # Add a descriptive display title when URL-based discriminator values
+            # are present (e.g. "mcp.sentry.dev" instead of just "Mcp")
+            if (
+                field_info.discriminator
+                and not field_info.discriminator_mapping
+                and field_info.discriminator_values
+            ):
+                hostnames = sorted(
+                    parse_url(str(v)).netloc for v in field_info.discriminator_values
+                )
+                field_schema["display_name"] = ", ".join(hostnames)
+
             # Add other (optional) field info items
             field_schema.update(
                 field_info.model_dump(
@@ -562,8 +578,17 @@ class GraphModel(Graph, GraphMeta):
 
         for graph in [self] + self.sub_graphs:
             for node in graph.nodes:
-                # Track if this node requires credentials (credentials_optional=False means required)
-                node_required_map[node.id] = not node.credentials_optional
+                # A node's credentials are optional if either:
+                # 1. The node metadata says so (credentials_optional=True), or
+                # 2. All credential fields on the block have defaults (not required by schema)
+                block_required = node.block.input_schema.get_required_fields()
+                creds_required_by_schema = any(
+                    fname in block_required
+                    for fname in node.block.input_schema.get_credentials_fields()
+                )
+                node_required_map[node.id] = (
+                    not node.credentials_optional and creds_required_by_schema
+                )
 
                 for (
                     field_name,
@@ -789,6 +814,19 @@ class GraphModel(Graph, GraphMeta):
                         "'credentials' and `*_credentials` are reserved"
                     )
 
+            # Check custom block-level validation (e.g., MCP dynamic tool arguments).
+            # Blocks can override get_missing_input to report additional missing fields
+            # beyond the standard top-level required fields.
+            if for_run:
+                credential_fields = InputSchema.get_credentials_fields()
+                custom_missing = InputSchema.get_missing_input(node.input_default)
+                for field_name in custom_missing:
+                    if (
+                        field_name not in provided_inputs
+                        and field_name not in credential_fields
+                    ):
+                        node_errors[node.id][field_name] = "This field is required"
+
             # Get input schema properties and check dependencies
             input_fields = InputSchema.model_fields
 

autogpt_platform/backend/backend/data/graph_test.py

@@ -463,3 +463,120 @@ def test_node_credentials_optional_with_other_metadata():
     assert node.credentials_optional is True
     assert node.metadata["position"] == {"x": 100, "y": 200}
     assert node.metadata["customized_name"] == "My Custom Node"
+
+
+# ============================================================================
+# Tests for MCP Credential Deduplication
+# ============================================================================
+
+
+def test_mcp_credential_combine_different_servers():
+    """Two MCP credential fields with different server URLs should produce
+    separate entries when combined (not merged into one)."""
+    from backend.data.model import CredentialsFieldInfo, CredentialsType
+    from backend.integrations.providers import ProviderName
+
+    oauth2_types: frozenset[CredentialsType] = frozenset(["oauth2"])
+
+    field_sentry = CredentialsFieldInfo(
+        credentials_provider=frozenset([ProviderName.MCP]),
+        credentials_types=oauth2_types,
+        credentials_scopes=None,
+        discriminator="server_url",
+        discriminator_values={"https://mcp.sentry.dev/mcp"},
+    )
+    field_linear = CredentialsFieldInfo(
+        credentials_provider=frozenset([ProviderName.MCP]),
+        credentials_types=oauth2_types,
+        credentials_scopes=None,
+        discriminator="server_url",
+        discriminator_values={"https://mcp.linear.app/mcp"},
+    )
+
+    combined = CredentialsFieldInfo.combine(
+        (field_sentry, ("node-sentry", "credentials")),
+        (field_linear, ("node-linear", "credentials")),
+    )
+
+    # Should produce 2 separate credential entries
+    assert len(combined) == 2, (
+        f"Expected 2 credential entries for 2 MCP blocks with different servers, "
+        f"got {len(combined)}: {list(combined.keys())}"
+    )
+
+    # Each entry should contain the server hostname in its key
+    keys = list(combined.keys())
+    assert any(
+        "mcp.sentry.dev" in k for k in keys
+    ), f"Expected 'mcp.sentry.dev' in one key, got {keys}"
+    assert any(
+        "mcp.linear.app" in k for k in keys
+    ), f"Expected 'mcp.linear.app' in one key, got {keys}"
+
+
+def test_mcp_credential_combine_same_server():
+    """Two MCP credential fields with the same server URL should be combined
+    into one credential entry."""
+    from backend.data.model import CredentialsFieldInfo, CredentialsType
+    from backend.integrations.providers import ProviderName
+
+    oauth2_types: frozenset[CredentialsType] = frozenset(["oauth2"])
+
+    field_a = CredentialsFieldInfo(
+        credentials_provider=frozenset([ProviderName.MCP]),
+        credentials_types=oauth2_types,
+        credentials_scopes=None,
+        discriminator="server_url",
+        discriminator_values={"https://mcp.sentry.dev/mcp"},
+    )
+    field_b = CredentialsFieldInfo(
+        credentials_provider=frozenset([ProviderName.MCP]),
+        credentials_types=oauth2_types,
+        credentials_scopes=None,
+        discriminator="server_url",
+        discriminator_values={"https://mcp.sentry.dev/mcp"},
+    )
+
+    combined = CredentialsFieldInfo.combine(
+        (field_a, ("node-a", "credentials")),
+        (field_b, ("node-b", "credentials")),
+    )
+
+    # Should produce 1 credential entry (same server URL)
+    assert len(combined) == 1, (
+        f"Expected 1 credential entry for 2 MCP blocks with same server, "
+        f"got {len(combined)}: {list(combined.keys())}"
+    )
+
+
+def test_mcp_credential_combine_no_discriminator_values():
+    """MCP credential fields without discriminator_values should be merged
+    into a single entry (backwards compat for blocks without server_url set)."""
+    from backend.data.model import CredentialsFieldInfo, CredentialsType
+    from backend.integrations.providers import ProviderName
+
+    oauth2_types: frozenset[CredentialsType] = frozenset(["oauth2"])
+
+    field_a = CredentialsFieldInfo(
+        credentials_provider=frozenset([ProviderName.MCP]),
+        credentials_types=oauth2_types,
+        credentials_scopes=None,
+        discriminator="server_url",
+    )
+    field_b = CredentialsFieldInfo(
+        credentials_provider=frozenset([ProviderName.MCP]),
+        credentials_types=oauth2_types,
+        credentials_scopes=None,
+        discriminator="server_url",
+    )
+
+    combined = CredentialsFieldInfo.combine(
+        (field_a, ("node-a", "credentials")),
+        (field_b, ("node-b", "credentials")),
+    )
+
+    # Should produce 1 entry (no URL differentiation)
+    assert len(combined) == 1, (
+        f"Expected 1 credential entry for MCP blocks without discriminator_values, "
+        f"got {len(combined)}: {list(combined.keys())}"
+    )

autogpt_platform/backend/backend/data/model.py

@@ -29,6 +29,7 @@ from pydantic import (
     GetCoreSchemaHandler,
     SecretStr,
     field_serializer,
+    model_validator,
 )
 from pydantic_core import (
     CoreSchema,
@@ -499,6 +500,25 @@ class CredentialsMetaInput(BaseModel, Generic[CP, CT]):
     provider: CP
     type: CT
 
+    @model_validator(mode="before")
+    @classmethod
+    def _normalize_legacy_provider(cls, data: Any) -> Any:
+        """Fix ``ProviderName.X`` format from Python 3.13 ``str(Enum)`` bug.
+
+        Python 3.13 changed ``str(StrEnum)`` to return ``"ClassName.MEMBER"``
+        instead of the plain value.  Old stored credential references may have
+        ``provider: "ProviderName.MCP"`` instead of ``"mcp"``.
+        """
+        if isinstance(data, dict):
+            prov = data.get("provider", "")
+            if isinstance(prov, str) and prov.startswith("ProviderName."):
+                member = prov.removeprefix("ProviderName.")
+                try:
+                    data = {**data, "provider": ProviderName[member].value}
+                except KeyError:
+                    pass
+        return data
+
     @classmethod
     def allowed_providers(cls) -> tuple[ProviderName, ...] | None:
         return get_args(cls.model_fields["provider"].annotation)
@@ -603,11 +623,18 @@ class CredentialsFieldInfo(BaseModel, Generic[CP, CT]):
         ] = defaultdict(list)
 
         for field, key in fields:
-            if field.provider == frozenset([ProviderName.HTTP]):
-                # HTTP host-scoped credentials can have different hosts that reqires different credential sets.
-                # Group by host extracted from the URL
+            if (
+                field.discriminator
+                and not field.discriminator_mapping
+                and field.discriminator_values
+            ):
+                # URL-based discrimination (e.g. HTTP host-scoped, MCP server URL):
+                # Each unique host gets its own credential entry.
+                provider_prefix = next(iter(field.provider))
+                # Use .value for enum types to get the plain string (e.g. "mcp" not "ProviderName.MCP")
+                prefix_str = getattr(provider_prefix, "value", str(provider_prefix))
                 providers = frozenset(
-                    [cast(CP, "http")]
+                    [cast(CP, prefix_str)]
                     + [
                         cast(CP, parse_url(str(value)).netloc)
                         for value in field.discriminator_values

autogpt_platform/backend/backend/executor/manager.py

@@ -18,6 +18,7 @@ from redis.asyncio.lock import Lock as AsyncRedisLock
 
 from backend.blocks.agent import AgentExecutorBlock
 from backend.blocks.io import AgentOutputBlock
+from backend.blocks.mcp.block import MCPToolBlock
 from backend.data import redis_client as redis
 from backend.data.block import (
     BlockInput,
@@ -232,6 +233,10 @@ async def execute_node(
             _input_data.nodes_input_masks = nodes_input_masks
         _input_data.user_id = user_id
         input_data = _input_data.model_dump()
+    elif isinstance(node_block, MCPToolBlock):
+        _mcp_data = MCPToolBlock.Input(**node.input_default)
+        _mcp_data.tool_arguments = input_data.get("tool_arguments", {})
+        input_data = _mcp_data.model_dump()
     data.inputs = input_data
 
     # Execute the node
@@ -268,8 +273,34 @@ async def execute_node(
 
     # Handle regular credentials fields
     for field_name, input_type in input_model.get_credentials_fields().items():
-        credentials_meta = input_type(**input_data[field_name])
-        credentials, lock = await creds_manager.acquire(user_id, credentials_meta.id)
+        field_value = input_data.get(field_name)
+        if not field_value or (
+            isinstance(field_value, dict) and not field_value.get("id")
+        ):
+            # No credentials configured — nullify so JSON schema validation
+            # doesn't choke on the empty default `{}`.
+            input_data[field_name] = None
+            continue  # Block runs without credentials
+
+        credentials_meta = input_type(**field_value)
+        # Write normalized values back so JSON schema validation also passes
+        # (model_validator may have fixed legacy formats like "ProviderName.MCP")
+        input_data[field_name] = credentials_meta.model_dump(mode="json")
+        try:
+            credentials, lock = await creds_manager.acquire(
+                user_id, credentials_meta.id
+            )
+        except ValueError:
+            # Credential was deleted or doesn't exist.
+            # If the field has a default, run without credentials.
+            if input_model.model_fields[field_name].default is not None:
+                log_metadata.warning(
+                    f"Credentials #{credentials_meta.id} not found, "
+                    "running without (field has default)"
+                )
+                input_data[field_name] = None
+                continue
+            raise
         creds_locks.append(lock)
         extra_exec_kwargs[field_name] = credentials
 

autogpt_platform/backend/backend/executor/utils.py

@@ -265,7 +265,13 @@ async def _validate_node_input_credentials(
         # Track if any credential field is missing for this node
         has_missing_credentials = False
 
+        # A credential field is optional if the node metadata says so, or if
+        # the block schema declares a default for the field.
+        required_fields = block.input_schema.get_required_fields()
+        is_creds_optional = node.credentials_optional
+
         for field_name, credentials_meta_type in credentials_fields.items():
+            field_is_optional = is_creds_optional or field_name not in required_fields
             try:
                 # Check nodes_input_masks first, then input_default
                 field_value = None
@@ -278,7 +284,7 @@ async def _validate_node_input_credentials(
                 elif field_name in node.input_default:
                     # For optional credentials, don't use input_default - treat as missing
                     # This prevents stale credential IDs from failing validation
-                    if node.credentials_optional:
+                    if field_is_optional:
                         field_value = None
                     else:
                         field_value = node.input_default[field_name]
@@ -288,8 +294,8 @@ async def _validate_node_input_credentials(
                     isinstance(field_value, dict) and not field_value.get("id")
                 ):
                     has_missing_credentials = True
-                    # If node has credentials_optional flag, mark for skipping instead of error
-                    if node.credentials_optional:
+                    # If credential field is optional, skip instead of error
+                    if field_is_optional:
                         continue  # Don't add error, will be marked for skip after loop
                     else:
                         credential_errors[node.id][
@@ -339,16 +345,16 @@ async def _validate_node_input_credentials(
                 ] = "Invalid credentials: type/provider mismatch"
                 continue
 
-        # If node has optional credentials and any are missing, mark for skipping
-        # But only if there are no other errors for this node
+        # If node has optional credentials and any are missing, allow running without.
+        # The executor will pass credentials=None to the block's run().
         if (
             has_missing_credentials
-            and node.credentials_optional
+            and is_creds_optional
             and node.id not in credential_errors
         ):
-            nodes_to_skip.add(node.id)
             logger.info(
-                f"Node #{node.id} will be skipped: optional credentials not configured"
+                f"Node #{node.id}: optional credentials not configured, "
+                "running without"
             )
 
     return credential_errors, nodes_to_skip

autogpt_platform/backend/backend/executor/utils_test.py

@@ -495,6 +495,7 @@ async def test_validate_node_input_credentials_returns_nodes_to_skip(
     mock_block.input_schema.get_credentials_fields.return_value = {
         "credentials": mock_credentials_field_type
     }
+    mock_block.input_schema.get_required_fields.return_value = {"credentials"}
     mock_node.block = mock_block
 
     # Create mock graph
@@ -508,8 +509,8 @@ async def test_validate_node_input_credentials_returns_nodes_to_skip(
         nodes_input_masks=None,
     )
 
-    # Node should be in nodes_to_skip, not in errors
-    assert mock_node.id in nodes_to_skip
+    # Node should NOT be in nodes_to_skip (runs without credentials) and not in errors
+    assert mock_node.id not in nodes_to_skip
     assert mock_node.id not in errors
 
 
@@ -535,6 +536,7 @@ async def test_validate_node_input_credentials_required_missing_creds_error(
     mock_block.input_schema.get_credentials_fields.return_value = {
         "credentials": mock_credentials_field_type
     }
+    mock_block.input_schema.get_required_fields.return_value = {"credentials"}
     mock_node.block = mock_block
 
     # Create mock graph

autogpt_platform/backend/backend/integrations/credentials_store.py

@@ -22,6 +22,27 @@ from backend.util.settings import Settings
 
 settings = Settings()
 
+
+def provider_matches(stored: str, expected: str) -> bool:
+    """Compare provider strings, handling Python 3.13 ``str(StrEnum)`` bug.
+
+    On Python 3.13, ``str(ProviderName.MCP)`` returns ``"ProviderName.MCP"``
+    instead of ``"mcp"``.  OAuth states persisted with the buggy format need
+    to match when ``expected`` is the canonical value (e.g. ``"mcp"``).
+    """
+    if stored == expected:
+        return True
+    if stored.startswith("ProviderName."):
+        member = stored.removeprefix("ProviderName.")
+        from backend.integrations.providers import ProviderName
+
+        try:
+            return ProviderName[member].value == expected
+        except KeyError:
+            pass
+    return False
+
+
 # This is an overrride since ollama doesn't actually require an API key, but the creddential system enforces one be attached
 ollama_credentials = APIKeyCredentials(
     id="744fdc56-071a-4761-b5a5-0af0ce10a2b5",
@@ -389,7 +410,7 @@ class IntegrationCredentialsStore:
         self, user_id: str, provider: str
     ) -> list[Credentials]:
         credentials = await self.get_all_creds(user_id)
-        return [c for c in credentials if c.provider == provider]
+        return [c for c in credentials if provider_matches(c.provider, provider)]
 
     async def get_authorized_providers(self, user_id: str) -> list[str]:
         credentials = await self.get_all_creds(user_id)
@@ -485,17 +506,6 @@ class IntegrationCredentialsStore:
         async with self.edit_user_integrations(user_id) as user_integrations:
             user_integrations.oauth_states.append(state)
 
-        async with await self.locked_user_integrations(user_id):
-
-            user_integrations = await self._get_user_integrations(user_id)
-            oauth_states = user_integrations.oauth_states
-            oauth_states.append(state)
-            user_integrations.oauth_states = oauth_states
-
-            await self.db_manager.update_user_integrations(
-                user_id=user_id, data=user_integrations
-            )
-
         return token, code_challenge
 
     def _generate_code_challenge(self) -> tuple[str, str]:
@@ -521,7 +531,7 @@ class IntegrationCredentialsStore:
                     state
                     for state in oauth_states
                     if secrets.compare_digest(state.token, token)
-                    and state.provider == provider
+                    and provider_matches(state.provider, provider)
                     and state.expires_at > now.timestamp()
                 ),
                 None,

autogpt_platform/backend/backend/integrations/creds_manager.py

@@ -9,7 +9,10 @@ from redis.asyncio.lock import Lock as AsyncRedisLock
 
 from backend.data.model import Credentials, OAuth2Credentials
 from backend.data.redis_client import get_redis_async
-from backend.integrations.credentials_store import IntegrationCredentialsStore
+from backend.integrations.credentials_store import (
+    IntegrationCredentialsStore,
+    provider_matches,
+)
 from backend.integrations.oauth import CREDENTIALS_BY_PROVIDER, HANDLERS_BY_NAME
 from backend.integrations.providers import ProviderName
 from backend.util.exceptions import MissingConfigError
@@ -137,7 +140,10 @@ class IntegrationCredentialsManager:
         self, user_id: str, credentials: OAuth2Credentials, lock: bool = True
     ) -> OAuth2Credentials:
         async with self._locked(user_id, credentials.id, "refresh"):
-            oauth_handler = await _get_provider_oauth_handler(credentials.provider)
+            if provider_matches(credentials.provider, ProviderName.MCP.value):
+                oauth_handler = create_mcp_oauth_handler(credentials)
+            else:
+                oauth_handler = await _get_provider_oauth_handler(credentials.provider)
             if oauth_handler.needs_refresh(credentials):
                 logger.debug(
                     f"Refreshing '{credentials.provider}' "
@@ -236,3 +242,31 @@ async def _get_provider_oauth_handler(provider_name_str: str) -> "BaseOAuthHandl
         client_secret=client_secret,
         redirect_uri=f"{frontend_base_url}/auth/integrations/oauth_callback",
     )
+
+
+def create_mcp_oauth_handler(
+    credentials: OAuth2Credentials,
+) -> "BaseOAuthHandler":
+    """Create an MCPOAuthHandler from credential metadata for token refresh.
+
+    MCP OAuth handlers have dynamic endpoints discovered per-server, so they
+    can't be registered as singletons in HANDLERS_BY_NAME. Instead, the handler
+    is reconstructed from metadata stored on the credential during initial auth.
+    """
+    from backend.blocks.mcp.oauth import MCPOAuthHandler
+
+    meta = credentials.metadata or {}
+    token_url = meta.get("mcp_token_url", "")
+    if not token_url:
+        raise ValueError(
+            f"MCP credential {credentials.id} is missing 'mcp_token_url' metadata; "
+            "cannot refresh tokens"
+        )
+    return MCPOAuthHandler(
+        client_id=meta.get("mcp_client_id", ""),
+        client_secret=meta.get("mcp_client_secret", ""),
+        redirect_uri="",  # Not needed for token refresh
+        authorize_url="",  # Not needed for token refresh
+        token_url=token_url,
+        resource_url=meta.get("mcp_resource_url"),
+    )

autogpt_platform/backend/backend/integrations/providers.py

@@ -30,6 +30,7 @@ class ProviderName(str, Enum):
     IDEOGRAM = "ideogram"
     JINA = "jina"
     LLAMA_API = "llama_api"
+    MCP = "mcp"
     MEDIUM = "medium"
     MEM0 = "mem0"
     NOTION = "notion"

autogpt_platform/backend/backend/integrations/webhooks/graph_lifecycle_hooks.py

@@ -50,6 +50,21 @@ async def _on_graph_activate(graph: "BaseGraph | GraphModel", user_id: str):
             if (
                 creds_meta := new_node.input_default.get(creds_field_name)
             ) and not await get_credentials(creds_meta["id"]):
+                # If the credential field is optional (has a default in the
+                # schema, or node metadata marks it optional), clear the stale
+                # reference instead of blocking the save.
+                creds_field_optional = (
+                    new_node.credentials_optional
+                    or creds_field_name not in block_input_schema.get_required_fields()
+                )
+                if creds_field_optional:
+                    new_node.input_default[creds_field_name] = {}
+                    logger.warning(
+                        f"Node #{new_node.id}: cleared stale optional "
+                        f"credentials #{creds_meta['id']} for "
+                        f"'{creds_field_name}'"
+                    )
+                    continue
                 raise ValueError(
                     f"Node #{new_node.id} input '{creds_field_name}' updated with "
                     f"non-existent credentials #{creds_meta['id']}"

autogpt_platform/backend/backend/util/request.py

@@ -101,7 +101,7 @@ class HostResolver(abc.AbstractResolver):
     def __init__(self, ssl_hostname: str, ip_addresses: list[str]):
         self.ssl_hostname = ssl_hostname
         self.ip_addresses = ip_addresses
-        self._default = aiohttp.AsyncResolver()
+        self._default = aiohttp.ThreadedResolver()
 
     async def resolve(self, host, port=0, family=socket.AF_INET):
         if host == self.ssl_hostname:
@@ -467,7 +467,7 @@ class Requests:
             resolver = HostResolver(ssl_hostname=hostname, ip_addresses=ip_addresses)
             ssl_context = ssl.create_default_context()
             connector = aiohttp.TCPConnector(resolver=resolver, ssl=ssl_context)
-        session_kwargs = {}
+        session_kwargs: dict = {}
         if connector:
             session_kwargs["connector"] = connector
 

autogpt_platform/frontend/src/app/(platform)/auth/integrations/mcp_callback/route.ts

@@ -0,0 +1,96 @@
+import { NextResponse } from "next/server";
+
+/**
+ * Safely encode a value as JSON for embedding in a script tag.
+ * Escapes characters that could break out of the script context to prevent XSS.
+ */
+function safeJsonStringify(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/&/g, "\\u0026");
+}
+
+// MCP-specific OAuth callback route.
+//
+// Unlike the generic oauth_callback which relies on window.opener.postMessage,
+// this route uses BroadcastChannel as the PRIMARY communication method.
+// This is critical because cross-origin OAuth flows (e.g. Sentry → localhost)
+// often lose window.opener due to COOP (Cross-Origin-Opener-Policy) headers.
+//
+// BroadcastChannel works across all same-origin tabs/popups regardless of opener.
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const code = searchParams.get("code");
+  const state = searchParams.get("state");
+
+  const success = Boolean(code && state);
+  const message = success
+    ? { success: true, code, state }
+    : {
+        success: false,
+        message: `Missing parameters: ${searchParams.toString()}`,
+      };
+
+  return new NextResponse(
+    `<!DOCTYPE html>
+<html>
+  <head><title>MCP Sign-in</title></head>
+  <body style="font-family: system-ui, -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #f9fafb;">
+    <div style="text-align: center; max-width: 400px; padding: 2rem;">
+      <div id="spinner" style="margin: 0 auto 1rem; width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite;"></div>
+      <p id="status" style="color: #374151; font-size: 16px;">Completing sign-in...</p>
+    </div>
+    <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
+    <script>
+      (function() {
+        var msg = ${safeJsonStringify(message)};
+        var sent = false;
+
+        // Method 1: BroadcastChannel (reliable across tabs/popups, no opener needed)
+        try {
+          var bc = new BroadcastChannel("mcp_oauth");
+          bc.postMessage({ type: "mcp_oauth_result", success: msg.success, code: msg.code, state: msg.state, message: msg.message });
+          bc.close();
+          sent = true;
+        } catch(e) { /* BroadcastChannel not supported */ }
+
+        // Method 2: window.opener.postMessage (fallback for same-origin popups)
+        try {
+          if (window.opener && !window.opener.closed) {
+            window.opener.postMessage(
+              { message_type: "mcp_oauth_result", success: msg.success, code: msg.code, state: msg.state, message: msg.message },
+              window.location.origin
+            );
+            sent = true;
+          }
+        } catch(e) { /* opener not available (COOP) */ }
+
+        // Method 3: localStorage (most reliable cross-tab fallback)
+        try {
+          localStorage.setItem("mcp_oauth_result", JSON.stringify(msg));
+          sent = true;
+        } catch(e) { /* localStorage not available */ }
+
+        var statusEl = document.getElementById("status");
+        var spinnerEl = document.getElementById("spinner");
+        spinnerEl.style.display = "none";
+
+        if (msg.success && sent) {
+          statusEl.textContent = "Sign-in complete! This window will close.";
+          statusEl.style.color = "#059669";
+          setTimeout(function() { window.close(); }, 1500);
+        } else if (msg.success) {
+          statusEl.textContent = "Sign-in successful! You can close this tab and return to the builder.";
+          statusEl.style.color = "#059669";
+        } else {
+          statusEl.textContent = "Sign-in failed: " + (msg.message || "Unknown error");
+          statusEl.style.color = "#dc2626";
+        }
+      })();
+    </script>
+  </body>
+</html>`,
+    { headers: { "Content-Type": "text/html" } },
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/__legacy__/ui/tabs";
+
+export type BuilderView = "old" | "new";
+
+export function BuilderViewTabs({
+  value,
+  onChange,
+}: {
+  value: BuilderView;
+  onChange: (value: BuilderView) => void;
+}) {
+  return (
+    <div className="pointer-events-auto fixed right-4 top-20 z-50">
+      <Tabs
+        value={value}
+        onValueChange={(v: string) => onChange(v as BuilderView)}
+      >
+        <TabsList className="w-fit bg-zinc-900">
+          <TabsTrigger value="old" className="text-gray-100">
+            Old
+          </TabsTrigger>
+          <TabsTrigger value="new" className="text-gray-100">
+            New
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx

@@ -23,9 +23,6 @@ import { useCopyPaste } from "./useCopyPaste";
 import { useFlow } from "./useFlow";
 import { useFlowRealtime } from "./useFlowRealtime";
 
-import "@xyflow/react/dist/style.css";
-import "./flow.css";
-
 export const Flow = () => {
   const [{ flowID, flowExecutionID }] = useQueryStates({
     flowID: parseAsString,

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css

@@ -1,9 +0,0 @@
-/* Reset default xyflow handle styles so custom Phosphor icon handles render correctly */
-.react-flow__handle {
-  background: transparent;
-  width: auto;
-  height: auto;
-  border: 0;
-  position: relative;
-  transform: none;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/CustomNode.tsx

@@ -47,7 +47,10 @@ export type CustomNode = XYNode<CustomNodeData, "custom">;
 
 export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
   ({ data, id: nodeId, selected }) => {
-    const { inputSchema, outputSchema } = useCustomNode({ data, nodeId });
+    const { inputSchema, outputSchema, isMCPWithTool } = useCustomNode({
+      data,
+      nodeId,
+    });
 
     const isAgent = data.uiType === BlockUIType.AGENT;
 
@@ -98,6 +101,7 @@ export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
             jsonSchema={preprocessInputSchema(inputSchema)}
             nodeId={nodeId}
             uiType={data.uiType}
+            isMCPWithTool={isMCPWithTool}
             className={cn(
               "bg-white px-4",
               isWebhook && "pointer-events-none opacity-50",

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx

@@ -20,10 +20,8 @@ type Props = {
 
 export const NodeHeader = ({ data, nodeId }: Props) => {
   const updateNodeData = useNodeStore((state) => state.updateNodeData);
-  const title =
-    (data.metadata?.customized_name as string) ||
-    data.hardcodedValues?.agent_name ||
-    data.title;
+
+  const title = (data.metadata?.customized_name as string) || data.title;
 
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editedTitle, setEditedTitle] = useState(title);

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/useCustomNode.tsx

@@ -3,6 +3,34 @@ import { CustomNodeData } from "./CustomNode";
 import { BlockUIType } from "../../../types";
 import { useMemo } from "react";
 import { mergeSchemaForResolution } from "./helpers";
+/**
+ * Build a dynamic input schema for MCP blocks.
+ *
+ * When a tool has been selected (tool_input_schema is populated), the block
+ * renders the selected tool's input parameters *plus* the credentials field
+ * so users can select/change the OAuth credential used for execution.
+ *
+ * Static fields like server_url, selected_tool, available_tools, and
+ * tool_arguments are hidden because they're pre-configured from the dialog.
+ */
+function buildMCPInputSchema(
+  toolInputSchema: Record<string, any>,
+  blockInputSchema: Record<string, any>,
+): Record<string, any> {
+  // Extract the credentials field from the block's original input schema
+  const credentialsSchema =
+    blockInputSchema?.properties?.credentials ?? undefined;
+
+  return {
+    type: "object",
+    properties: {
+      // Credentials field first so the dropdown appears at the top
+      ...(credentialsSchema ? { credentials: credentialsSchema } : {}),
+      ...(toolInputSchema.properties ?? {}),
+    },
+    required: [...(toolInputSchema.required ?? [])],
+  };
+}
 
 export const useCustomNode = ({
   data,
@@ -19,10 +47,18 @@ export const useCustomNode = ({
   );
 
   const isAgent = data.uiType === BlockUIType.AGENT;
+  const isMCPWithTool =
+    data.uiType === BlockUIType.MCP_TOOL &&
+    !!data.hardcodedValues?.tool_input_schema?.properties;
 
   const currentInputSchema = isAgent
     ? (data.hardcodedValues.input_schema ?? {})
-    : data.inputSchema;
+    : isMCPWithTool
+      ? buildMCPInputSchema(
+          data.hardcodedValues.tool_input_schema,
+          data.inputSchema,
+        )
+      : data.inputSchema;
   const currentOutputSchema = isAgent
     ? (data.hardcodedValues.output_schema ?? {})
     : data.outputSchema;
@@ -54,5 +90,6 @@ export const useCustomNode = ({
   return {
     inputSchema,
     outputSchema,
+    isMCPWithTool,
   };
 };

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/FormCreator.tsx

@@ -9,39 +9,72 @@ interface FormCreatorProps {
   jsonSchema: RJSFSchema;
   nodeId: string;
   uiType: BlockUIType;
+  /** When true the block is an MCP Tool with a selected tool. */
+  isMCPWithTool?: boolean;
   showHandles?: boolean;
   className?: string;
 }
 
 export const FormCreator: React.FC<FormCreatorProps> = React.memo(
-  ({ jsonSchema, nodeId, uiType, showHandles = true, className }) => {
+  ({
+    jsonSchema,
+    nodeId,
+    uiType,
+    isMCPWithTool = false,
+    showHandles = true,
+    className,
+  }) => {
     const updateNodeData = useNodeStore((state) => state.updateNodeData);
 
     const getHardCodedValues = useNodeStore(
       (state) => state.getHardCodedValues,
     );
 
+    const isAgent = uiType === BlockUIType.AGENT;
+
     const handleChange = ({ formData }: any) => {
       if ("credentials" in formData && !formData.credentials?.id) {
         delete formData.credentials;
       }
 
-      const updatedValues =
-        uiType === BlockUIType.AGENT
-          ? {
-              ...getHardCodedValues(nodeId),
-              inputs: formData,
-            }
-          : formData;
+      let updatedValues;
+      if (isAgent) {
+        updatedValues = {
+          ...getHardCodedValues(nodeId),
+          inputs: formData,
+        };
+      } else if (isMCPWithTool) {
+        // Separate credentials from tool arguments — credentials are stored
+        // at the top level of hardcodedValues, not inside tool_arguments.
+        const { credentials, ...toolArgs } = formData;
+        updatedValues = {
+          ...getHardCodedValues(nodeId),
+          tool_arguments: toolArgs,
+          ...(credentials?.id ? { credentials } : {}),
+        };
+      } else {
+        updatedValues = formData;
+      }
 
       updateNodeData(nodeId, { hardcodedValues: updatedValues });
     };
 
     const hardcodedValues = getHardCodedValues(nodeId);
-    const initialValues =
-      uiType === BlockUIType.AGENT
-        ? (hardcodedValues.inputs ?? {})
-        : hardcodedValues;
+
+    let initialValues;
+    if (isAgent) {
+      initialValues = hardcodedValues.inputs ?? {};
+    } else if (isMCPWithTool) {
+      // Merge tool arguments with credentials for the form
+      initialValues = {
+        ...(hardcodedValues.tool_arguments ?? {}),
+        ...(hardcodedValues.credentials?.id
+          ? { credentials: hardcodedValues.credentials }
+          : {}),
+      };
+    } else {
+      initialValues = hardcodedValues;
+    }
 
     return (
       <div

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/Block.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/__legacy__/ui/button";
 import { Skeleton } from "@/components/__legacy__/ui/skeleton";
 import { beautifyString, cn } from "@/lib/utils";
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes, useCallback, useState } from "react";
 import { highlightText } from "./helpers";
 import { PlusIcon } from "@phosphor-icons/react";
 import { BlockInfo } from "@/app/api/__generated__/models/blockInfo";
@@ -9,6 +9,12 @@ import { useControlPanelStore } from "../../../stores/controlPanelStore";
 import { blockDragPreviewStyle } from "./style";
 import { useReactFlow } from "@xyflow/react";
 import { useNodeStore } from "../../../stores/nodeStore";
+import { BlockUIType, SpecialBlockID } from "@/lib/autogpt-server-api";
+import {
+  MCPToolDialog,
+  type MCPToolDialogResult,
+} from "@/app/(platform)/build/components/legacy-builder/MCPToolDialog";
+
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   title?: string;
   description?: string;
@@ -33,22 +39,86 @@ export const Block: BlockComponent = ({
   );
   const { setViewport } = useReactFlow();
   const { addBlock } = useNodeStore();
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+
+  const isMCPBlock = blockData.uiType === BlockUIType.MCP_TOOL;
+
+  const addBlockAndCenter = useCallback(
+    (block: BlockInfo, hardcodedValues?: Record<string, any>) => {
+      const customNode = addBlock(block, hardcodedValues);
+      setTimeout(() => {
+        setViewport(
+          {
+            x: -customNode.position.x * 0.8 + window.innerWidth / 2,
+            y: -customNode.position.y * 0.8 + (window.innerHeight - 400) / 2,
+            zoom: 0.8,
+          },
+          { duration: 500 },
+        );
+      }, 50);
+      return customNode;
+    },
+    [addBlock, setViewport],
+  );
+
+  const updateNodeData = useNodeStore((state) => state.updateNodeData);
+
+  const handleMCPToolConfirm = useCallback(
+    (result: MCPToolDialogResult) => {
+      // Derive a display label: prefer server name, fall back to URL hostname.
+      let serverLabel = result.serverName;
+      if (!serverLabel) {
+        try {
+          serverLabel = new URL(result.serverUrl).hostname;
+        } catch {
+          serverLabel = "MCP";
+        }
+      }
+
+      const customNode = addBlockAndCenter(blockData, {
+        server_url: result.serverUrl,
+        server_name: serverLabel,
+        selected_tool: result.selectedTool,
+        tool_input_schema: result.toolInputSchema,
+        available_tools: result.availableTools,
+        credentials: result.credentials ?? undefined,
+      });
+      if (customNode) {
+        const title = result.selectedTool
+          ? `${serverLabel}: ${beautifyString(result.selectedTool)}`
+          : undefined;
+        updateNodeData(customNode.id, {
+          metadata: {
+            ...customNode.data.metadata,
+            credentials_optional: true,
+            ...(title && { customized_name: title }),
+          },
+        });
+      }
+      setMcpDialogOpen(false);
+    },
+    [addBlockAndCenter, blockData, updateNodeData],
+  );
 
   const handleClick = () => {
-    const customNode = addBlock(blockData);
-    setTimeout(() => {
-      setViewport(
-        {
-          x: -customNode.position.x * 0.8 + window.innerWidth / 2,
-          y: -customNode.position.y * 0.8 + (window.innerHeight - 400) / 2,
-          zoom: 0.8,
+    if (isMCPBlock) {
+      setMcpDialogOpen(true);
+      return;
+    }
+    const customNode = addBlockAndCenter(blockData);
+    // Set customized_name for agent blocks so the agent's name persists
+    if (customNode && blockData.id === SpecialBlockID.AGENT) {
+      updateNodeData(customNode.id, {
+        metadata: {
+          ...customNode.data.metadata,
+          customized_name: blockData.name,
         },
-        { duration: 500 },
-      );
-    }, 50);
+      });
+    }
   };
 
   const handleDragStart = (e: React.DragEvent<HTMLButtonElement>) => {
+    if (isMCPBlock) return;
     e.dataTransfer.effectAllowed = "copy";
     e.dataTransfer.setData("application/reactflow", JSON.stringify(blockData));
 
@@ -71,46 +141,56 @@ export const Block: BlockComponent = ({
     : undefined;
 
   return (
-    <Button
-      draggable={true}
-      data-id={blockDataId}
-      className={cn(
-        "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
-        "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
-        className,
-      )}
-      onDragStart={handleDragStart}
-      onClick={handleClick}
-      {...rest}
-    >
-      <div className="flex flex-1 flex-col items-start gap-0.5">
-        {title && (
-          <span
-            className={cn(
-              "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
-            )}
-          >
-            {highlightText(beautifyString(title), highlightedText)}
-          </span>
-        )}
-        {description && (
-          <span
-            className={cn(
-              "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
-            )}
-          >
-            {highlightText(description, highlightedText)}
-          </span>
-        )}
-      </div>
-      <div
+    <>
+      <Button
+        draggable={!isMCPBlock}
+        data-id={blockDataId}
         className={cn(
-          "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+          "group flex h-16 w-full min-w-[7.5rem] items-center justify-start space-x-3 whitespace-normal rounded-[0.75rem] bg-zinc-50 px-[0.875rem] py-[0.625rem] text-start shadow-none",
+          "hover:cursor-default hover:bg-zinc-100 focus:ring-0 active:bg-zinc-100 active:ring-1 active:ring-zinc-300 disabled:cursor-not-allowed",
+          isMCPBlock && "hover:cursor-pointer",
+          className,
         )}
+        onDragStart={handleDragStart}
+        onClick={handleClick}
+        {...rest}
       >
-        <PlusIcon className="h-5 w-5 text-zinc-50" />
-      </div>
-    </Button>
+        <div className="flex flex-1 flex-col items-start gap-0.5">
+          {title && (
+            <span
+              className={cn(
+                "line-clamp-1 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800 group-disabled:text-zinc-400",
+              )}
+            >
+              {highlightText(beautifyString(title), highlightedText)}
+            </span>
+          )}
+          {description && (
+            <span
+              className={cn(
+                "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",
+              )}
+            >
+              {highlightText(description, highlightedText)}
+            </span>
+          )}
+        </div>
+        <div
+          className={cn(
+            "flex h-7 w-7 items-center justify-center rounded-[0.5rem] bg-zinc-700 group-disabled:bg-zinc-400",
+          )}
+        >
+          <PlusIcon className="h-5 w-5 text-zinc-50" />
+        </div>
+      </Button>
+      {isMCPBlock && (
+        <MCPToolDialog
+          open={mcpDialogOpen}
+          onClose={() => setMcpDialogOpen(false)}
+          onConfirm={handleMCPToolConfirm}
+        />
+      )}
+    </>
   );
 };
 

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx

@@ -1,30 +1,100 @@
+// import { Separator } from "@/components/__legacy__/ui/separator";
 import { cn } from "@/lib/utils";
 import React, { memo } from "react";
 import { BlockMenu } from "./NewBlockMenu/BlockMenu/BlockMenu";
 import { useNewControlPanel } from "./useNewControlPanel";
+// import { NewSaveControl } from "../SaveControl/NewSaveControl";
+import { GraphExecutionID } from "@/lib/autogpt-server-api";
+// import { ControlPanelButton } from "../ControlPanelButton";
+// import { GraphSearchMenu } from "../GraphMenu/GraphMenu";
 import { Separator } from "@/components/__legacy__/ui/separator";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { CustomNode } from "../FlowEditor/nodes/CustomNode/CustomNode";
 import { NewSaveControl } from "./NewSaveControl/NewSaveControl";
 import { UndoRedoButtons } from "./UndoRedoButtons";
 
-export const NewControlPanel = memo(() => {
-  useNewControlPanel({});
+export type Control = {
+  icon: React.ReactNode;
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
 
-  return (
-    <section
-      className={cn(
-        "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
-      )}
-    >
-      <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
-        <BlockMenu />
-        <Separator className="text-[#E1E1E1]" />
-        <NewSaveControl />
-        <Separator className="text-[#E1E1E1]" />
-        <UndoRedoButtons />
-      </div>
-    </section>
-  );
-});
+export type NewControlPanelProps = {
+  flowExecutionID?: GraphExecutionID | undefined;
+  visualizeBeads?: "no" | "static" | "animate";
+  pinSavePopover?: boolean;
+  pinBlocksPopover?: boolean;
+  nodes?: CustomNode[];
+  onNodeSelect?: (nodeId: string) => void;
+  onNodeHover?: (nodeId: string) => void;
+};
+export const NewControlPanel = memo(
+  ({
+    flowExecutionID: _flowExecutionID,
+    visualizeBeads: _visualizeBeads,
+    pinSavePopover: _pinSavePopover,
+    pinBlocksPopover: _pinBlocksPopover,
+    nodes: _nodes,
+    onNodeSelect: _onNodeSelect,
+    onNodeHover: _onNodeHover,
+  }: NewControlPanelProps) => {
+    const _isGraphSearchEnabled = useGetFlag(Flag.GRAPH_SEARCH);
+
+    const {
+      // agentDescription,
+      // setAgentDescription,
+      // saveAgent,
+      // agentName,
+      // setAgentName,
+      // savedAgent,
+      // isSaving,
+      // isRunning,
+      // isStopping,
+    } = useNewControlPanel({});
+
+    return (
+      <section
+        className={cn(
+          "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
+        )}
+      >
+        <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
+          <BlockMenu />
+          {/* <Separator className="text-[#E1E1E1]" />
+        {isGraphSearchEnabled && (
+          <>
+            <GraphSearchMenu
+              nodes={nodes}
+              blockMenuSelected={blockMenuSelected}
+              setBlockMenuSelected={setBlockMenuSelected}
+              onNodeSelect={onNodeSelect}
+              onNodeHover={onNodeHover}
+            />
+            <Separator className="text-[#E1E1E1]" />
+          </>
+        )}
+        {controls.map((control, index) => (
+          <ControlPanelButton
+            key={index}
+            onClick={() => control.onClick()}
+            data-id={`control-button-${index}`}
+            data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
+            disabled={control.disabled || false}
+            className="rounded-none"
+          >
+            {control.icon}
+          </ControlPanelButton>
+        ))} */}
+          <Separator className="text-[#E1E1E1]" />
+          <NewSaveControl />
+          <Separator className="text-[#E1E1E1]" />
+          <UndoRedoButtons />
+        </div>
+      </section>
+    );
+  },
+);
 
 export default NewControlPanel;
 

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx

@@ -1,4 +1,4 @@
-import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
+import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
 import {
   Popover,
   PopoverContent,

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu.ts

@@ -1,5 +1,5 @@
 import { useGraphSearch } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
-import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
+import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
 
 interface UseGraphMenuProps {
   nodes: CustomNode[];

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Separator } from "@/components/__legacy__/ui/separator";
 import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { beautifyString, categoryColorMap } from "@/lib/utils";
+import { beautifyString, getPrimaryCategoryColor } from "@/lib/utils";
 import { SearchableNode } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
 import { TextRenderer } from "@/components/__legacy__/ui/render";
 import {
@@ -73,12 +73,14 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
               }
 
               const nodeTitle =
-                (node.data?.metadata?.customized_name as string) ||
-                beautifyString(node.data?.title || "").replace(/ Block$/, "");
-              const nodeType = beautifyString(node.data?.title || "").replace(
-                / Block$/,
-                "",
-              );
+                node.data?.metadata?.customized_name ||
+                beautifyString(node.data?.blockType || "").replace(
+                  / Block$/,
+                  "",
+                );
+              const nodeType = beautifyString(
+                node.data?.blockType || "",
+              ).replace(/ Block$/, "");
 
               return (
                 <TooltipProvider key={node.id}>
@@ -98,13 +100,7 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         onMouseLeave={() => onNodeHover?.(null)}
                       >
                         <div
-                          className={`h-full w-3 rounded-l-[7px] ${
-                            (node.data?.categories?.[0]?.category &&
-                              categoryColorMap[
-                                node.data.categories[0].category
-                              ]) ||
-                            "bg-gray-300 dark:bg-slate-700"
-                          }`}
+                          className={`h-full w-3 rounded-l-[7px] ${getPrimaryCategoryColor(node.data?.categories)}`}
                         />
                         <div className="mx-3 flex flex-1 items-center justify-between">
                           <div className="mr-2 min-w-0">
@@ -133,10 +129,9 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         <div className="font-semibold">
                           Node Type: {nodeType}
                         </div>
-                        {!!node.data?.metadata?.customized_name && (
+                        {node.data?.metadata?.customized_name && (
                           <div className="text-xs text-gray-500">
-                            Custom Name:{" "}
-                            {String(node.data.metadata.customized_name)}
+                            Custom Name: {node.data.metadata.customized_name}
                           </div>
                         )}
                       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuSearchBar/useGraphMenuSearchBar.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useDeferredValue } from "react";
-import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
+import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
 import { beautifyString } from "@/lib/utils";
 import jaro from "jaro-winkler";
 
@@ -67,10 +67,10 @@ function calculateNodeScore(
   const nodeTitle = (node.data?.title || "").toLowerCase(); // This includes the ID
   const nodeId = (node.id || "").toLowerCase();
   const nodeDescription = (node.data?.description || "").toLowerCase();
-  const blockType = (node.data?.title || "").toLowerCase();
+  const blockType = (node.data?.blockType || "").toLowerCase();
   const beautifiedBlockType = beautifyString(blockType).toLowerCase();
-  const customizedName = String(
-    node.data?.metadata?.customized_name || "",
+  const customizedName = (
+    node.data?.metadata?.customized_name || ""
   ).toLowerCase();
 
   // Get input and output names with defensive checks

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/useNewControlPanel.ts

@@ -1,18 +1,54 @@
+import { GraphID } from "@/lib/autogpt-server-api";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 export interface NewControlPanelProps {
+  // flowExecutionID: GraphExecutionID | undefined;
   visualizeBeads?: "no" | "static" | "animate";
 }
 
 export const useNewControlPanel = ({
+  // flowExecutionID,
   visualizeBeads: _visualizeBeads,
 }: NewControlPanelProps) => {
   const [blockMenuSelected, setBlockMenuSelected] = useState<
     "save" | "block" | "search" | ""
   >("");
+  const query = useSearchParams();
+  const _graphVersion = query.get("flowVersion");
+  const _graphVersionParsed = _graphVersion
+    ? parseInt(_graphVersion)
+    : undefined;
+
+  const _flowID = (query.get("flowID") as GraphID | null) ?? undefined;
+  // const {
+  //   agentDescription,
+  //   setAgentDescription,
+  //   saveAgent,
+  //   agentName,
+  //   setAgentName,
+  //   savedAgent,
+  //   isSaving,
+  //   isRunning,
+  //   isStopping,
+  // } = useAgentGraph(
+  //   flowID,
+  //   graphVersion,
+  //   flowExecutionID,
+  //   visualizeBeads !== "no",
+  // );
 
   return {
     blockMenuSelected,
     setBlockMenuSelected,
+    // agentDescription,
+    // setAgentDescription,
+    // saveAgent,
+    // agentName,
+    // setAgentName,
+    // savedAgent,
+    // isSaving,
+    // isRunning,
+    // isStopping,
   };
 };

autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx

@@ -0,0 +1,83 @@
+import { useMemo } from "react";
+
+import { Link } from "@/app/api/__generated__/models/link";
+import { useEdgeStore } from "../stores/edgeStore";
+import { useNodeStore } from "../stores/nodeStore";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { customEdgeToLink } from "./helper";
+
+export const RightSidebar = () => {
+  const edges = useEdgeStore((s) => s.edges);
+  const nodes = useNodeStore((s) => s.nodes);
+
+  const backendLinks: Link[] = useMemo(
+    () => edges.map(customEdgeToLink),
+    [edges],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full flex-col border-l border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
+        scrollbarStyles,
+      )}
+    >
+      <div className="mb-4">
+        <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
+          Graph Debug Panel
+        </h2>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <h3 className="mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+          Nodes ({nodes.length})
+        </h3>
+        <div className="mb-6 space-y-3">
+          {nodes.map((n) => (
+            <div
+              key={n.id}
+              className="rounded border p-2 text-xs dark:border-slate-700"
+            >
+              <div className="mb-1 font-medium">
+                #{n.id} {n.data?.title ? `– ${n.data.title}` : ""}
+              </div>
+              <div className="text-slate-500 dark:text-slate-400">
+                hardcodedValues
+              </div>
+              <pre className="mt-1 max-h-40 overflow-auto rounded bg-slate-50 p-2 dark:bg-slate-800">
+                {JSON.stringify(n.data?.hardcodedValues ?? {}, null, 2)}
+              </pre>
+            </div>
+          ))}
+        </div>
+
+        <h3 className="mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
+          Links ({backendLinks.length})
+        </h3>
+        <div className="mb-6 space-y-3">
+          {backendLinks.map((l) => (
+            <div
+              key={l.id}
+              className="rounded border p-2 text-xs dark:border-slate-700"
+            >
+              <div className="font-medium">
+                {l.source_id}[{l.source_name}] → {l.sink_id}[{l.sink_name}]
+              </div>
+              <div className="mt-1 text-slate-500 dark:text-slate-400">
+                edge.id: {l.id}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <h4 className="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">
+          Backend Links JSON
+        </h4>
+        <pre className="max-h-64 overflow-auto rounded bg-slate-50 p-2 text-[11px] dark:bg-slate-800">
+          {JSON.stringify(backendLinks, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx

@@ -0,0 +1,486 @@
+import React, { useCallback, useMemo, useState, useDeferredValue } from "react";
+import { Card, CardContent, CardHeader } from "@/components/__legacy__/ui/card";
+import { Label } from "@/components/__legacy__/ui/label";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Input } from "@/components/__legacy__/ui/input";
+import { TextRenderer } from "@/components/__legacy__/ui/render";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
+import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { beautifyString } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/__legacy__/ui/popover";
+import {
+  Block,
+  BlockIORootSchema,
+  BlockUIType,
+  GraphInputSchema,
+  GraphOutputSchema,
+  SpecialBlockID,
+} from "@/lib/autogpt-server-api";
+import { MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";
+import { IconToyBrick } from "@/components/__legacy__/ui/icons";
+import { getPrimaryCategoryColor } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { GraphMeta } from "@/lib/autogpt-server-api";
+import {
+  MCPToolDialog,
+  type MCPToolDialogResult,
+} from "@/app/(platform)/build/components/legacy-builder/MCPToolDialog";
+import jaro from "jaro-winkler";
+import { getV1GetSpecificGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
+import { okData } from "@/app/api/helpers";
+
+type _Block = Omit<Block, "inputSchema" | "outputSchema"> & {
+  uiKey?: string;
+  inputSchema: BlockIORootSchema | GraphInputSchema;
+  outputSchema: BlockIORootSchema | GraphOutputSchema;
+  hardcodedValues?: Record<string, any>;
+  _cached?: {
+    blockName: string;
+    beautifiedName: string;
+    description: string;
+  };
+};
+
+// Hook to preprocess blocks with cached expensive operations
+const useSearchableBlocks = (blocks: _Block[]): _Block[] => {
+  return useMemo(
+    () =>
+      blocks.map((block) => {
+        if (!block._cached) {
+          block._cached = {
+            blockName: block.name.toLowerCase(),
+            beautifiedName: beautifyString(block.name).toLowerCase(),
+            description: block.description.toLowerCase(),
+          };
+        }
+        return block;
+      }),
+    [blocks],
+  );
+};
+
+interface BlocksControlProps {
+  blocks: _Block[];
+  addBlock: (
+    id: string,
+    name: string,
+    hardcodedValues: Record<string, any>,
+  ) => void;
+  pinBlocksPopover: boolean;
+  flows: GraphMeta[];
+  nodes: CustomNode[];
+}
+
+/**
+ * A React functional component that displays a control for managing blocks.
+ *
+ * @component
+ * @param {Object} BlocksControlProps - The properties for the BlocksControl component.
+ * @param {Block[]} BlocksControlProps.blocks - An array of blocks to be displayed and filtered.
+ * @param {(id: string, name: string) => void} BlocksControlProps.addBlock - A function to call when a block is added.
+ * @returns The rendered BlocksControl component.
+ */
+export function BlocksControl({
+  blocks: _blocks,
+  addBlock,
+  pinBlocksPopover,
+  flows,
+  nodes,
+}: BlocksControlProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+
+  const blocks = useSearchableBlocks(_blocks);
+
+  const graphHasWebhookNodes = nodes.some((n) =>
+    [BlockUIType.WEBHOOK, BlockUIType.WEBHOOK_MANUAL].includes(n.data.uiType),
+  );
+  const graphHasInputNodes = nodes.some(
+    (n) => n.data.uiType == BlockUIType.INPUT,
+  );
+
+  const filteredAvailableBlocks = useMemo(() => {
+    const blockList = blocks
+      .filter((b) => b.uiType !== BlockUIType.AGENT)
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    // Agent blocks are created from GraphMeta which doesn't include schemas.
+    // Schemas will be fetched on-demand when the block is actually added.
+    const agentBlockList = flows
+      .map((flow): _Block => {
+        return {
+          id: SpecialBlockID.AGENT,
+          name: flow.name,
+          description:
+            `Ver.${flow.version}` +
+            (flow.description ? ` | ${flow.description}` : ""),
+          categories: [{ category: "AGENT", description: "" }],
+          // Empty schemas - will be populated when block is added
+          inputSchema: { type: "object", properties: {} },
+          outputSchema: { type: "object", properties: {} },
+          staticOutput: false,
+          uiType: BlockUIType.AGENT,
+          costs: [],
+          uiKey: flow.id,
+          hardcodedValues: {
+            graph_id: flow.id,
+            graph_version: flow.version,
+            // Schemas will be fetched on-demand when block is added
+          },
+        };
+      })
+      .map(
+        (agentBlock): _Block => ({
+          ...agentBlock,
+          _cached: {
+            blockName: agentBlock.name.toLowerCase(),
+            beautifiedName: beautifyString(agentBlock.name).toLowerCase(),
+            description: agentBlock.description.toLowerCase(),
+          },
+        }),
+      );
+
+    return blockList
+      .concat(agentBlockList)
+      .map((block) => ({
+        block,
+        score: blockScoreForQuery(block, deferredSearchQuery),
+      }))
+      .filter(
+        ({ block, score }) =>
+          score > 0 &&
+          (!selectedCategory ||
+            block.categories.some((cat) => cat.category === selectedCategory)),
+      )
+      .sort((a, b) => b.score - a.score)
+      .map(({ block }) => ({
+        ...block,
+        notAvailable:
+          (block.uiType == BlockUIType.WEBHOOK &&
+            graphHasWebhookNodes &&
+            "Agents can only have one webhook-triggered block") ||
+          (block.uiType == BlockUIType.WEBHOOK &&
+            graphHasInputNodes &&
+            "Webhook-triggered blocks can't be used together with input blocks") ||
+          (block.uiType == BlockUIType.INPUT &&
+            graphHasWebhookNodes &&
+            "Input blocks can't be used together with a webhook-triggered block") ||
+          null,
+      }));
+  }, [
+    blocks,
+    flows,
+    selectedCategory,
+    deferredSearchQuery,
+    graphHasInputNodes,
+    graphHasWebhookNodes,
+  ]);
+
+  const resetFilters = useCallback(() => {
+    setSearchQuery("");
+    setSelectedCategory(null);
+  }, []);
+
+  const handleMCPToolConfirm = useCallback(
+    (result: MCPToolDialogResult) => {
+      addBlock(SpecialBlockID.MCP_TOOL, "MCPToolBlock", {
+        server_url: result.serverUrl,
+        server_name: result.serverName,
+        selected_tool: result.selectedTool,
+        tool_input_schema: result.toolInputSchema,
+        available_tools: result.availableTools,
+        credentials: result.credentials ?? undefined,
+      });
+      setMcpDialogOpen(false);
+    },
+    [addBlock],
+  );
+
+  // Handler to add a block, fetching graph data on-demand for agent blocks
+  const handleAddBlock = useCallback(
+    async (block: _Block & { notAvailable: string | null }) => {
+      if (block.notAvailable) return;
+
+      // For MCP blocks, open the configuration dialog instead of placing directly
+      if (block.uiType === BlockUIType.MCP_TOOL) {
+        setMcpDialogOpen(true);
+        return;
+      }
+
+      // For agent blocks, fetch the full graph to get schemas
+      if (block.uiType === BlockUIType.AGENT && block.hardcodedValues) {
+        const graphID = block.hardcodedValues.graph_id as string;
+        const graphVersion = block.hardcodedValues.graph_version as number;
+        const graphData = okData(
+          await getV1GetSpecificGraph(graphID, { version: graphVersion }),
+        );
+
+        if (graphData) {
+          addBlock(block.id, block.name, {
+            ...block.hardcodedValues,
+            input_schema: graphData.input_schema,
+            output_schema: graphData.output_schema,
+          });
+        } else {
+          // Fallback: add without schemas (will be incomplete)
+          console.error("Failed to fetch graph data for agent block");
+          addBlock(block.id, block.name, block.hardcodedValues || {});
+        }
+      } else {
+        addBlock(block.id, block.name, block.hardcodedValues || {});
+      }
+    },
+    [addBlock],
+  );
+
+  // Extract unique categories from blocks
+  const categories = useMemo(() => {
+    return Array.from(
+      new Set([
+        null,
+        ...blocks
+          .flatMap((block) => block.categories.map((cat) => cat.category))
+          .sort(),
+      ]),
+    );
+  }, [blocks]);
+
+  return (
+    <>
+      <Popover
+        open={pinBlocksPopover ? true : undefined}
+        onOpenChange={(open) => open || resetFilters()}
+      >
+        <Tooltip delayDuration={500}>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                data-id="blocks-control-popover-trigger"
+                data-testid="blocks-control-blocks-button"
+                name="Blocks"
+                className="dark:hover:bg-slate-800"
+              >
+                <IconToyBrick />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="right">Blocks</TooltipContent>
+        </Tooltip>
+        <PopoverContent
+          side="right"
+          sideOffset={22}
+          align="start"
+          className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
+          data-id="blocks-control-popover-content"
+        >
+          <Card className="p-3 pb-0 dark:bg-slate-900">
+            <CardHeader className="flex flex-col gap-x-8 gap-y-1 p-3 px-2">
+              <div className="items-center justify-between">
+                <Label
+                  htmlFor="search-blocks"
+                  className="whitespace-nowrap text-base font-bold text-black dark:text-white 2xl:text-xl"
+                  data-id="blocks-control-label"
+                  data-testid="blocks-control-blocks-label"
+                >
+                  Blocks
+                </Label>
+              </div>
+              <div className="relative flex items-center">
+                <MagnifyingGlassIcon className="absolute m-2 h-5 w-5 text-gray-500 dark:text-gray-400" />
+                <Input
+                  id="search-blocks"
+                  type="text"
+                  placeholder="Search blocks"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="rounded-lg px-8 py-5 dark:bg-slate-800 dark:text-white"
+                  data-id="blocks-control-search-input"
+                  autoComplete="off"
+                />
+              </div>
+              <div
+                className="mt-2 flex flex-wrap gap-2"
+                data-testid="blocks-categories-list"
+              >
+                {categories.map((category) => {
+                  const color = getPrimaryCategoryColor([
+                    { category: category || "All", description: "" },
+                  ]);
+                  const colorClass =
+                    selectedCategory === category ? `${color}` : "";
+                  return (
+                    <div
+                      key={category}
+                      data-testid="blocks-category"
+                      role="button"
+                      className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium dark:border-slate-700 dark:text-white ${colorClass}`}
+                      onClick={() =>
+                        setSelectedCategory(
+                          selectedCategory === category ? null : category,
+                        )
+                      }
+                    >
+                      {beautifyString((category || "All").toLowerCase())}
+                    </div>
+                  );
+                })}
+              </div>
+            </CardHeader>
+            <CardContent className="overflow-scroll border-t border-t-gray-200 p-0 dark:border-t-slate-700">
+              <ScrollArea
+                className="h-[60vh] w-full"
+                data-id="blocks-control-scroll-area"
+              >
+                {filteredAvailableBlocks.map((block) => (
+                  <Card
+                    key={block.uiKey || block.id}
+                    className={`m-2 my-4 flex h-20 shadow-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 ${
+                      block.notAvailable
+                        ? "cursor-not-allowed opacity-50"
+                        : block.uiType === BlockUIType.MCP_TOOL
+                          ? "cursor-pointer hover:shadow-lg"
+                          : "cursor-move hover:shadow-lg"
+                    }`}
+                    data-id={`block-card-${block.id}`}
+                    draggable={
+                      !block.notAvailable &&
+                      block.uiType !== BlockUIType.MCP_TOOL
+                    }
+                    onDragStart={(e) => {
+                      if (
+                        block.notAvailable ||
+                        block.uiType === BlockUIType.MCP_TOOL
+                      )
+                        return;
+                      e.dataTransfer.effectAllowed = "copy";
+                      e.dataTransfer.setData(
+                        "application/reactflow",
+                        JSON.stringify({
+                          blockId: block.id,
+                          blockName: block.name,
+                          hardcodedValues: block?.hardcodedValues || {},
+                        }),
+                      );
+                    }}
+                    onClick={() => handleAddBlock(block)}
+                    title={block.notAvailable ?? undefined}
+                  >
+                    <div
+                      className={`-ml-px h-full w-3 rounded-l-xl ${getPrimaryCategoryColor(block.categories)}`}
+                    ></div>
+
+                    <div className="mx-3 flex flex-1 items-center justify-between">
+                      <div className="mr-2 min-w-0">
+                        <span
+                          className="block truncate pb-1 text-sm font-semibold dark:text-white"
+                          data-id={`block-name-${block.id}`}
+                          data-type={block.uiType}
+                          data-testid={`block-name-${block.id}`}
+                        >
+                          <TextRenderer
+                            value={beautifyString(block.name).replace(
+                              / Block$/,
+                              "",
+                            )}
+                            truncateLengthLimit={45}
+                          />
+                        </span>
+                        <span
+                          className="block break-all text-xs font-normal text-gray-500 dark:text-gray-400"
+                          data-testid={`block-description-${block.id}`}
+                        >
+                          <TextRenderer
+                            value={block.description}
+                            truncateLengthLimit={165}
+                          />
+                        </span>
+                      </div>
+                      <div
+                        className="flex flex-shrink-0 items-center gap-1"
+                        data-id={`block-tooltip-${block.id}`}
+                        data-testid={`block-add`}
+                      >
+                        <PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1 dark:bg-gray-700 dark:stroke-white" />
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </PopoverContent>
+      </Popover>
+
+      <MCPToolDialog
+        open={mcpDialogOpen}
+        onClose={() => setMcpDialogOpen(false)}
+        onConfirm={handleMCPToolConfirm}
+      />
+    </>
+  );
+}
+
+/**
+ * Evaluates how well a block matches the search query and returns a relevance score.
+ * The scoring algorithm works as follows:
+ * - Returns 1 if no query (all blocks match equally)
+ * - Normalized query for case-insensitive matching
+ * - Returns 3 for exact substring matches in block name (highest priority)
+ * - Returns 2 when all query words appear in the block name (regardless of order)
+ * - Returns 1.X for blocks with names similar to query using Jaro-Winkler distance (X is similarity score)
+ * - Returns 0.5 when all query words appear in the block description (lowest priority)
+ * - Returns 0 for no match
+ *
+ * Higher scores will appear first in search results.
+ */
+function blockScoreForQuery(block: _Block, query: string): number {
+  if (!query) return 1;
+  const normalizedQuery = query.toLowerCase().trim();
+  const queryWords = normalizedQuery.split(/\s+/);
+
+  // Use cached values for performance
+  const { blockName, beautifiedName, description } = block._cached!;
+
+  // 1. Exact match in name (highest priority)
+  if (
+    blockName.includes(normalizedQuery) ||
+    beautifiedName.includes(normalizedQuery)
+  ) {
+    return 3;
+  }
+
+  // 2. All query words in name (regardless of order)
+  const allWordsInName = queryWords.every(
+    (word) => blockName.includes(word) || beautifiedName.includes(word),
+  );
+  if (allWordsInName) return 2;
+
+  // 3. Similarity with name (Jaro-Winkler)
+  const similarityThreshold = 0.65;
+  const nameSimilarity = jaro(blockName, normalizedQuery);
+  const beautifiedSimilarity = jaro(beautifiedName, normalizedQuery);
+  const maxSimilarity = Math.max(nameSimilarity, beautifiedSimilarity);
+  if (maxSimilarity > similarityThreshold) {
+    return 1 + maxSimilarity; // Score between 1 and 2
+  }
+
+  // 4. All query words in description (lower priority)
+  const allWordsInDescription = queryWords.every((word) =>
+    description.includes(word),
+  );
+  if (allWordsInDescription) return 0.5;
+
+  return 0;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BuildActionBar.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/__legacy__/ui/button";
+import { LogOut } from "lucide-react";
+import { ClockIcon, WarningIcon } from "@phosphor-icons/react";
+import { IconPlay, IconSquare } from "@/components/__legacy__/ui/icons";
+
+interface Props {
+  onClickAgentOutputs?: () => void;
+  onClickRunAgent?: () => void;
+  onClickStopRun: () => void;
+  onClickScheduleButton?: () => void;
+  isRunning: boolean;
+  isDisabled: boolean;
+  className?: string;
+  resolutionModeActive?: boolean;
+}
+
+export const BuildActionBar: React.FC<Props> = ({
+  onClickAgentOutputs,
+  onClickRunAgent,
+  onClickStopRun,
+  onClickScheduleButton,
+  isRunning,
+  isDisabled,
+  className,
+  resolutionModeActive = false,
+}) => {
+  const buttonClasses =
+    "flex items-center gap-2 text-sm font-medium md:text-lg";
+
+  // Show resolution mode message instead of action buttons
+  if (resolutionModeActive) {
+    return (
+      <div
+        className={cn(
+          "flex w-fit select-none items-center justify-center p-4",
+          className,
+        )}
+      >
+        <div className="flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 dark:border-amber-700 dark:bg-amber-900/30">
+          <WarningIcon className="size-5 text-amber-600 dark:text-amber-400" />
+          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
+            Remove incompatible connections to continue
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex w-fit select-none items-center justify-center p-4",
+        className,
+      )}
+    >
+      <div className="flex gap-1 md:gap-4">
+        {onClickAgentOutputs && (
+          <Button
+            className={buttonClasses}
+            variant="outline"
+            size="primary"
+            onClick={onClickAgentOutputs}
+            title="View agent outputs"
+          >
+            <LogOut className="hidden size-5 md:flex" /> Agent Outputs
+          </Button>
+        )}
+
+        {!isRunning ? (
+          <Button
+            className={cn(
+              buttonClasses,
+              onClickRunAgent && isDisabled
+                ? "cursor-default opacity-50 hover:bg-accent"
+                : "",
+            )}
+            variant="accent"
+            size="primary"
+            onClick={onClickRunAgent}
+            disabled={!onClickRunAgent}
+            title="Run the agent"
+            aria-label="Run the agent"
+            data-testid="primary-action-run-agent"
+            data-tutorial-id="primary-action-run-agent"
+          >
+            <IconPlay /> Run
+          </Button>
+        ) : (
+          <Button
+            className={buttonClasses}
+            variant="destructive"
+            size="primary"
+            onClick={onClickStopRun}
+            title="Stop the agent"
+            data-id="primary-action-stop-agent"
+          >
+            <IconSquare /> Stop
+          </Button>
+        )}
+
+        {onClickScheduleButton && (
+          <Button
+            className={buttonClasses}
+            variant="outline"
+            size="primary"
+            onClick={onClickScheduleButton}
+            title="Set up a run schedule for the agent"
+            data-id="primary-action-schedule-agent"
+          >
+            <ClockIcon className="hidden h-5 w-5 md:flex" />
+            Schedule Run
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ConnectionLine.tsx

@@ -0,0 +1,33 @@
+import {
+  BaseEdge,
+  ConnectionLineComponentProps,
+  Node,
+  getBezierPath,
+  Position,
+} from "@xyflow/react";
+
+export default function ConnectionLine<NodeType extends Node>({
+  fromPosition,
+  fromHandle,
+  fromX,
+  fromY,
+  toPosition,
+  toX,
+  toY,
+}: ConnectionLineComponentProps<NodeType>) {
+  const sourceX =
+    fromPosition === Position.Right
+      ? fromX + ((fromHandle?.width ?? 0) / 2 - 5)
+      : fromX - ((fromHandle?.width ?? 0) / 2 - 5);
+
+  const [path] = getBezierPath({
+    sourceX: sourceX,
+    sourceY: fromY,
+    sourcePosition: fromPosition,
+    targetX: toX,
+    targetY: toY,
+    targetPosition: toPosition,
+  });
+
+  return <BaseEdge path={path} style={{ strokeWidth: 2, stroke: "#555" }} />;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ControlPanel.tsx

@@ -0,0 +1,86 @@
+import { Card, CardContent } from "@/components/__legacy__/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Separator } from "@/components/__legacy__/ui/separator";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+/**
+ * Represents a control element for the ControlPanel Component.
+ * @type {Object} Control
+ * @property {React.ReactNode} icon - The icon of the control from lucide-react https://lucide.dev/icons/
+ * @property {string} label - The label of the control, to be leveraged by ToolTip.
+ * @property {onclick} onClick - The function to be executed when the control is clicked.
+ */
+export type Control = {
+  icon: React.ReactNode;
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+interface ControlPanelProps {
+  controls: Control[];
+  topChildren?: React.ReactNode;
+  botChildren?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ControlPanel component displays a panel with controls as icons.tsx with the ability to take in children.
+ * @param {Object} ControlPanelProps - The properties of the control panel component.
+ * @param {Array} ControlPanelProps.controls - An array of control objects representing actions to be preformed.
+ * @param {Array} ControlPanelProps.children - The child components of the control panel.
+ * @param {string} ControlPanelProps.className - Additional CSS class names for the control panel.
+ * @returns The rendered control panel component.
+ */
+export const ControlPanel = ({
+  controls,
+  topChildren,
+  botChildren,
+  className,
+}: ControlPanelProps) => {
+  return (
+    <Card className={cn("m-4 mt-24 w-14 dark:bg-slate-900", className)}>
+      <CardContent className="p-0">
+        <div className="flex flex-col items-center gap-3 rounded-xl py-3">
+          {topChildren}
+          <Separator className="dark:bg-slate-700" />
+          {controls.map((control, index) => (
+            <Tooltip key={index} delayDuration={500}>
+              <TooltipTrigger asChild>
+                <div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => control.onClick()}
+                    data-id={`control-button-${index}`}
+                    data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
+                    disabled={control.disabled || false}
+                    className="dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
+                  >
+                    {control.icon}
+                    <span className="sr-only">{control.label}</span>
+                  </Button>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent
+                side="right"
+                className="dark:bg-slate-800 dark:text-slate-100"
+              >
+                {control.label}
+              </TooltipContent>
+            </Tooltip>
+          ))}
+          <Separator className="dark:bg-slate-700" />
+          {botChildren}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+export default ControlPanel;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/CustomEdge.tsx

@@ -0,0 +1,240 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+} from "react";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  useReactFlow,
+  XYPosition,
+  Edge,
+  Node,
+} from "@xyflow/react";
+import "./customedge.css";
+import { X } from "lucide-react";
+import { BuilderContext } from "../Flow/Flow";
+import { NodeExecutionResult } from "@/lib/autogpt-server-api";
+import { useCustomEdge } from "./useCustomEdge";
+
+export type CustomEdgeData = {
+  edgeColor: string;
+  sourcePos?: XYPosition;
+  isStatic?: boolean;
+  beadUp: number;
+  beadDown: number;
+  beadData?: Map<string, NodeExecutionResult["status"]>;
+};
+
+type Bead = {
+  t: number;
+  targetT: number;
+  startTime: number;
+};
+
+export type CustomEdge = Edge<CustomEdgeData, "custom">;
+
+export function CustomEdge({
+  id,
+  data,
+  selected,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  markerEnd,
+}: EdgeProps<CustomEdge>) {
+  const [beads, setBeads] = useState<{
+    beads: Bead[];
+    created: number;
+    destroyed: number;
+  }>({ beads: [], created: 0, destroyed: 0 });
+  const beadsRef = useRef(beads);
+  const { svgPath, length, getPointForT, getTForDistance } = useCustomEdge(
+    sourceX - 5,
+    sourceY - 5,
+    targetX + 3,
+    targetY - 5,
+  );
+  const { deleteElements } = useReactFlow<Node, CustomEdge>();
+  const builderContext = useContext(BuilderContext);
+  const { visualizeBeads } = builderContext ?? {
+    visualizeBeads: "no",
+  };
+
+  // Check if this edge is broken (during resolution mode)
+  const isBroken =
+    builderContext?.resolutionMode?.active &&
+    builderContext?.resolutionMode?.brokenEdgeIds?.includes(id);
+
+  const onEdgeRemoveClick = () => {
+    deleteElements({ edges: [{ id }] });
+  };
+
+  const animationDuration = 500; // Duration in milliseconds for bead to travel the curve
+  const beadDiameter = 12;
+  const deltaTime = 16;
+
+  const setTargetPositions = useCallback(
+    (beads: Bead[]) => {
+      const distanceBetween = Math.min(
+        (length - beadDiameter) / (beads.length + 1),
+        beadDiameter,
+      );
+
+      return beads.map((bead, index) => {
+        const distanceFromEnd = beadDiameter * 1.35;
+        const targetPosition = distanceBetween * index + distanceFromEnd;
+        const t = getTForDistance(-targetPosition);
+
+        return {
+          ...bead,
+          t: visualizeBeads === "animate" ? bead.t : t,
+          targetT: t,
+        } as Bead;
+      });
+    },
+    [getTForDistance, length, visualizeBeads],
+  );
+
+  beadsRef.current = beads;
+  useEffect(() => {
+    const beadUp: number = data?.beadUp ?? 0;
+    const beadDown: number = data?.beadDown ?? 0;
+
+    if (
+      beadUp === 0 &&
+      beadDown === 0 &&
+      (beads.created > 0 || beads.destroyed > 0)
+    ) {
+      setBeads({ beads: [], created: 0, destroyed: 0 });
+      return;
+    }
+
+    // Add beads
+    if (beadUp > beads.created) {
+      setBeads(({ beads, created, destroyed }) => {
+        const newBeads = [];
+        for (let i = 0; i < beadUp - created; i++) {
+          newBeads.push({ t: 0, targetT: 0, startTime: Date.now() });
+        }
+
+        const b = setTargetPositions([...beads, ...newBeads]);
+        return { beads: b, created: beadUp, destroyed };
+      });
+    }
+
+    // Animate and remove beads
+    const interval = setInterval(
+      ({ current: beads }) => {
+        // If there are no beads visible or moving, stop re-rendering
+        if (
+          (beadUp === beads.created && beads.created === beads.destroyed) ||
+          beads.beads.every((bead) => bead.t >= bead.targetT)
+        ) {
+          clearInterval(interval);
+          return;
+        }
+
+        setBeads(({ beads, created, destroyed }) => {
+          let destroyedCount = 0;
+
+          const newBeads = beads
+            .map((bead) => {
+              const progressIncrement = deltaTime / animationDuration;
+              const t = Math.min(
+                bead.t + bead.targetT * progressIncrement,
+                bead.targetT,
+              );
+
+              return { ...bead, t };
+            })
+            .filter((bead, index) => {
+              const removeCount = beadDown - destroyed;
+              if (bead.t >= bead.targetT && index < removeCount) {
+                destroyedCount++;
+                return false;
+              }
+              return true;
+            });
+
+          return {
+            beads: setTargetPositions(newBeads),
+            created,
+            destroyed: destroyed + destroyedCount,
+          };
+        });
+      },
+      deltaTime,
+      beadsRef,
+    );
+
+    return () => clearInterval(interval);
+  }, [data?.beadUp, data?.beadDown, setTargetPositions, visualizeBeads]);
+
+  const middle = getPointForT(0.5);
+
+  // Determine edge color - red for broken edges
+  const baseColor = data?.edgeColor ?? "#555555";
+  const edgeColor = isBroken ? "#ef4444" : baseColor;
+  // Add opacity to hex color (99 = 60% opacity, 80 = 50% opacity)
+  const strokeColor = isBroken
+    ? `${edgeColor}99`
+    : selected
+      ? edgeColor
+      : `${edgeColor}80`;
+
+  return (
+    <>
+      <BaseEdge
+        path={svgPath}
+        markerEnd={markerEnd}
+        style={{
+          stroke: strokeColor,
+          strokeWidth: data?.isStatic ? 2.5 : 2,
+          strokeDasharray: data?.isStatic ? "5 3" : undefined,
+        }}
+        className="data-sentry-unmask transition-all duration-200"
+      />
+      <path
+        d={svgPath}
+        fill="none"
+        strokeOpacity={0}
+        strokeWidth={20}
+        className="data-sentry-unmask react-flow__edge-interaction"
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${middle.x}px,${middle.y}px)`,
+            pointerEvents: "all",
+          }}
+          className="edge-label-renderer"
+        >
+          <button
+            className="edge-label-button opacity-0 transition-opacity duration-200 hover:opacity-100"
+            onClick={onEdgeRemoveClick}
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+      {beads.beads.map((bead, index) => {
+        const pos = getPointForT(bead.t);
+        return (
+          <circle
+            key={index}
+            cx={pos.x}
+            cy={pos.y}
+            r={beadDiameter / 2} // Bead radius
+            fill={data?.edgeColor ?? "#555555"}
+          />
+        );
+      })}
+    </>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/customedge.css

@@ -0,0 +1,48 @@
+.edge-label-renderer {
+  position: absolute;
+  pointer-events: all;
+}
+
+.edge-label-button {
+  width: 20px;
+  height: 20px;
+  background: #eee;
+  border: 1px solid #fff;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  color: #555;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
+}
+
+.edge-label-button.visible {
+  opacity: 1;
+}
+
+.edge-label-button:hover {
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
+  background: #f0f0f0;
+}
+
+.edge-label-button svg {
+  width: 14px;
+  height: 14px;
+}
+
+.react-flow__edge-interaction {
+  cursor: pointer;
+}
+
+.react-flow__edges > svg:has(> g.selected) {
+  z-index: 10 !important;
+}
+
+.react-flow__edgelabel-renderer {
+  z-index: 11 !important;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/useCustomEdge.ts

@@ -0,0 +1,157 @@
+import { useCallback, useMemo } from "react";
+
+type XYPosition = {
+  x: number;
+  y: number;
+};
+
+export type BezierPath = {
+  sourcePosition: XYPosition;
+  control1: XYPosition;
+  control2: XYPosition;
+  targetPosition: XYPosition;
+};
+
+export function useCustomEdge(
+  sourceX: number,
+  sourceY: number,
+  targetX: number,
+  targetY: number,
+) {
+  const path: BezierPath = useMemo(() => {
+    const xDifference = Math.abs(sourceX - targetX);
+    const yDifference = Math.abs(sourceY - targetY);
+    const xControlDistance =
+      sourceX < targetX ? 64 : Math.max(xDifference / 2, 64);
+    const yControlDistance = yDifference < 128 && sourceX > targetX ? -64 : 0;
+
+    return {
+      sourcePosition: { x: sourceX, y: sourceY },
+      control1: {
+        x: sourceX + xControlDistance,
+        y: sourceY + yControlDistance,
+      },
+      control2: {
+        x: targetX - xControlDistance,
+        y: targetY + yControlDistance,
+      },
+      targetPosition: { x: targetX, y: targetY },
+    };
+  }, [sourceX, sourceY, targetX, targetY]);
+
+  const svgPath = useMemo(
+    () =>
+      `M ${path.sourcePosition.x} ${path.sourcePosition.y} ` +
+      `C ${path.control1.x} ${path.control1.y} ${path.control2.x} ${path.control2.y} ` +
+      `${path.targetPosition.x}, ${path.targetPosition.y}`,
+    [path],
+  );
+
+  const getPointForT = useCallback(
+    (t: number) => {
+      // Bezier formula: (1-t)^3 * p0 + 3*(1-t)^2*t*p1 + 3*(1-t)*t^2*p2 + t^3*p3
+      const x =
+        Math.pow(1 - t, 3) * path.sourcePosition.x +
+        3 * Math.pow(1 - t, 2) * t * path.control1.x +
+        3 * (1 - t) * Math.pow(t, 2) * path.control2.x +
+        Math.pow(t, 3) * path.targetPosition.x;
+
+      const y =
+        Math.pow(1 - t, 3) * path.sourcePosition.y +
+        3 * Math.pow(1 - t, 2) * t * path.control1.y +
+        3 * (1 - t) * Math.pow(t, 2) * path.control2.y +
+        Math.pow(t, 3) * path.targetPosition.y;
+
+      return { x, y };
+    },
+    [path],
+  );
+
+  const getArcLength = useCallback(
+    (t: number, samples: number = 100) => {
+      let length = 0;
+      let prevPoint = getPointForT(0);
+
+      for (let i = 1; i <= samples; i++) {
+        const currT = (i / samples) * t;
+        const currPoint = getPointForT(currT);
+        length += Math.sqrt(
+          Math.pow(currPoint.x - prevPoint.x, 2) +
+            Math.pow(currPoint.y - prevPoint.y, 2),
+        );
+        prevPoint = currPoint;
+      }
+
+      return length;
+    },
+    [getPointForT],
+  );
+
+  const length = useMemo(() => {
+    return getArcLength(1);
+  }, [getArcLength]);
+
+  const getBezierDerivative = useCallback(
+    (t: number) => {
+      const mt = 1 - t;
+      const x =
+        3 *
+        (mt * mt * (path.control1.x - path.sourcePosition.x) +
+          2 * mt * t * (path.control2.x - path.control1.x) +
+          t * t * (path.targetPosition.x - path.control2.x));
+      const y =
+        3 *
+        (mt * mt * (path.control1.y - path.sourcePosition.y) +
+          2 * mt * t * (path.control2.y - path.control1.y) +
+          t * t * (path.targetPosition.y - path.control2.y));
+      return { x, y };
+    },
+    [path],
+  );
+
+  const getTForDistance = useCallback(
+    (distance: number, epsilon: number = 0.0001) => {
+      if (distance < 0) {
+        distance = length + distance; // If distance is negative, calculate from the end of the curve
+      }
+
+      let t = distance / getArcLength(1);
+      let prevT = 0;
+
+      while (Math.abs(t - prevT) > epsilon) {
+        prevT = t;
+        const length = getArcLength(t);
+        const derivative = Math.sqrt(
+          Math.pow(getBezierDerivative(t).x, 2) +
+            Math.pow(getBezierDerivative(t).y, 2),
+        );
+        t -= (length - distance) / derivative;
+        t = Math.max(0, Math.min(1, t)); // Clamp t between 0 and 1
+      }
+
+      return t;
+    },
+    [getArcLength, getBezierDerivative, length],
+  );
+
+  const getPointAtDistance = useCallback(
+    (distance: number) => {
+      if (distance < 0) {
+        distance = length + distance; // If distance is negative, calculate from the end of the curve
+      }
+
+      const t = getTForDistance(distance);
+      return getPointForT(t);
+    },
+    [getTForDistance, getPointForT, length],
+  );
+
+  return {
+    path,
+    svgPath,
+    length,
+    getPointForT,
+    getTForDistance,
+    getPointAtDistance,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/IncompatibilityDialog.tsx

@@ -0,0 +1,244 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/__legacy__/ui/dialog";
+import { Button } from "@/components/__legacy__/ui/button";
+import { AlertTriangle, XCircle, PlusCircle } from "lucide-react";
+import { IncompatibilityInfo } from "../../../hooks/useSubAgentUpdate/types";
+import { beautifyString } from "@/lib/utils";
+import { Alert, AlertDescription } from "@/components/molecules/Alert/Alert";
+
+interface IncompatibilityDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  currentVersion: number;
+  latestVersion: number;
+  agentName: string;
+  incompatibilities: IncompatibilityInfo;
+}
+
+export const IncompatibilityDialog: React.FC<IncompatibilityDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  currentVersion,
+  latestVersion,
+  agentName,
+  incompatibilities,
+}) => {
+  const hasMissingInputs = incompatibilities.missingInputs.length > 0;
+  const hasMissingOutputs = incompatibilities.missingOutputs.length > 0;
+  const hasNewInputs = incompatibilities.newInputs.length > 0;
+  const hasNewOutputs = incompatibilities.newOutputs.length > 0;
+  const hasNewRequired = incompatibilities.newRequiredInputs.length > 0;
+  const hasTypeMismatches = incompatibilities.inputTypeMismatches.length > 0;
+
+  const hasInputChanges = hasMissingInputs || hasNewInputs;
+  const hasOutputChanges = hasMissingOutputs || hasNewOutputs;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-amber-500" />
+            Incompatible Update
+          </DialogTitle>
+          <DialogDescription>
+            Updating <strong>{beautifyString(agentName)}</strong> from v
+            {currentVersion} to v{latestVersion} will break some connections.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* Input changes - two column layout */}
+          {hasInputChanges && (
+            <TwoColumnSection
+              title="Input Changes"
+              leftIcon={<XCircle className="h-4 w-4 text-red-500" />}
+              leftTitle="Removed"
+              leftItems={incompatibilities.missingInputs}
+              rightIcon={<PlusCircle className="h-4 w-4 text-green-500" />}
+              rightTitle="Added"
+              rightItems={incompatibilities.newInputs}
+            />
+          )}
+
+          {/* Output changes - two column layout */}
+          {hasOutputChanges && (
+            <TwoColumnSection
+              title="Output Changes"
+              leftIcon={<XCircle className="h-4 w-4 text-red-500" />}
+              leftTitle="Removed"
+              leftItems={incompatibilities.missingOutputs}
+              rightIcon={<PlusCircle className="h-4 w-4 text-green-500" />}
+              rightTitle="Added"
+              rightItems={incompatibilities.newOutputs}
+            />
+          )}
+
+          {hasTypeMismatches && (
+            <SingleColumnSection
+              icon={<XCircle className="h-4 w-4 text-red-500" />}
+              title="Type Changed"
+              description="These connected inputs have a different type:"
+              items={incompatibilities.inputTypeMismatches.map(
+                (m) => `${m.name} (${m.oldType} → ${m.newType})`,
+              )}
+            />
+          )}
+
+          {hasNewRequired && (
+            <SingleColumnSection
+              icon={<PlusCircle className="h-4 w-4 text-amber-500" />}
+              title="New Required Inputs"
+              description="These inputs are now required:"
+              items={incompatibilities.newRequiredInputs}
+            />
+          )}
+        </div>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            If you proceed, you&apos;ll need to remove the broken connections
+            before you can save or run your agent.
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            className="bg-amber-600 hover:bg-amber-700"
+          >
+            Update Anyway
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+interface TwoColumnSectionProps {
+  title: string;
+  leftIcon: React.ReactNode;
+  leftTitle: string;
+  leftItems: string[];
+  rightIcon: React.ReactNode;
+  rightTitle: string;
+  rightItems: string[];
+}
+
+const TwoColumnSection: React.FC<TwoColumnSectionProps> = ({
+  title,
+  leftIcon,
+  leftTitle,
+  leftItems,
+  rightIcon,
+  rightTitle,
+  rightItems,
+}) => (
+  <div className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+    <span className="font-medium">{title}</span>
+    <div className="mt-2 grid grid-cols-2 items-start gap-4">
+      {/* Left column - Breaking changes */}
+      <div className="min-w-0">
+        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+          {leftIcon}
+          <span>{leftTitle}</span>
+        </div>
+        <ul className="mt-1.5 space-y-1">
+          {leftItems.length > 0 ? (
+            leftItems.map((item) => (
+              <li
+                key={item}
+                className="text-sm text-gray-700 dark:text-gray-300"
+              >
+                <code className="rounded bg-red-50 px-1 py-0.5 font-mono text-xs text-red-700 dark:bg-red-900/30 dark:text-red-300">
+                  {item}
+                </code>
+              </li>
+            ))
+          ) : (
+            <li className="text-sm italic text-gray-400 dark:text-gray-500">
+              None
+            </li>
+          )}
+        </ul>
+      </div>
+
+      {/* Right column - Possible solutions */}
+      <div className="min-w-0">
+        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+          {rightIcon}
+          <span>{rightTitle}</span>
+        </div>
+        <ul className="mt-1.5 space-y-1">
+          {rightItems.length > 0 ? (
+            rightItems.map((item) => (
+              <li
+                key={item}
+                className="text-sm text-gray-700 dark:text-gray-300"
+              >
+                <code className="rounded bg-green-50 px-1 py-0.5 font-mono text-xs text-green-700 dark:bg-green-900/30 dark:text-green-300">
+                  {item}
+                </code>
+              </li>
+            ))
+          ) : (
+            <li className="text-sm italic text-gray-400 dark:text-gray-500">
+              None
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
+  </div>
+);
+
+interface SingleColumnSectionProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  items: string[];
+}
+
+const SingleColumnSection: React.FC<SingleColumnSectionProps> = ({
+  icon,
+  title,
+  description,
+  items,
+}) => (
+  <div className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+    <div className="flex items-center gap-2">
+      {icon}
+      <span className="font-medium">{title}</span>
+    </div>
+    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+      {description}
+    </p>
+    <ul className="mt-2 space-y-1">
+      {items.map((item) => (
+        <li
+          key={item}
+          className="ml-4 list-disc text-sm text-gray-700 dark:text-gray-300"
+        >
+          <code className="rounded bg-gray-100 px-1 py-0.5 font-mono text-xs dark:bg-gray-800">
+            {item}
+          </code>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default IncompatibilityDialog;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/SubAgentUpdateBar.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { Button } from "@/components/__legacy__/ui/button";
+import { ArrowUp, AlertTriangle, Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { IncompatibilityInfo } from "../../../hooks/useSubAgentUpdate/types";
+import { cn } from "@/lib/utils";
+
+interface SubAgentUpdateBarProps {
+  currentVersion: number;
+  latestVersion: number;
+  isCompatible: boolean;
+  incompatibilities: IncompatibilityInfo | null;
+  onUpdate: () => void;
+  isInResolutionMode?: boolean;
+}
+
+export const SubAgentUpdateBar: React.FC<SubAgentUpdateBarProps> = ({
+  currentVersion,
+  latestVersion,
+  isCompatible,
+  incompatibilities,
+  onUpdate,
+  isInResolutionMode = false,
+}) => {
+  if (isInResolutionMode) {
+    return <ResolutionModeBar incompatibilities={incompatibilities} />;
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-2 rounded-t-lg bg-blue-50 px-3 py-2 dark:bg-blue-900/30">
+      <div className="flex items-center gap-2">
+        <ArrowUp className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+        <span className="text-sm text-blue-700 dark:text-blue-300">
+          Update available (v{currentVersion} → v{latestVersion})
+        </span>
+        {!isCompatible && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <AlertTriangle className="h-4 w-4 text-amber-500" />
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs">
+              <p className="font-medium">Incompatible changes detected</p>
+              <p className="text-xs text-gray-400">
+                Click Update to see details
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+      <Button
+        size="sm"
+        variant={isCompatible ? "default" : "outline"}
+        onClick={onUpdate}
+        className={cn(
+          "h-7 text-xs",
+          !isCompatible && "border-amber-500 text-amber-600 hover:bg-amber-50",
+        )}
+      >
+        Update
+      </Button>
+    </div>
+  );
+};
+
+interface ResolutionModeBarProps {
+  incompatibilities: IncompatibilityInfo | null;
+}
+
+const ResolutionModeBar: React.FC<ResolutionModeBarProps> = ({
+  incompatibilities,
+}) => {
+  const formatIncompatibilities = () => {
+    if (!incompatibilities) return "No incompatibilities";
+
+    const items: string[] = [];
+
+    if (incompatibilities.missingInputs.length > 0) {
+      items.push(
+        `Missing inputs: ${incompatibilities.missingInputs.join(", ")}`,
+      );
+    }
+    if (incompatibilities.missingOutputs.length > 0) {
+      items.push(
+        `Missing outputs: ${incompatibilities.missingOutputs.join(", ")}`,
+      );
+    }
+    if (incompatibilities.newRequiredInputs.length > 0) {
+      items.push(
+        `New required inputs: ${incompatibilities.newRequiredInputs.join(", ")}`,
+      );
+    }
+    if (incompatibilities.inputTypeMismatches.length > 0) {
+      const mismatches = incompatibilities.inputTypeMismatches
+        .map((m) => `${m.name} (${m.oldType} → ${m.newType})`)
+        .join(", ");
+      items.push(`Type changed: ${mismatches}`);
+    }
+
+    return items.join("\n");
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 rounded-t-lg bg-amber-50 px-3 py-2 dark:bg-amber-900/30">
+      <div className="flex items-center gap-2">
+        <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+        <span className="text-sm text-amber-700 dark:text-amber-300">
+          Remove incompatible connections
+        </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Info className="h-4 w-4 cursor-help text-amber-500" />
+          </TooltipTrigger>
+          <TooltipContent className="max-w-sm whitespace-pre-line">
+            <p className="font-medium">Incompatible changes:</p>
+            <p className="mt-1 text-xs">{formatIncompatibilities()}</p>
+            <p className="mt-2 text-xs text-gray-400">
+              Delete the red connections to continue
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default SubAgentUpdateBar;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/customnode.css

@@ -0,0 +1,131 @@
+.custom-node {
+  color: #000000;
+  box-sizing: border-box;
+  transition: border-color 0.3s ease-in-out;
+}
+
+.custom-node .custom-switch {
+  padding: 0.5rem 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.error-message {
+  color: #d9534f;
+  font-size: 13px;
+  padding-left: 0.5rem;
+}
+
+/* Existing styles */
+.handle-container {
+  display: flex;
+  position: relative;
+  margin-bottom: 0px;
+  padding: 5px;
+  min-height: 44px;
+  height: 100%;
+}
+
+.react-flow__handle {
+  background: transparent;
+  width: auto;
+  height: auto;
+  border: 0;
+  position: relative;
+  transform: none;
+}
+
+.border-error {
+  border: 1px solid #d9534f;
+}
+
+.select-input {
+  width: 100%;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
+}
+
+.radio-label {
+  display: block;
+  margin: 5px 0;
+  color: #000;
+}
+
+.number-input {
+  width: 100%;
+  padding: 5px;
+  border-radius: 4px;
+  background: #fff;
+  color: #000;
+}
+
+.array-item-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.array-item-input {
+  flex-grow: 1;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
+}
+
+.array-item-remove {
+  background: #d9534f;
+  border: none;
+  color: white;
+  cursor: pointer;
+  margin-left: 5px;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+
+.array-item-add {
+  background: #5bc0de;
+  border: none;
+  color: white;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin-top: 5px;
+}
+
+.error-message {
+  color: #d9534f;
+  font-size: 13px;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+/* Styles for node states */
+.completed {
+  border-color: #27ae60; /* Green border for completed nodes */
+}
+
+.running {
+  border-color: #f39c12; /* Orange border for running nodes */
+}
+
+.failed {
+  border-color: #c0392b; /* Red border for failed nodes */
+}
+
+.incomplete {
+  border-color: #9f14ab; /* Pink border for incomplete nodes */
+}
+
+.queued {
+  border-color: #25e6e6; /* Cyan border for queued nodes */
+}
+
+.custom-switch {
+  padding-left: 2px;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx

@@ -0,0 +1,166 @@
+import { beautifyString } from "@/lib/utils";
+import { Clipboard, Maximize2 } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Button } from "../../../../../components/__legacy__/ui/button";
+import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../../../components/__legacy__/ui/table";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import {
+  globalRegistry,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { useToast } from "../../../../../components/molecules/Toast/use-toast";
+import ExpandableOutputDialog from "./ExpandableOutputDialog";
+
+type DataTableProps = {
+  title?: string;
+  truncateLongData?: boolean;
+  data: { [key: string]: Array<any> };
+};
+
+export default function DataTable({
+  title,
+  truncateLongData,
+  data,
+}: DataTableProps) {
+  const { toast } = useToast();
+  const enableEnhancedOutputHandling = useGetFlag(
+    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
+  );
+  const [expandedDialog, setExpandedDialog] = useState<{
+    isOpen: boolean;
+    execId: string;
+    pinName: string;
+    data: any[];
+  } | null>(null);
+
+  // Prepare renderers for each item when enhanced mode is enabled
+  const getItemRenderer = useMemo(() => {
+    if (!enableEnhancedOutputHandling) return null;
+    return (item: unknown) => {
+      const metadata: OutputMetadata = {};
+      return globalRegistry.getRenderer(item, metadata);
+    };
+  }, [enableEnhancedOutputHandling]);
+
+  const copyData = (pin: string, data: string) => {
+    navigator.clipboard.writeText(data).then(() => {
+      toast({
+        title: `"${pin}" data copied to clipboard!`,
+        duration: 2000,
+      });
+    });
+  };
+
+  const openExpandedView = (pinName: string, pinData: any[]) => {
+    setExpandedDialog({
+      isOpen: true,
+      execId: title || "Unknown Execution",
+      pinName,
+      data: pinData,
+    });
+  };
+
+  const closeExpandedView = () => {
+    setExpandedDialog(null);
+  };
+
+  return (
+    <>
+      {title && <strong className="mt-2 flex justify-center">{title}</strong>}
+      <Table className="cursor-default select-text">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Pin</TableHead>
+            <TableHead>Data</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(data).map(([key, value]) => (
+            <TableRow className="group" key={key}>
+              <TableCell className="cursor-text">
+                {beautifyString(key)}
+              </TableCell>
+              <TableCell className="cursor-text">
+                <div className="flex min-h-9 items-center whitespace-pre-wrap">
+                  <div className="absolute right-1 top-auto m-1 hidden gap-1 group-hover:flex">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() => openExpandedView(key, value)}
+                      title="Expand Full View"
+                    >
+                      <Maximize2 size={18} />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() =>
+                        copyData(
+                          beautifyString(key),
+                          value
+                            .map((i) =>
+                              typeof i === "object"
+                                ? JSON.stringify(i, null, 2)
+                                : String(i),
+                            )
+                            .join(", "),
+                        )
+                      }
+                      title="Copy Data"
+                    >
+                      <Clipboard size={18} />
+                    </Button>
+                  </div>
+                  {value.map((item, index) => {
+                    const renderer = getItemRenderer?.(item);
+                    if (enableEnhancedOutputHandling && renderer) {
+                      const metadata: OutputMetadata = {};
+                      return (
+                        <React.Fragment key={index}>
+                          <OutputItem
+                            value={item}
+                            metadata={metadata}
+                            renderer={renderer}
+                          />
+                          {index < value.length - 1 && ", "}
+                        </React.Fragment>
+                      );
+                    }
+                    return (
+                      <React.Fragment key={index}>
+                        <ContentRenderer
+                          value={item}
+                          truncateLongData={truncateLongData}
+                        />
+                        {index < value.length - 1 && ", "}
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {expandedDialog && (
+        <ExpandableOutputDialog
+          isOpen={expandedDialog.isOpen}
+          onClose={closeExpandedView}
+          execId={expandedDialog.execId}
+          pinName={expandedDialog.pinName}
+          data={expandedDialog.data}
+        />
+      )}
+    </>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ExpandableOutputDialog.tsx

@@ -0,0 +1,269 @@
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import {
+  globalRegistry,
+  OutputActions,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { beautifyString } from "@/lib/utils";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { Clipboard, Maximize2 } from "lucide-react";
+import React, { FC, useMemo, useState } from "react";
+import { Button } from "../../../../../components/__legacy__/ui/button";
+import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
+import { ScrollArea } from "../../../../../components/__legacy__/ui/scroll-area";
+import { Separator } from "../../../../../components/__legacy__/ui/separator";
+import { Switch } from "../../../../../components/atoms/Switch/Switch";
+import { useToast } from "../../../../../components/molecules/Toast/use-toast";
+
+interface ExpandableOutputDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  execId: string;
+  pinName: string;
+  data: any[];
+}
+
+const ExpandableOutputDialog: FC<ExpandableOutputDialogProps> = ({
+  isOpen,
+  onClose,
+  execId,
+  pinName,
+  data,
+}) => {
+  const { toast } = useToast();
+  const enableEnhancedOutputHandling = useGetFlag(
+    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
+  );
+  const [useEnhancedRenderer, setUseEnhancedRenderer] = useState(false);
+
+  // Prepare items for the enhanced renderer system
+  const outputItems = useMemo(() => {
+    if (!data || !useEnhancedRenderer) return [];
+
+    const items: Array<{
+      key: string;
+      label: string;
+      value: unknown;
+      metadata?: OutputMetadata;
+      renderer: any;
+    }> = [];
+
+    data.forEach((value, index) => {
+      const metadata: OutputMetadata = {};
+
+      // Extract metadata from the value if it's an object
+      if (
+        typeof value === "object" &&
+        value !== null &&
+        !React.isValidElement(value)
+      ) {
+        const objValue = value as any;
+        if (objValue.type) metadata.type = objValue.type;
+        if (objValue.mimeType) metadata.mimeType = objValue.mimeType;
+        if (objValue.filename) metadata.filename = objValue.filename;
+        if (objValue.language) metadata.language = objValue.language;
+      }
+
+      const renderer = globalRegistry.getRenderer(value, metadata);
+      if (renderer) {
+        items.push({
+          key: `item-${index}`,
+          label: index === 0 ? beautifyString(pinName) : "",
+          value,
+          metadata,
+          renderer,
+        });
+      } else {
+        // Fallback to text renderer
+        const textRenderer = globalRegistry
+          .getAllRenderers()
+          .find((r) => r.name === "TextRenderer");
+        if (textRenderer) {
+          items.push({
+            key: `item-${index}`,
+            label: index === 0 ? beautifyString(pinName) : "",
+            value:
+              typeof value === "string"
+                ? value
+                : JSON.stringify(value, null, 2),
+            metadata,
+            renderer: textRenderer,
+          });
+        }
+      }
+    });
+
+    return items;
+  }, [data, useEnhancedRenderer, pinName]);
+
+  const copyData = () => {
+    const formattedData = data
+      .map((item) =>
+        typeof item === "object" ? JSON.stringify(item, null, 2) : String(item),
+      )
+      .join("\n\n");
+
+    navigator.clipboard.writeText(formattedData).then(() => {
+      toast({
+        title: `"${beautifyString(pinName)}" data copied to clipboard!`,
+        duration: 2000,
+      });
+    });
+  };
+
+  return (
+    <Dialog
+      title={
+        <div className="flex items-center justify-between pr-8">
+          <div className="flex items-center gap-2">
+            <Maximize2 size={20} />
+            Full Output Preview
+          </div>
+          {enableEnhancedOutputHandling && (
+            <div className="flex items-center gap-3">
+              <label
+                htmlFor="enhanced-rendering-toggle"
+                className="cursor-pointer select-none text-sm font-normal text-gray-600"
+              >
+                Enhanced Rendering
+              </label>
+              <Switch
+                id="enhanced-rendering-toggle"
+                checked={useEnhancedRenderer}
+                onCheckedChange={setUseEnhancedRenderer}
+              />
+            </div>
+          )}
+        </div>
+      }
+      controlled={{
+        isOpen,
+        set: (open) => {
+          if (!open) onClose();
+        },
+      }}
+      onClose={onClose}
+      styling={{
+        maxWidth: "56rem",
+        width: "90vw",
+        height: "90vh",
+      }}
+    >
+      <Dialog.Content>
+        <div className="flex h-full flex-col">
+          <div className="pb-4">
+            <p className="text-sm text-zinc-600">
+              Execution ID: <span className="font-mono text-xs">{execId}</span>
+              <br />
+              Pin:{" "}
+              <span className="font-semibold">{beautifyString(pinName)}</span>
+            </p>
+          </div>
+
+          <div className="flex flex-1 flex-col overflow-hidden">
+            {useEnhancedRenderer && outputItems.length > 0 && (
+              <div className="border-b px-4 py-2">
+                <OutputActions
+                  items={outputItems.map((item) => ({
+                    value: item.value,
+                    metadata: item.metadata,
+                    renderer: item.renderer,
+                  }))}
+                />
+              </div>
+            )}
+            <ScrollArea className="h-full">
+              <div className="p-4">
+                {data.length > 0 ? (
+                  useEnhancedRenderer ? (
+                    <div className="space-y-4">
+                      {outputItems.map((item) => (
+                        <OutputItem
+                          key={item.key}
+                          value={item.value}
+                          metadata={item.metadata}
+                          renderer={item.renderer}
+                          label={item.label}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {data.map((item, index) => (
+                        <div
+                          key={index}
+                          className="rounded-lg border bg-gray-50 p-4"
+                        >
+                          <div className="mb-2 flex items-center justify-between">
+                            <span className="text-sm font-medium text-gray-600">
+                              Item {index + 1} of {data.length}
+                            </span>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => {
+                                const itemData =
+                                  typeof item === "object"
+                                    ? JSON.stringify(item, null, 2)
+                                    : String(item);
+                                navigator.clipboard
+                                  .writeText(itemData)
+                                  .then(() => {
+                                    toast({
+                                      title: `Item ${index + 1} copied to clipboard!`,
+                                      duration: 2000,
+                                    });
+                                  });
+                              }}
+                              className="flex items-center gap-1"
+                            >
+                              <Clipboard size={14} />
+                              Copy Item
+                            </Button>
+                          </div>
+                          <Separator className="mb-3" />
+                          <div className="whitespace-pre-wrap break-words font-mono text-sm">
+                            <ContentRenderer
+                              value={item}
+                              truncateLongData={false}
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )
+                ) : (
+                  <div className="py-8 text-center text-gray-500">
+                    No data available
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          <Dialog.Footer className="flex justify-between">
+            <div className="text-sm text-gray-600">
+              {data.length} item{data.length !== 1 ? "s" : ""} total
+            </div>
+            <div className="flex gap-2">
+              {!useEnhancedRenderer && (
+                <Button
+                  variant="outline"
+                  onClick={copyData}
+                  className="flex items-center gap-1"
+                >
+                  <Clipboard size={16} />
+                  Copy All
+                </Button>
+              )}
+              <Button onClick={onClose}>Close</Button>
+            </div>
+          </Dialog.Footer>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+export default ExpandableOutputDialog;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/flow.css

@@ -0,0 +1,103 @@
+/* flow.css or index.css */
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  background: #ffffff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #000000;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.modal h2 {
+  margin-top: 0;
+}
+
+.modal button {
+  margin-right: 10px;
+}
+
+.modal form {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal form div {
+  margin-bottom: 15px;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: -600px;
+  width: 350px;
+  height: calc(100vh - 68px); /* Full height minus top offset */
+  background-color: #ffffff;
+  color: #000000;
+  padding: 20px;
+  transition: left 0.3s ease;
+  z-index: 1000;
+  overflow-y: auto;
+  margin-top: 68px; /* Margin to push content below the top fixed area */
+}
+
+.sidebar.open {
+  left: 0;
+}
+
+.sidebar h3 {
+  margin: 0 0 10px;
+}
+
+.sidebar input {
+  margin: 0 0 10px;
+}
+
+.sidebarNodeRowStyle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #e2e2e2;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  cursor: grab;
+}
+
+.sidebarNodeRowStyle.dragging {
+  opacity: 0.5;
+}
+
+.flow-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/GraphSearchControl.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/__legacy__/ui/popover";
+import { Button } from "@/components/atoms/Button/Button";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { GraphSearchContent } from "../NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { useGraphMenu } from "../NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu";
+
+interface GraphSearchControlProps {
+  nodes: CustomNode[];
+  onNodeSelect: (nodeId: string) => void;
+  onNodeHover?: (nodeId: string | null) => void;
+}
+
+export function GraphSearchControl({
+  nodes,
+  onNodeSelect,
+  onNodeHover,
+}: GraphSearchControlProps) {
+  // Use the same hook as GraphSearchMenu for consistency
+  const {
+    open,
+    searchQuery,
+    setSearchQuery,
+    filteredNodes,
+    handleNodeSelect,
+    handleOpenChange,
+  } = useGraphMenu({
+    nodes,
+    blockMenuSelected: "", // We don't need to track this in the old control panel
+    setBlockMenuSelected: () => {}, // Not needed in this context
+    onNodeSelect,
+  });
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <Tooltip delayDuration={500}>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              data-id="graph-search-control-trigger"
+              data-testid="graph-search-control-button"
+              name="Search"
+              className="dark:hover:bg-slate-800"
+            >
+              <MagnifyingGlassIcon className="h-5 w-5" />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="right">Search Graph</TooltipContent>
+      </Tooltip>
+
+      <PopoverContent
+        side="right"
+        sideOffset={22}
+        align="start"
+        alignOffset={-50} // Offset upward to align with control panel top
+        className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
+        data-id="graph-search-popover-content"
+      >
+        <GraphSearchContent
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          filteredNodes={filteredNodes}
+          onNodeSelect={handleNodeSelect}
+          onNodeHover={onNodeHover}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/InputModalComponent.tsx

@@ -0,0 +1,107 @@
+import React, { FC, useEffect, useState } from "react";
+import { Button } from "../../../../../components/__legacy__/ui/button";
+import { Textarea } from "../../../../../components/__legacy__/ui/textarea";
+import { Maximize2, Minimize2, Clipboard } from "lucide-react";
+import { createPortal } from "react-dom";
+import { toast } from "../../../../../components/molecules/Toast/use-toast";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: string) => void;
+  title?: string;
+  defaultValue: string;
+}
+
+const InputModalComponent: FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  title,
+  defaultValue,
+}) => {
+  const [tempValue, setTempValue] = useState(defaultValue);
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTempValue(defaultValue);
+      setIsMaximized(false);
+    }
+  }, [isOpen, defaultValue]);
+
+  const handleSave = () => {
+    onSave(tempValue);
+    onClose();
+  };
+
+  const toggleSize = () => {
+    setIsMaximized(!isMaximized);
+  };
+
+  const copyValue = () => {
+    navigator.clipboard.writeText(tempValue).then(() => {
+      toast({
+        title: "Input value copied to clipboard!",
+        duration: 2000,
+      });
+    });
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalContent = (
+    <div
+      id="modal-content"
+      className={`fixed rounded-lg border-[1.5px] bg-white p-5 ${
+        isMaximized ? "inset-[128px] flex flex-col" : `w-[90%] max-w-[800px]`
+      }`}
+    >
+      <h2 className="mb-4 text-center text-lg font-semibold">
+        {title || "Enter input text"}
+      </h2>
+      <div className="nowheel relative flex-grow">
+        <Textarea
+          className="h-full min-h-[200px] w-full resize-none"
+          value={tempValue}
+          onChange={(e) => setTempValue(e.target.value)}
+        />
+        <div className="absolute bottom-2 right-2 flex space-x-2">
+          <Button onClick={copyValue} size="icon" variant="outline">
+            <Clipboard size={18} />
+          </Button>
+          <Button onClick={toggleSize} size="icon" variant="outline">
+            {isMaximized ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
+          </Button>
+        </div>
+      </div>
+      <div className="mt-4 flex justify-end space-x-2">
+        <Button onClick={onClose} variant="outline">
+          Cancel
+        </Button>
+        <Button onClick={handleSave}>Save</Button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {isMaximized ? (
+        createPortal(
+          <div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+            {modalContent}
+          </div>,
+          document.body,
+        )
+      ) : (
+        <div className="nodrag fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+          {modalContent}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default InputModalComponent;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/MCPToolDialog.tsx

@@ -0,0 +1,534 @@
+"use client";
+
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useContext,
+} from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/__legacy__/ui/dialog";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Input } from "@/components/__legacy__/ui/input";
+import { Label } from "@/components/__legacy__/ui/label";
+import { LoadingSpinner } from "@/components/__legacy__/ui/loading";
+import { Badge } from "@/components/__legacy__/ui/badge";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import type { CredentialsMetaInput, MCPTool } from "@/lib/autogpt-server-api";
+import { CaretDown } from "@phosphor-icons/react";
+import { openOAuthPopup } from "@/lib/oauth-popup";
+import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
+
+export type MCPToolDialogResult = {
+  serverUrl: string;
+  serverName: string | null;
+  selectedTool: string;
+  toolInputSchema: Record<string, any>;
+  availableTools: Record<string, any>;
+  /** Credentials meta from OAuth flow, null for public servers. */
+  credentials: CredentialsMetaInput | null;
+};
+
+interface MCPToolDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (result: MCPToolDialogResult) => void;
+}
+
+type DialogStep = "url" | "tool";
+
+export function MCPToolDialog({
+  open,
+  onClose,
+  onConfirm,
+}: MCPToolDialogProps) {
+  const api = useBackendAPI();
+  const allProviders = useContext(CredentialsProvidersContext);
+
+  const [step, setStep] = useState<DialogStep>("url");
+  const [serverUrl, setServerUrl] = useState("");
+  const [tools, setTools] = useState<MCPTool[]>([]);
+  const [serverName, setServerName] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [authRequired, setAuthRequired] = useState(false);
+  const [oauthLoading, setOauthLoading] = useState(false);
+  const [showManualToken, setShowManualToken] = useState(false);
+  const [manualToken, setManualToken] = useState("");
+  const [selectedTool, setSelectedTool] = useState<MCPTool | null>(null);
+  const [credentials, setCredentials] = useState<CredentialsMetaInput | null>(
+    null,
+  );
+
+  const startOAuthRef = useRef(false);
+  const oauthAbortRef = useRef<((reason?: string) => void) | null>(null);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      oauthAbortRef.current?.();
+    };
+  }, []);
+
+  const reset = useCallback(() => {
+    oauthAbortRef.current?.();
+    oauthAbortRef.current = null;
+    setStep("url");
+    setServerUrl("");
+    setManualToken("");
+    setTools([]);
+    setServerName(null);
+    setLoading(false);
+    setError(null);
+    setAuthRequired(false);
+    setOauthLoading(false);
+    setShowManualToken(false);
+    setSelectedTool(null);
+    setCredentials(null);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    reset();
+    onClose();
+  }, [reset, onClose]);
+
+  const discoverTools = useCallback(
+    async (url: string, authToken?: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await api.mcpDiscoverTools(url, authToken);
+        setTools(result.tools);
+        setServerName(result.server_name);
+        setAuthRequired(false);
+        setShowManualToken(false);
+        setStep("tool");
+      } catch (e: any) {
+        if (e?.status === 401 || e?.status === 403) {
+          setAuthRequired(true);
+          setError(null);
+          // Automatically start OAuth sign-in instead of requiring a second click
+          setLoading(false);
+          startOAuthRef.current = true;
+          return;
+        } else {
+          const message =
+            e?.message || e?.detail || "Failed to connect to MCP server";
+          setError(
+            typeof message === "string" ? message : JSON.stringify(message),
+          );
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [api],
+  );
+
+  const handleDiscoverTools = useCallback(() => {
+    if (!serverUrl.trim()) return;
+    discoverTools(serverUrl.trim(), manualToken.trim() || undefined);
+  }, [serverUrl, manualToken, discoverTools]);
+
+  const handleOAuthSignIn = useCallback(async () => {
+    if (!serverUrl.trim()) return;
+    setError(null);
+
+    // Abort any previous OAuth flow
+    oauthAbortRef.current?.();
+
+    setOauthLoading(true);
+
+    try {
+      const { login_url, state_token } = await api.mcpOAuthLogin(
+        serverUrl.trim(),
+      );
+
+      const { promise, cleanup } = openOAuthPopup(login_url, {
+        stateToken: state_token,
+        useCrossOriginListeners: true,
+      });
+      oauthAbortRef.current = cleanup.abort;
+
+      const result = await promise;
+
+      // Exchange code for tokens via the credentials provider (updates cache)
+      setLoading(true);
+      setOauthLoading(false);
+
+      const mcpProvider = allProviders?.["mcp"];
+      const callbackResult = mcpProvider
+        ? await mcpProvider.mcpOAuthCallback(result.code, state_token)
+        : await api.mcpOAuthCallback(result.code, state_token);
+
+      setCredentials({
+        id: callbackResult.id,
+        provider: callbackResult.provider,
+        type: callbackResult.type,
+        title: callbackResult.title,
+      });
+      setAuthRequired(false);
+
+      // Discover tools now that we're authenticated
+      const toolsResult = await api.mcpDiscoverTools(serverUrl.trim());
+      setTools(toolsResult.tools);
+      setServerName(toolsResult.server_name);
+      setStep("tool");
+    } catch (e: any) {
+      // If server doesn't support OAuth → show manual token entry
+      if (e?.status === 400) {
+        setShowManualToken(true);
+        setError(
+          "This server does not support OAuth sign-in. Please enter a token manually.",
+        );
+      } else if (e?.message === "OAuth flow timed out") {
+        setError("OAuth sign-in timed out. Please try again.");
+      } else {
+        const status = e?.status;
+        let message: string;
+        if (status === 401 || status === 403) {
+          message =
+            "Authentication succeeded but the server still rejected the request. " +
+            "The token audience may not match. Please try again.";
+        } else {
+          message = e?.message || e?.detail || "Failed to complete sign-in";
+        }
+        setError(
+          typeof message === "string" ? message : JSON.stringify(message),
+        );
+      }
+    } finally {
+      setOauthLoading(false);
+      setLoading(false);
+      oauthAbortRef.current = null;
+    }
+  }, [api, serverUrl, allProviders]);
+
+  // Auto-start OAuth sign-in when server returns 401/403
+  useEffect(() => {
+    if (authRequired && startOAuthRef.current) {
+      startOAuthRef.current = false;
+      handleOAuthSignIn();
+    }
+  }, [authRequired, handleOAuthSignIn]);
+
+  const handleConfirm = useCallback(() => {
+    if (!selectedTool) return;
+
+    const availableTools: Record<string, any> = {};
+    for (const t of tools) {
+      availableTools[t.name] = {
+        description: t.description,
+        input_schema: t.input_schema,
+      };
+    }
+
+    onConfirm({
+      serverUrl: serverUrl.trim(),
+      serverName,
+      selectedTool: selectedTool.name,
+      toolInputSchema: selectedTool.input_schema,
+      availableTools,
+      credentials,
+    });
+    reset();
+  }, [
+    selectedTool,
+    tools,
+    serverUrl,
+    serverName,
+    credentials,
+    onConfirm,
+    reset,
+  ]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {step === "url"
+              ? "Connect to MCP Server"
+              : `Select a Tool${serverName ? ` — ${serverName}` : ""}`}
+          </DialogTitle>
+          <DialogDescription>
+            {step === "url"
+              ? "Enter the URL of an MCP server to discover its available tools."
+              : `Found ${tools.length} tool${tools.length !== 1 ? "s" : ""}. Select one to add to your agent.`}
+          </DialogDescription>
+        </DialogHeader>
+
+        {step === "url" && (
+          <div className="flex flex-col gap-4 py-2">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="mcp-server-url">Server URL</Label>
+              <Input
+                id="mcp-server-url"
+                type="url"
+                placeholder="https://mcp.example.com/mcp"
+                value={serverUrl}
+                onChange={(e) => setServerUrl(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
+                autoFocus
+              />
+            </div>
+
+            {/* Auth required: show manual token option */}
+            {authRequired && !showManualToken && (
+              <button
+                onClick={() => setShowManualToken(true)}
+                className="text-xs text-gray-500 underline hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+              >
+                or enter a token manually
+              </button>
+            )}
+
+            {/* Manual token entry — only visible when expanded */}
+            {showManualToken && (
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="mcp-auth-token" className="text-sm">
+                  Bearer Token
+                </Label>
+                <Input
+                  id="mcp-auth-token"
+                  type="password"
+                  placeholder="Paste your auth token here"
+                  value={manualToken}
+                  onChange={(e) => setManualToken(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && handleDiscoverTools()}
+                  autoFocus
+                />
+              </div>
+            )}
+
+            {error && <p className="text-sm text-red-500">{error}</p>}
+          </div>
+        )}
+
+        {step === "tool" && (
+          <ScrollArea className="max-h-[50vh] py-2">
+            <div className="flex flex-col gap-2 pr-3">
+              {tools.map((tool) => (
+                <MCPToolCard
+                  key={tool.name}
+                  tool={tool}
+                  selected={selectedTool?.name === tool.name}
+                  onSelect={() => setSelectedTool(tool)}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+
+        <DialogFooter>
+          {step === "tool" && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                setStep("url");
+                setSelectedTool(null);
+              }}
+            >
+              Back
+            </Button>
+          )}
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          {step === "url" && (
+            <Button
+              onClick={
+                authRequired && !showManualToken
+                  ? handleOAuthSignIn
+                  : handleDiscoverTools
+              }
+              disabled={!serverUrl.trim() || loading || oauthLoading}
+            >
+              {loading || oauthLoading ? (
+                <span className="flex items-center gap-2">
+                  <LoadingSpinner className="size-4" />
+                  {oauthLoading ? "Waiting for sign-in..." : "Connecting..."}
+                </span>
+              ) : authRequired && !showManualToken ? (
+                "Sign in & Connect"
+              ) : (
+                "Discover Tools"
+              )}
+            </Button>
+          )}
+          {step === "tool" && (
+            <Button onClick={handleConfirm} disabled={!selectedTool}>
+              Add Block
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// --------------- Tool Card Component --------------- //
+
+/** Truncate a description to a reasonable length for the collapsed view. */
+function truncateDescription(text: string, maxLen = 120): string {
+  if (text.length <= maxLen) return text;
+  return text.slice(0, maxLen).trimEnd() + "…";
+}
+
+/** Pretty-print a JSON Schema type for a parameter. */
+function schemaTypeLabel(schema: Record<string, any>): string {
+  if (schema.type) return schema.type;
+  if (schema.anyOf)
+    return schema.anyOf.map((s: any) => s.type ?? "any").join(" | ");
+  if (schema.oneOf)
+    return schema.oneOf.map((s: any) => s.type ?? "any").join(" | ");
+  return "any";
+}
+
+function MCPToolCard({
+  tool,
+  selected,
+  onSelect,
+}: {
+  tool: MCPTool;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const properties = tool.input_schema?.properties ?? {};
+  const required = new Set<string>(tool.input_schema?.required ?? []);
+  const paramNames = Object.keys(properties);
+
+  // Strip XML-like tags from description for cleaner display.
+  // Loop to handle nested tags like <scr<script>ipt> (CodeQL fix).
+  let cleanDescription = tool.description ?? "";
+  let prev = "";
+  while (prev !== cleanDescription) {
+    prev = cleanDescription;
+    cleanDescription = cleanDescription.replace(/<[^>]*>/g, "");
+  }
+  cleanDescription = cleanDescription.trim();
+
+  return (
+    <button
+      onClick={onSelect}
+      className={`group flex flex-col rounded-lg border text-left transition-colors ${
+        selected
+          ? "border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-950"
+          : "border-gray-200 hover:border-gray-300 hover:bg-gray-50 dark:border-slate-700 dark:hover:border-slate-600 dark:hover:bg-slate-800"
+      }`}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 pb-1 pt-3">
+        <span className="flex-1 text-sm font-semibold dark:text-white">
+          {tool.name}
+        </span>
+        {paramNames.length > 0 && (
+          <Badge variant="secondary" className="text-[10px]">
+            {paramNames.length} param{paramNames.length !== 1 ? "s" : ""}
+          </Badge>
+        )}
+      </div>
+
+      {/* Description (collapsed: truncated) */}
+      {cleanDescription && (
+        <p className="px-3 pb-1 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
+          {expanded ? cleanDescription : truncateDescription(cleanDescription)}
+        </p>
+      )}
+
+      {/* Parameter badges (collapsed view) */}
+      {!expanded && paramNames.length > 0 && (
+        <div className="flex flex-wrap gap-1 px-3 pb-2">
+          {paramNames.slice(0, 6).map((name) => (
+            <Badge
+              key={name}
+              variant="outline"
+              className="text-[10px] font-normal"
+            >
+              {name}
+              {required.has(name) && (
+                <span className="ml-0.5 text-red-400">*</span>
+              )}
+            </Badge>
+          ))}
+          {paramNames.length > 6 && (
+            <Badge variant="outline" className="text-[10px] font-normal">
+              +{paramNames.length - 6} more
+            </Badge>
+          )}
+        </div>
+      )}
+
+      {/* Expanded: full parameter details */}
+      {expanded && paramNames.length > 0 && (
+        <div className="mx-3 mb-2 rounded border border-gray-100 bg-gray-50/50 dark:border-slate-700 dark:bg-slate-800/50">
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="border-b border-gray-100 dark:border-slate-700">
+                <th className="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">
+                  Parameter
+                </th>
+                <th className="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">
+                  Type
+                </th>
+                <th className="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">
+                  Description
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {paramNames.map((name) => {
+                const prop = properties[name] ?? {};
+                return (
+                  <tr
+                    key={name}
+                    className="border-b border-gray-50 last:border-0 dark:border-slate-700/50"
+                  >
+                    <td className="px-2 py-1 font-mono text-[11px] text-gray-700 dark:text-gray-300">
+                      {name}
+                      {required.has(name) && (
+                        <span className="ml-0.5 text-red-400">*</span>
+                      )}
+                    </td>
+                    <td className="px-2 py-1 text-gray-500 dark:text-gray-400">
+                      {schemaTypeLabel(prop)}
+                    </td>
+                    <td className="max-w-[200px] truncate px-2 py-1 text-gray-500 dark:text-gray-400">
+                      {prop.description ?? "—"}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Toggle details */}
+      {(paramNames.length > 0 || cleanDescription.length > 120) && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded((prev) => !prev);
+          }}
+          className="flex w-full items-center justify-center gap-1 border-t border-gray-100 py-1.5 text-[10px] text-gray-400 hover:text-gray-600 dark:border-slate-700 dark:text-gray-500 dark:hover:text-gray-300"
+        >
+          {expanded ? "Hide details" : "Show details"}
+          <CaretDown
+            className={`h-3 w-3 transition-transform ${expanded ? "rotate-180" : ""}`}
+          />
+        </button>
+      )}
+    </button>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeHandle.tsx

@@ -0,0 +1,163 @@
+import { BlockIOSubSchema } from "@/lib/autogpt-server-api/types";
+import {
+  cn,
+  beautifyString,
+  getTypeBgColor,
+  getTypeTextColor,
+  getEffectiveType,
+} from "@/lib/utils";
+import { FC, memo, useCallback } from "react";
+import { Handle, Position } from "@xyflow/react";
+import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
+
+type HandleProps = {
+  keyName: string;
+  schema: BlockIOSubSchema;
+  isConnected: boolean;
+  isRequired?: boolean;
+  side: "left" | "right";
+  title?: string;
+  className?: string;
+  isBroken?: boolean;
+};
+
+// Move the constant out of the component to avoid re-creation on every render.
+const TYPE_NAME: Record<string, string> = {
+  string: "text",
+  number: "number",
+  integer: "integer",
+  boolean: "true/false",
+  object: "object",
+  array: "list",
+  null: "null",
+};
+
+// Extract and memoize the Dot component so that it doesn't re-render unnecessarily.
+const Dot: FC<{ isConnected: boolean; type?: string; isBroken?: boolean }> =
+  memo(({ isConnected, type, isBroken }) => {
+    const color = isBroken
+      ? "border-red-500 bg-red-100 dark:bg-red-900/30"
+      : isConnected
+        ? getTypeBgColor(type || "any")
+        : "border-gray-300 dark:border-gray-600";
+    return (
+      <div
+        className={cn(
+          "m-1 h-4 w-4 rounded-full border-2 bg-white transition-colors duration-100 group-hover:bg-gray-300 dark:bg-slate-800 dark:group-hover:bg-gray-700",
+          color,
+          isBroken && "opacity-50",
+        )}
+      />
+    );
+  });
+Dot.displayName = "Dot";
+
+const NodeHandle: FC<HandleProps> = ({
+  keyName,
+  schema,
+  isConnected,
+  isRequired,
+  side,
+  title,
+  className,
+  isBroken = false,
+}) => {
+  // Extract effective type from schema (handles anyOf/oneOf/allOf wrappers)
+  const effectiveType = getEffectiveType(schema);
+
+  const typeClass = `text-sm ${getTypeTextColor(effectiveType || "any")} ${
+    side === "left" ? "text-left" : "text-right"
+  }`;
+
+  const label = (
+    <div className={cn("flex flex-grow flex-row", isBroken && "opacity-50")}>
+      <span
+        className={cn(
+          "data-sentry-unmask text-m green flex items-end pr-2 text-gray-900 dark:text-gray-100",
+          className,
+          isBroken && "text-red-500 line-through",
+        )}
+      >
+        {title || schema.title || beautifyString(keyName.toLowerCase())}
+        {isRequired ? "*" : ""}
+      </span>
+      <span
+        className={cn(
+          `${typeClass} data-sentry-unmask flex items-end`,
+          isBroken && "text-red-400",
+        )}
+      >
+        ({TYPE_NAME[effectiveType as keyof typeof TYPE_NAME] || "any"})
+      </span>
+    </div>
+  );
+
+  // Use a native HTML onContextMenu handler instead of wrapping a large node with a Radix ContextMenu trigger.
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      // Optionally, you can trigger a custom, lightweight context menu here.
+    },
+    [],
+  );
+
+  if (side === "left") {
+    return (
+      <div
+        key={keyName}
+        className={cn("handle-container", isBroken && "pointer-events-none")}
+        onContextMenu={handleContextMenu}
+      >
+        <Handle
+          type="target"
+          data-testid={`input-handle-${keyName}`}
+          position={Position.Left}
+          id={keyName}
+          className={cn("group -ml-[38px]", isBroken && "cursor-not-allowed")}
+          isConnectable={!isBroken}
+        >
+          <div className="pointer-events-none flex items-center">
+            <Dot
+              isConnected={isConnected}
+              type={effectiveType}
+              isBroken={isBroken}
+            />
+            {label}
+          </div>
+        </Handle>
+        <InformationTooltip description={schema.description} />
+      </div>
+    );
+  } else {
+    return (
+      <div
+        key={keyName}
+        className={cn(
+          "handle-container justify-end",
+          isBroken && "pointer-events-none",
+        )}
+        onContextMenu={handleContextMenu}
+      >
+        <Handle
+          type="source"
+          data-testid={`output-handle-${keyName}`}
+          position={Position.Right}
+          id={keyName}
+          className={cn("group -mr-[38px]", isBroken && "cursor-not-allowed")}
+          isConnectable={!isBroken}
+        >
+          <div className="pointer-events-none flex items-center">
+            {label}
+            <Dot
+              isConnected={isConnected}
+              type={effectiveType}
+              isBroken={isBroken}
+            />
+          </div>
+        </Handle>
+      </div>
+    );
+  }
+};
+
+export default memo(NodeHandle);

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx

@@ -0,0 +1,158 @@
+import React, { useContext, useMemo, useState } from "react";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Maximize2 } from "lucide-react";
+import * as Separator from "@radix-ui/react-separator";
+import { ContentRenderer } from "@/components/__legacy__/ui/render";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import {
+  globalRegistry,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+
+import { beautifyString } from "@/lib/utils";
+
+import { BuilderContext } from "./Flow/Flow";
+import ExpandableOutputDialog from "./ExpandableOutputDialog";
+
+type NodeOutputsProps = {
+  title?: string;
+  truncateLongData?: boolean;
+  data: { [key: string]: Array<any> };
+};
+
+export default function NodeOutputs({
+  title,
+  truncateLongData,
+  data,
+}: NodeOutputsProps) {
+  const builderContext = useContext(BuilderContext);
+  const enableEnhancedOutputHandling = useGetFlag(
+    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
+  );
+
+  const [expandedDialog, setExpandedDialog] = useState<{
+    isOpen: boolean;
+    execId: string;
+    pinName: string;
+    data: any[];
+  } | null>(null);
+
+  if (!builderContext) {
+    throw new Error(
+      "BuilderContext consumer must be inside FlowEditor component",
+    );
+  }
+
+  const { getNodeTitle } = builderContext;
+
+  // Prepare renderers for each item when enhanced mode is enabled
+  const getItemRenderer = useMemo(() => {
+    if (!enableEnhancedOutputHandling) return null;
+    return (item: unknown) => {
+      const metadata: OutputMetadata = {};
+      return globalRegistry.getRenderer(item, metadata);
+    };
+  }, [enableEnhancedOutputHandling]);
+
+  const getBeautifiedPinName = (pin: string) => {
+    if (!pin.startsWith("tools_^_")) {
+      return beautifyString(pin);
+    }
+    // Special handling for tool pins: replace node ID with node title
+    const toolNodeID = pin.slice(8).split("_~_")[0]; // tools_^_{node_id}_~_{field}
+    const toolNodeTitle = getNodeTitle(toolNodeID);
+    return toolNodeTitle
+      ? beautifyString(pin.replace(toolNodeID, toolNodeTitle))
+      : beautifyString(pin);
+  };
+
+  const openExpandedView = (pinName: string, pinData: any[]) => {
+    setExpandedDialog({
+      isOpen: true,
+      execId: title || "Node Output",
+      pinName,
+      data: pinData,
+    });
+  };
+
+  const closeExpandedView = () => {
+    setExpandedDialog(null);
+  };
+  return (
+    <div className="m-4 space-y-4">
+      {title && <strong className="mt-2flex">{title}</strong>}
+      {Object.entries(data).map(([pin, dataArray]) => (
+        <div key={pin} className="group">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <strong className="mr-2">Pin:</strong>
+              <span>{getBeautifiedPinName(pin)}</span>
+            </div>
+            {(truncateLongData || dataArray.length > 10) && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => openExpandedView(pin, dataArray)}
+                className="hidden items-center gap-1 group-hover:flex"
+                title="Expand Full View"
+              >
+                <Maximize2 size={14} />
+                Expand
+              </Button>
+            )}
+          </div>
+          <div className="mt-2">
+            <strong className="mr-2">Data:</strong>
+            <div className="mt-1">
+              {dataArray.slice(0, 10).map((item, index) => {
+                const renderer = getItemRenderer?.(item);
+                if (enableEnhancedOutputHandling && renderer) {
+                  const metadata: OutputMetadata = {};
+                  return (
+                    <React.Fragment key={index}>
+                      <OutputItem
+                        value={item}
+                        metadata={metadata}
+                        renderer={renderer}
+                      />
+                      {index < Math.min(dataArray.length, 10) - 1 && ", "}
+                    </React.Fragment>
+                  );
+                }
+                return (
+                  <React.Fragment key={index}>
+                    <ContentRenderer
+                      value={item}
+                      truncateLongData={truncateLongData}
+                    />
+                    {index < Math.min(dataArray.length, 10) - 1 && ", "}
+                  </React.Fragment>
+                );
+              })}
+              {dataArray.length > 10 && (
+                <span style={{ color: "#888" }}>
+                  <br />
+                  <b>⋮</b>
+                  <br />
+                  <span>and {dataArray.length - 10} more</span>
+                </span>
+              )}
+            </div>
+            <Separator.Root className="my-4 h-[1px] bg-gray-300" />
+          </div>
+        </div>
+      ))}
+
+      {expandedDialog && (
+        <ExpandableOutputDialog
+          isOpen={expandedDialog.isOpen}
+          onClose={closeExpandedView}
+          execId={expandedDialog.execId}
+          pinName={expandedDialog.pinName}
+          data={expandedDialog.data}
+        />
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeTableInput.tsx

@@ -0,0 +1,205 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import NodeHandle from "@/app/(platform)/build/components/legacy-builder/NodeHandle";
+import type {
+  BlockIOTableSubSchema,
+  TableCellValue,
+  TableRow,
+} from "@/lib/autogpt-server-api/types";
+import type { ConnectedEdge } from "./CustomNode/CustomNode";
+import { cn } from "@/lib/utils";
+import { PlusIcon, XIcon } from "@phosphor-icons/react";
+import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
+
+interface NodeTableInputProps {
+  /** Unique identifier for the node in the builder graph */
+  nodeId: string;
+  /** Key identifier for this specific input field within the node */
+  selfKey: string;
+  /** Schema definition for the table structure */
+  schema: BlockIOTableSubSchema;
+  /** Column headers for the table */
+  headers: string[];
+  /** Initial row data for the table */
+  rows?: TableRow[];
+  /** Validation errors mapped by field key */
+  errors: { [key: string]: string | undefined };
+  /** Graph connections between nodes in the builder */
+  connections: ConnectedEdge[];
+  /** Callback when table data changes */
+  handleInputChange: (key: string, value: TableRow[]) => void;
+  /** Callback when input field is clicked (for builder selection) */
+  handleInputClick: (key: string) => void;
+  /** Additional CSS classes */
+  className?: string;
+  /** Display name for the input field */
+  displayName?: string;
+}
+
+/**
+ * Table input component for the workflow builder interface.
+ *
+ * This component is specifically designed for use in the agent builder where users
+ * design workflows with connected nodes. It includes graph connection capabilities
+ * via NodeHandle and is tightly integrated with the builder's state management.
+ *
+ * @warning Do NOT use this component in runtime/execution contexts (like RunAgentInputs).
+ * For runtime table inputs, use a simpler implementation without builder-specific features.
+ *
+ * @example
+ * ```tsx
+ * <NodeTableInput
+ *   nodeId="node-123"
+ *   selfKey="table_data"
+ *   schema={tableSchema}
+ *   headers={["Name", "Value"]}
+ *   rows={existingData}
+ *   connections={graphConnections}
+ *   handleInputChange={handleChange}
+ *   handleInputClick={handleClick}
+ *   errors={{}}
+ * />
+ * ```
+ *
+ * @see Used exclusively in: `/app/(platform)/build/components/legacy-builder/NodeInputs.tsx`
+ */
+export const NodeTableInput: FC<NodeTableInputProps> = ({
+  nodeId,
+  selfKey,
+  schema,
+  headers,
+  rows = [],
+  errors,
+  connections,
+  handleInputChange,
+  handleInputClick: _handleInputClick,
+  className,
+  displayName,
+}) => {
+  const [tableData, setTableData] = useState<TableRow[]>(rows);
+
+  // Sync with parent state when rows change
+  useEffect(() => {
+    setTableData(rows);
+  }, [rows]);
+
+  const isConnected = (key: string) =>
+    connections.some((c) => c.targetHandle === key && c.target === nodeId);
+
+  const updateTableData = useCallback(
+    (newData: TableRow[]) => {
+      setTableData(newData);
+      handleInputChange(selfKey, newData);
+    },
+    [selfKey, handleInputChange],
+  );
+
+  const updateCell = (
+    rowIndex: number,
+    header: string,
+    value: TableCellValue,
+  ) => {
+    const newData = [...tableData];
+    if (!newData[rowIndex]) {
+      newData[rowIndex] = {};
+    }
+    newData[rowIndex][header] = value;
+    updateTableData(newData);
+  };
+
+  const addRow = () => {
+    if (!headers || headers.length === 0) {
+      return;
+    }
+    const newRow: TableRow = {};
+    headers.forEach((header) => {
+      newRow[header] = "";
+    });
+    updateTableData([...tableData, newRow]);
+  };
+
+  const removeRow = (index: number) => {
+    const newData = tableData.filter((_, i) => i !== index);
+    updateTableData(newData);
+  };
+
+  return (
+    <div className={cn("w-full space-y-2", className)}>
+      <NodeHandle
+        title={displayName || selfKey}
+        keyName={selfKey}
+        schema={schema}
+        isConnected={isConnected(selfKey)}
+        isRequired={false}
+        side="left"
+      />
+
+      {!isConnected(selfKey) && (
+        <div className="nodrag overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr>
+                {headers.map((header, index) => (
+                  <th
+                    key={index}
+                    className="border border-gray-300 bg-gray-100 px-2 py-1 text-left text-sm font-medium dark:border-gray-600 dark:bg-gray-800"
+                  >
+                    {header}
+                  </th>
+                ))}
+                <th className="w-10"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {tableData.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {headers.map((header, colIndex) => (
+                    <td
+                      key={colIndex}
+                      className="border border-gray-300 p-1 dark:border-gray-600"
+                    >
+                      <Input
+                        id={`${selfKey}-${rowIndex}-${header}`}
+                        label={header}
+                        type="text"
+                        value={String(row[header] || "")}
+                        onChange={(e) =>
+                          updateCell(rowIndex, header, e.target.value)
+                        }
+                        className="h-8 w-full"
+                        placeholder={`Enter ${header}`}
+                      />
+                    </td>
+                  ))}
+                  <td className="p-1">
+                    <Button
+                      variant="ghost"
+                      size="small"
+                      onClick={() => removeRow(rowIndex)}
+                      className="h-8 w-8 p-0"
+                    >
+                      <XIcon />
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <Button
+            className="mt-2 bg-gray-200 font-normal text-black hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+            onClick={addRow}
+            size="small"
+          >
+            <PlusIcon className="mr-2" /> Add Row
+          </Button>
+        </div>
+      )}
+
+      {errors[selfKey] && (
+        <span className="text-sm text-red-500">{errors[selfKey]}</span>
+      )}
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/OttoChatWidget.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import React, { useEffect, useState, useRef } from "react";
+import ReactMarkdown from "react-markdown";
+
+import type { GraphID } from "@/lib/autogpt-server-api/types";
+import { askOtto } from "@/app/(platform)/build/actions";
+import { cn } from "@/lib/utils";
+import { environment } from "@/services/environment";
+
+interface Message {
+  type: "user" | "assistant";
+  content: string;
+}
+
+export default function OttoChatWidget({
+  graphID,
+  className,
+}: {
+  graphID?: GraphID;
+  className?: string;
+}): React.ReactNode {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [includeGraphData, setIncludeGraphData] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Add welcome message when component mounts
+    if (messages.length === 0) {
+      setMessages([
+        {
+          type: "assistant",
+          content: "Hello, I am Otto! Ask me anything about AutoGPT!",
+        },
+      ]);
+    }
+  }, [messages.length]);
+
+  useEffect(() => {
+    // Scroll to bottom whenever messages change
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inputValue.trim() || isProcessing) return;
+
+    const userMessage = inputValue.trim();
+    setInputValue("");
+    setIsProcessing(true);
+
+    // Add user message to chat
+    setMessages((prev) => [...prev, { type: "user", content: userMessage }]);
+
+    // Add temporary processing message
+    setMessages((prev) => [
+      ...prev,
+      { type: "assistant", content: "Processing your question..." },
+    ]);
+
+    const conversationHistory = messages.reduce<
+      { query: string; response: string }[]
+    >((acc, msg, i, arr) => {
+      if (
+        msg.type === "user" &&
+        i + 1 < arr.length &&
+        arr[i + 1].type === "assistant" &&
+        arr[i + 1].content !== "Processing your question..."
+      ) {
+        acc.push({
+          query: msg.content,
+          response: arr[i + 1].content,
+        });
+      }
+      return acc;
+    }, []);
+
+    try {
+      const data = await askOtto(
+        userMessage,
+        conversationHistory,
+        includeGraphData,
+        graphID,
+      );
+
+      // Check if the response contains an error
+      if ("error" in data && data.error === true) {
+        // Handle different error types
+        let errorMessage =
+          "Sorry, there was an error processing your message. Please try again.";
+
+        if (data.answer === "Authentication required") {
+          errorMessage = "Please sign in to use the chat feature.";
+        } else if (data.answer === "Failed to connect to Otto service") {
+          errorMessage =
+            "Otto service is currently unavailable. Please try again later.";
+        } else if (data.answer.includes("timed out")) {
+          errorMessage = "Request timed out. Please try again later.";
+        }
+
+        // Remove processing message and add error message
+        setMessages((prev) => [
+          ...prev.slice(0, -1),
+          { type: "assistant", content: errorMessage },
+        ]);
+      } else {
+        // Remove processing message and add actual response
+        setMessages((prev) => [
+          ...prev.slice(0, -1),
+          { type: "assistant", content: data.answer },
+        ]);
+      }
+    } catch (error) {
+      console.error("Unexpected error in chat widget:", error);
+      setMessages((prev) => [
+        ...prev.slice(0, -1),
+        {
+          type: "assistant",
+          content:
+            "An unexpected error occurred. Please refresh the page and try again.",
+        },
+      ]);
+    } finally {
+      setIsProcessing(false);
+      setIncludeGraphData(false);
+    }
+  };
+
+  // Don't render the chat widget if we're not on the build page or in local mode
+  if (environment.isLocal()) {
+    return null;
+  }
+
+  if (!isOpen) {
+    return (
+      <div className={className}>
+        <button
+          onClick={() => setIsOpen(true)}
+          className="inline-flex h-14 w-14 items-center justify-center whitespace-nowrap rounded-2xl bg-[rgba(65,65,64,1)] text-neutral-50 shadow transition-colors hover:bg-neutral-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90 dark:focus-visible:ring-neutral-300"
+          aria-label="Open chat widget"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            className="h-6 w-6"
+            stroke="currentColor"
+            strokeWidth="2"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-[600px] w-[600px] flex-col rounded-lg border bg-background shadow-xl",
+        className,
+        "z-40",
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b p-4">
+        <h2 className="font-semibold">Otto Assistant</h2>
+        <button
+          onClick={() => setIsOpen(false)}
+          className="text-muted-foreground transition-colors hover:text-foreground"
+          aria-label="Close chat"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            className="h-5 w-5"
+            stroke="currentColor"
+            strokeWidth="2"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {messages.map((message, index) => (
+          <div
+            key={index}
+            className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`max-w-[80%] rounded-lg p-3 ${
+                message.type === "user"
+                  ? "ml-4 bg-black text-white"
+                  : "mr-4 bg-[#8b5cf6] text-white"
+              }`}
+            >
+              {message.type === "user" ? (
+                message.content
+              ) : (
+                <ReactMarkdown
+                  className="prose prose-sm dark:prose-invert max-w-none"
+                  components={{
+                    p: ({ children }) => (
+                      <p className="mb-2 last:mb-0">{children}</p>
+                    ),
+                    code(props) {
+                      const { children, className, node: _, ...rest } = props;
+                      const match = /language-(\w+)/.exec(className || "");
+                      return match ? (
+                        <pre className="overflow-x-auto rounded-md bg-muted-foreground/20 p-3">
+                          <code className="font-mono text-sm" {...rest}>
+                            {children}
+                          </code>
+                        </pre>
+                      ) : (
+                        <code
+                          className="rounded-md bg-muted-foreground/20 px-1 py-0.5 font-mono text-sm"
+                          {...rest}
+                        >
+                          {children}
+                        </code>
+                      );
+                    },
+                    ul: ({ children }) => (
+                      <ul className="mb-2 list-disc pl-4 last:mb-0">
+                        {children}
+                      </ul>
+                    ),
+                    ol: ({ children }) => (
+                      <ol className="mb-2 list-decimal pl-4 last:mb-0">
+                        {children}
+                      </ol>
+                    ),
+                    li: ({ children }) => (
+                      <li className="mb-1 last:mb-0">{children}</li>
+                    ),
+                  }}
+                >
+                  {message.content}
+                </ReactMarkdown>
+              )}
+            </div>
+          </div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <form onSubmit={handleSubmit} className="border-t p-4">
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Type your message..."
+              className="flex-1 rounded-md border bg-background px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
+              disabled={isProcessing}
+            />
+            <button
+              type="submit"
+              disabled={isProcessing}
+              className="rounded-md bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+            >
+              Send
+            </button>
+          </div>
+          {graphID && (
+            <button
+              type="button"
+              onClick={() => {
+                setIncludeGraphData((prev) => !prev);
+              }}
+              className={`flex items-center gap-2 rounded border px-2 py-1.5 text-sm transition-all duration-200 ${
+                includeGraphData
+                  ? "border-primary/30 bg-primary/10 text-primary hover:shadow-[0_0_10px_3px_rgba(139,92,246,0.3)]"
+                  : "border-transparent bg-muted text-muted-foreground hover:bg-muted/80 hover:shadow-[0_0_10px_3px_rgba(139,92,246,0.15)]"
+              }`}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                className="h-4 w-4"
+                stroke="currentColor"
+                strokeWidth="2"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <circle cx="8.5" cy="8.5" r="1.5" />
+                <polyline points="21 15 16 10 5 21" />
+              </svg>
+              {includeGraphData
+                ? "Graph data will be included"
+                : "Include graph data"}
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/OutputModalComponent.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import { Button } from "../../../../../components/__legacy__/ui/button";
+import { NodeExecutionResult } from "@/lib/autogpt-server-api/types";
+import DataTable from "./DataTable";
+import { Separator } from "@/components/__legacy__/ui/separator";
+
+interface OutputModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  executionResults: {
+    execId: string;
+    data: NodeExecutionResult["output_data"];
+  }[];
+}
+
+const OutputModalComponent: FC<OutputModalProps> = ({
+  isOpen,
+  onClose,
+  executionResults,
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="nodrag nowheel fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+      <div className="w-[500px] max-w-[90%] rounded-lg border-[1.5px] bg-white p-5">
+        <strong>Output Data History</strong>
+        <div className="my-2 max-h-[384px] flex-grow overflow-y-auto rounded-md p-2">
+          {executionResults.map((data, i) => (
+            <>
+              <DataTable
+                key={i}
+                title={data.execId}
+                data={data.data}
+                truncateLongData={true}
+              />
+              <Separator />
+            </>
+          ))}
+        </div>
+        <div className="mt-2.5 flex justify-end gap-2.5">
+          <Button onClick={onClose}>Close</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OutputModalComponent;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerInputUI.tsx

@@ -0,0 +1,96 @@
+import { useCallback } from "react";
+
+import { AgentRunDraftView } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import type {
+  CredentialsMetaInput,
+  Graph,
+} from "@/lib/autogpt-server-api/types";
+
+interface RunInputDialogProps {
+  isOpen: boolean;
+  doClose: () => void;
+  graph: Graph;
+  doRun?: (
+    inputs: Record<string, any>,
+    credentialsInputs: Record<string, CredentialsMetaInput>,
+  ) => Promise<void> | void;
+  doCreateSchedule?: (
+    cronExpression: string,
+    scheduleName: string,
+    inputs: Record<string, any>,
+    credentialsInputs: Record<string, CredentialsMetaInput>,
+  ) => Promise<void> | void;
+}
+
+export function RunnerInputDialog({
+  isOpen,
+  doClose,
+  graph,
+  doRun,
+  doCreateSchedule,
+}: RunInputDialogProps) {
+  const handleRun = useCallback(
+    doRun
+      ? async (
+          inputs: Record<string, any>,
+          credentials_inputs: Record<string, CredentialsMetaInput>,
+        ) => {
+          await doRun(inputs, credentials_inputs);
+          doClose();
+        }
+      : async () => {},
+    [doRun, doClose],
+  );
+
+  const handleSchedule = useCallback(
+    doCreateSchedule
+      ? async (
+          cronExpression: string,
+          scheduleName: string,
+          inputs: Record<string, any>,
+          credentialsInputs: Record<string, CredentialsMetaInput>,
+        ) => {
+          await doCreateSchedule(
+            cronExpression,
+            scheduleName,
+            inputs,
+            credentialsInputs,
+          );
+          doClose();
+        }
+      : async () => {},
+    [doCreateSchedule, doClose],
+  );
+
+  return (
+    <Dialog
+      title="Run your agent"
+      controlled={{
+        isOpen,
+        set: (open) => {
+          if (!open) doClose();
+        },
+      }}
+      onClose={doClose}
+      styling={{
+        maxWidth: "56rem",
+        width: "90vw",
+      }}
+    >
+      <Dialog.Content>
+        <div className="flex flex-col p-10">
+          <p className="mt-2 text-sm text-zinc-600">{graph.name}</p>
+          <AgentRunDraftView
+            className="p-0"
+            graph={graph}
+            doRun={doRun ? handleRun : undefined}
+            onRun={doRun ? undefined : doClose}
+            doCreateSchedule={doCreateSchedule ? handleSchedule : undefined}
+            onCreateSchedule={doCreateSchedule ? undefined : doClose}
+          />
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerOutputUI.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/__legacy__/ui/sheet";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
+import { Label } from "@/components/__legacy__/ui/label";
+import { Textarea } from "@/components/__legacy__/ui/textarea";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Clipboard } from "lucide-react";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+
+export type OutputNodeInfo = {
+  metadata: {
+    name: string;
+    description: string;
+  };
+  result?: any;
+};
+
+interface OutputModalProps {
+  isOpen: boolean;
+  doClose: () => void;
+  outputs: OutputNodeInfo[];
+  graphExecutionError?: string | null;
+}
+
+const formatOutput = (output: any): string => {
+  if (typeof output === "object") {
+    try {
+      if (
+        Array.isArray(output) &&
+        output.every((item) => typeof item === "string")
+      ) {
+        return output.join("\n").replace(/\\n/g, "\n");
+      }
+      return JSON.stringify(output, null, 2);
+    } catch (error) {
+      return `Error formatting output: ${(error as Error).message}`;
+    }
+  }
+  if (typeof output === "string") {
+    return output.replace(/\\n/g, "\n");
+  }
+  return String(output);
+};
+
+export function RunnerOutputUI({
+  isOpen,
+  doClose,
+  outputs,
+  graphExecutionError,
+}: OutputModalProps) {
+  const { toast } = useToast();
+
+  const copyOutput = (name: string, output: any) => {
+    const formattedOutput = formatOutput(output);
+    navigator.clipboard.writeText(formattedOutput).then(() => {
+      toast({
+        title: `"${name}" output copied to clipboard!`,
+        duration: 2000,
+      });
+    });
+  };
+
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement) => {
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={doClose}>
+      <SheetContent
+        side="right"
+        className="flex h-full w-full flex-col overflow-hidden sm:max-w-[600px]"
+      >
+        <SheetHeader className="px-2 py-2">
+          <SheetTitle className="text-xl">Run Outputs</SheetTitle>
+          <SheetDescription className="mt-1 text-sm">
+            View the outputs from your agent run.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-grow overflow-y-auto px-2 py-2">
+          <ScrollArea className="h-full overflow-auto pr-4">
+            <div className="space-y-4">
+              {graphExecutionError && (
+                <div className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
+                  <p className="text-sm text-red-800 dark:text-red-200">
+                    <strong>Error:</strong> {graphExecutionError}
+                  </p>
+                </div>
+              )}
+              {outputs && outputs.length > 0 ? (
+                outputs.map((output, i) => (
+                  <div key={i} className="space-y-1">
+                    <Label className="text-base font-semibold">
+                      {output.metadata.name || "Unnamed Output"}
+                    </Label>
+
+                    {output.metadata.description && (
+                      <Label className="block text-sm text-gray-600">
+                        {output.metadata.description}
+                      </Label>
+                    )}
+
+                    <div className="group relative rounded-md bg-gray-100 p-2">
+                      <Button
+                        className="absolute right-1 top-1 z-10 m-1 hidden p-2 group-hover:block"
+                        variant="outline"
+                        size="icon"
+                        onClick={() =>
+                          copyOutput(
+                            output.metadata.name || "Unnamed Output",
+                            output.result,
+                          )
+                        }
+                        title="Copy Output"
+                      >
+                        <Clipboard size={18} />
+                      </Button>
+                      <Textarea
+                        readOnly
+                        value={formatOutput(output.result ?? "No output yet")}
+                        className="w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent text-sm"
+                        style={{
+                          height: "auto",
+                          minHeight: "2.5rem",
+                          maxHeight: "400px",
+                        }}
+                        ref={(el) => {
+                          if (el) {
+                            adjustTextareaHeight(el);
+                            if (el.scrollHeight > 400) {
+                              el.style.height = "400px";
+                            }
+                          }
+                        }}
+                      />
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p>No output blocks available.</p>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default RunnerOutputUI;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerUIWrapper.tsx

@@ -0,0 +1,117 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+} from "react";
+import { Node } from "@xyflow/react";
+import { CustomNodeData } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import {
+  BlockUIType,
+  CredentialsMetaInput,
+  Graph,
+} from "@/lib/autogpt-server-api/types";
+import RunnerOutputUI, { OutputNodeInfo } from "./RunnerOutputUI";
+import { RunnerInputDialog } from "./RunnerInputUI";
+
+interface RunnerUIWrapperProps {
+  graph: Graph;
+  nodes: Node<CustomNodeData>[];
+  graphExecutionError?: string | null;
+  saveAndRun: (
+    inputs: Record<string, any>,
+    credentialsInputs: Record<string, CredentialsMetaInput>,
+  ) => void;
+  createRunSchedule: (
+    cronExpression: string,
+    scheduleName: string,
+    inputs: Record<string, any>,
+    credentialsInputs: Record<string, CredentialsMetaInput>,
+  ) => Promise<void>;
+}
+
+export interface RunnerUIWrapperRef {
+  openRunInputDialog: () => void;
+  openRunnerOutput: () => void;
+  runOrOpenInput: () => void;
+}
+
+const RunnerUIWrapper = forwardRef<RunnerUIWrapperRef, RunnerUIWrapperProps>(
+  (
+    { graph, nodes, graphExecutionError, saveAndRun, createRunSchedule },
+    ref,
+  ) => {
+    const [isRunInputDialogOpen, setIsRunInputDialogOpen] = useState(false);
+    const [isRunnerOutputOpen, setIsRunnerOutputOpen] = useState(false);
+
+    const graphInputs = graph.input_schema.properties;
+
+    const graphOutputs = useMemo((): OutputNodeInfo[] => {
+      const outputNodes = nodes.filter(
+        (node) => node.data.uiType === BlockUIType.OUTPUT,
+      );
+
+      return outputNodes.map(
+        (node) =>
+          ({
+            metadata: {
+              name: node.data.hardcodedValues.name || "Output",
+              description:
+                node.data.hardcodedValues.description ||
+                "Output from the agent",
+            },
+            result:
+              (node.data.executionResults as any)
+                ?.map((result: any) => result?.data?.output)
+                .join("\n--\n") || "No output yet",
+          }) satisfies OutputNodeInfo,
+      );
+    }, [nodes]);
+
+    const openRunInputDialog = () => setIsRunInputDialogOpen(true);
+    const openRunnerOutput = () => setIsRunnerOutputOpen(true);
+
+    const runOrOpenInput = () => {
+      if (
+        Object.keys(graphInputs).length > 0 ||
+        Object.keys(graph.credentials_input_schema.properties).length > 0
+      ) {
+        openRunInputDialog();
+      } else {
+        saveAndRun({}, {});
+      }
+    };
+
+    useImperativeHandle(
+      ref,
+      () =>
+        ({
+          openRunInputDialog,
+          openRunnerOutput,
+          runOrOpenInput,
+        }) satisfies RunnerUIWrapperRef,
+    );
+
+    return (
+      <>
+        <RunnerInputDialog
+          isOpen={isRunInputDialogOpen}
+          doClose={() => setIsRunInputDialogOpen(false)}
+          graph={graph}
+          doRun={saveAndRun}
+          doCreateSchedule={createRunSchedule}
+        />
+        <RunnerOutputUI
+          isOpen={isRunnerOutputOpen}
+          doClose={() => setIsRunnerOutputOpen(false)}
+          outputs={graphOutputs}
+          graphExecutionError={graphExecutionError}
+        />
+      </>
+    );
+  },
+);
+
+RunnerUIWrapper.displayName = "RunnerUIWrapper";
+
+export default RunnerUIWrapper;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/SaveControl.tsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/__legacy__/ui/popover";
+import { Card, CardContent, CardFooter } from "@/components/__legacy__/ui/card";
+import { Input } from "@/components/__legacy__/ui/input";
+import { Button } from "@/components/__legacy__/ui/button";
+import { GraphMeta } from "@/lib/autogpt-server-api";
+import { Label } from "@/components/__legacy__/ui/label";
+import { IconSave } from "@/components/__legacy__/ui/icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { useQueryClient } from "@tanstack/react-query";
+import { getGetV2ListMySubmissionsQueryKey } from "@/app/api/__generated__/endpoints/store/store";
+import { CronExpressionDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
+import { humanizeCronExpression } from "@/lib/cron-expression-utils";
+import { CalendarClockIcon } from "lucide-react";
+
+interface SaveControlProps {
+  agentMeta: GraphMeta | null;
+  agentName: string;
+  agentDescription: string;
+  agentRecommendedScheduleCron: string;
+  canSave: boolean;
+  onSave: () => Promise<void>;
+  onNameChange: (name: string) => void;
+  onDescriptionChange: (description: string) => void;
+  onRecommendedScheduleCronChange: (cron: string) => void;
+  pinSavePopover: boolean;
+}
+
+/**
+ * A SaveControl component to be used within the ControlPanel. It allows the user to save the agent.
+ * @param {Object} SaveControlProps - The properties of the SaveControl component.
+ * @param {GraphMeta | null} SaveControlProps.agentMeta - The agent's metadata, or null if creating a new agent.
+ * @param {string} SaveControlProps.agentName - The agent's name.
+ * @param {string} SaveControlProps.agentDescription - The agent's description.
+ * @param {boolean} SaveControlProps.canSave - Whether the button to save the agent should be enabled.
+ * @param {() => void} SaveControlProps.onSave - Function to save the agent.
+ * @param {(name: string) => void} SaveControlProps.onNameChange - Function to handle name changes.
+ * @param {(description: string) => void} SaveControlProps.onDescriptionChange - Function to handle description changes.
+ * @returns The SaveControl component.
+ */
+export const SaveControl = ({
+  agentMeta,
+  canSave,
+  onSave,
+  agentName,
+  onNameChange,
+  agentDescription,
+  onDescriptionChange,
+  agentRecommendedScheduleCron,
+  onRecommendedScheduleCronChange,
+  pinSavePopover,
+}: SaveControlProps) => {
+  /**
+   * Note for improvement:
+   * At the moment we are leveraging onDescriptionChange and onNameChange to handle the changes in the description and name of the agent.
+   * We should migrate this to be handled with form controls and a form library.
+   */
+
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [cronScheduleDialogOpen, setCronScheduleDialogOpen] = useState(false);
+
+  const handleScheduleChange = (cronExpression: string) => {
+    onRecommendedScheduleCronChange(cronExpression);
+  };
+
+  useEffect(() => {
+    const handleKeyDown = async (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+        event.preventDefault(); // Stop the browser default action
+        await onSave(); // Call your save function
+        queryClient.invalidateQueries({
+          queryKey: getGetV2ListMySubmissionsQueryKey(),
+        });
+        toast({
+          duration: 2000,
+          title: "All changes saved successfully!",
+        });
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onSave, toast]);
+
+  return (
+    <Popover open={pinSavePopover ? true : undefined}>
+      <Tooltip delayDuration={500}>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              data-id="save-control-popover-trigger"
+              data-testid="blocks-control-save-button"
+              name="Save"
+            >
+              <IconSave className="dark:text-gray-300" />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="right">Save</TooltipContent>
+      </Tooltip>
+      <PopoverContent
+        side="right"
+        sideOffset={15}
+        align="start"
+        data-id="save-control-popover-content"
+        className="w-96 max-w-[400px]"
+      >
+        <Card className="border-none shadow-none dark:bg-slate-900">
+          <CardContent className="p-4">
+            <div className="space-y-3">
+              <div>
+                <Label htmlFor="name" className="dark:text-gray-300">
+                  Name
+                </Label>
+                <Input
+                  id="name"
+                  placeholder="Enter your agent name"
+                  value={agentName}
+                  onChange={(e) => onNameChange(e.target.value)}
+                  data-id="save-control-name-input"
+                  data-testid="save-control-name-input"
+                  maxLength={100}
+                  className="mt-1"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="description" className="dark:text-gray-300">
+                  Description
+                </Label>
+                <Input
+                  id="description"
+                  placeholder="Your agent description"
+                  value={agentDescription}
+                  onChange={(e) => onDescriptionChange(e.target.value)}
+                  data-id="save-control-description-input"
+                  data-testid="save-control-description-input"
+                  maxLength={500}
+                  className="mt-1"
+                />
+              </div>
+
+              <div>
+                <Label className="dark:text-gray-300">
+                  Recommended Schedule
+                </Label>
+                <Button
+                  variant="outline"
+                  onClick={() => setCronScheduleDialogOpen(true)}
+                  className="mt-1 w-full min-w-0 justify-start text-sm"
+                  data-id="save-control-recommended-schedule-button"
+                  data-testid="save-control-recommended-schedule-button"
+                >
+                  <CalendarClockIcon className="mr-2 h-4 w-4 flex-shrink-0" />
+                  <span className="min-w-0 flex-1 truncate">
+                    {agentRecommendedScheduleCron
+                      ? humanizeCronExpression(agentRecommendedScheduleCron)
+                      : "Set schedule"}
+                  </span>
+                </Button>
+              </div>
+
+              {agentMeta?.version && (
+                <div>
+                  <Label htmlFor="version" className="dark:text-gray-300">
+                    Version
+                  </Label>
+                  <Input
+                    id="version"
+                    placeholder="Version"
+                    value={agentMeta?.version || "-"}
+                    disabled
+                    data-testid="save-control-version-output"
+                    className="mt-1"
+                  />
+                </div>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col items-stretch gap-2">
+            <Button
+              className="w-full dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800"
+              onClick={onSave}
+              data-id="save-control-save-agent"
+              data-testid="save-control-save-agent-button"
+              disabled={!canSave}
+            >
+              Save Agent
+            </Button>
+          </CardFooter>
+        </Card>
+      </PopoverContent>
+      <CronExpressionDialog
+        open={cronScheduleDialogOpen}
+        setOpen={setCronScheduleDialogOpen}
+        onSubmit={handleScheduleChange}
+        defaultCronExpression={agentRecommendedScheduleCron}
+        title="Recommended Schedule"
+      />
+    </Popover>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/history.ts

@@ -0,0 +1,95 @@
+import { CustomNodeData } from "./CustomNode/CustomNode";
+import { CustomEdgeData } from "./CustomEdge/CustomEdge";
+import { Edge } from "@xyflow/react";
+
+type ActionType =
+  | "ADD_NODE"
+  | "DELETE_NODE"
+  | "ADD_EDGE"
+  | "DELETE_EDGE"
+  | "UPDATE_NODE"
+  | "MOVE_NODE"
+  | "UPDATE_INPUT"
+  | "UPDATE_NODE_POSITION";
+
+type AddNodePayload = { node: CustomNodeData };
+type DeleteNodePayload = { nodeId: string };
+type AddEdgePayload = { edge: Edge<CustomEdgeData> };
+type DeleteEdgePayload = { edgeId: string };
+type UpdateNodePayload = { nodeId: string; newData: Partial<CustomNodeData> };
+type MoveNodePayload = { nodeId: string; position: { x: number; y: number } };
+type UpdateInputPayload = {
+  nodeId: string;
+  oldValues: { [key: string]: any };
+  newValues: { [key: string]: any };
+};
+type UpdateNodePositionPayload = {
+  nodeId: string;
+  oldPosition: { x: number; y: number };
+  newPosition: { x: number; y: number };
+};
+
+type ActionPayload =
+  | AddNodePayload
+  | DeleteNodePayload
+  | AddEdgePayload
+  | DeleteEdgePayload
+  | UpdateNodePayload
+  | MoveNodePayload
+  | UpdateInputPayload
+  | UpdateNodePositionPayload;
+
+type Action = {
+  type: ActionType;
+  payload: ActionPayload;
+  undo: () => void;
+  redo: () => void;
+};
+
+class History {
+  private past: Action[] = [];
+  private future: Action[] = [];
+
+  push(action: Action) {
+    this.past.push(action);
+    this.future = [];
+  }
+
+  undo() {
+    const action = this.past.pop();
+    if (action) {
+      action.undo();
+      this.future.push(action);
+    }
+  }
+
+  redo() {
+    const action = this.future.pop();
+    if (action) {
+      action.redo();
+      this.past.push(action);
+    }
+  }
+
+  canUndo(): boolean {
+    return this.past.length > 0;
+  }
+
+  canRedo(): boolean {
+    return this.future.length > 0;
+  }
+
+  clear() {
+    this.past = [];
+    this.future = [];
+  }
+
+  getHistoryState() {
+    return {
+      past: [...this.past],
+      future: [...this.future],
+    };
+  }
+}
+
+export const history = new History();

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/tutorial.ts

@@ -0,0 +1,569 @@
+import Shepherd from "shepherd.js";
+import "shepherd.js/dist/css/shepherd.css";
+import { Key, storage } from "@/services/storage/local-storage";
+import { analytics } from "@/services/analytics";
+
+export const startTutorial = (
+  emptyNodeList: (forceEmpty: boolean) => boolean,
+  setPinBlocksPopover: (value: boolean) => void,
+  setPinSavePopover: (value: boolean) => void,
+) => {
+  const tour = new Shepherd.Tour({
+    useModalOverlay: true,
+    defaultStepOptions: {
+      cancelIcon: { enabled: true },
+      scrollTo: { behavior: "smooth", block: "center" },
+    },
+  });
+
+  // CSS classes for disabling and highlighting blocks
+  const disableClass = "disable-blocks";
+  const highlightClass = "highlight-block";
+  let isConnecting = false;
+
+  // Helper function to disable all blocks except the target block
+  const disableOtherBlocks = (targetBlockSelector: string) => {
+    document.querySelectorAll('[data-id^="block-card-"]').forEach((block) => {
+      block.classList.toggle(disableClass, !block.matches(targetBlockSelector));
+      block.classList.toggle(
+        highlightClass,
+        block.matches(targetBlockSelector),
+      );
+    });
+  };
+
+  // Helper function to enable all blocks
+  const enableAllBlocks = () => {
+    document.querySelectorAll('[data-id^="block-card-"]').forEach((block) => {
+      block.classList.remove(disableClass, highlightClass);
+    });
+  };
+
+  // Inject CSS for disabling and highlighting blocks
+  const injectStyles = () => {
+    const style = document.createElement("style");
+    style.textContent = `
+            .${disableClass} {
+                pointer-events: none;
+                opacity: 0.5;
+            }
+            .${highlightClass} {
+                background-color: #ffeb3b;
+                border: 2px solid #fbc02d;
+                transition: background-color 0.3s, border-color 0.3s;
+            }
+        `;
+    document.head.appendChild(style);
+  };
+
+  // Helper function to check if an element is present in the DOM
+  const waitForElement = (selector: string): Promise<void> => {
+    return new Promise((resolve) => {
+      const checkElement = () => {
+        if (document.querySelector(selector)) {
+          resolve();
+        } else {
+          setTimeout(checkElement, 10);
+        }
+      };
+      checkElement();
+    });
+  };
+
+  // Function to detect the correct connection and advance the tour
+  const detectConnection = () => {
+    const checkForConnection = () => {
+      const correctConnection = document.querySelector(
+        '[data-testid^="rf__edge-"]',
+      );
+      if (correctConnection) {
+        tour.show("press-run-again");
+      } else {
+        setTimeout(checkForConnection, 100);
+      }
+    };
+
+    checkForConnection();
+  };
+
+  // Define state management functions to handle connection state
+  function startConnecting() {
+    isConnecting = true;
+  }
+
+  function stopConnecting() {
+    isConnecting = false;
+  }
+
+  // Reset connection state when revisiting the step
+  function resetConnectionState() {
+    stopConnecting();
+  }
+
+  // Event handlers for mouse down and up to manage connection state
+  function handleMouseDown() {
+    startConnecting();
+    setTimeout(() => {
+      if (isConnecting) {
+        tour.next();
+      }
+    }, 100);
+  }
+  // Event handler for mouse up to check if the connection was successful
+  function handleMouseUp(event: { target: any }) {
+    const target = event.target;
+    const validConnectionPoint = document.querySelector(
+      '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
+    );
+
+    if (validConnectionPoint && !validConnectionPoint.contains(target)) {
+      setTimeout(() => {
+        if (!document.querySelector('[data-testid^="rf__edge-"]')) {
+          stopConnecting();
+          tour.show("connect-blocks-output");
+        }
+      }, 200);
+    } else {
+      stopConnecting();
+    }
+  }
+
+  // Define the fitViewToScreen function
+  const fitViewToScreen = () => {
+    const fitViewButton = document.querySelector(
+      ".react-flow__controls-fitview",
+    ) as HTMLButtonElement;
+    if (fitViewButton) {
+      fitViewButton.click();
+    }
+  };
+
+  injectStyles();
+
+  const warningText = emptyNodeList(false)
+    ? ""
+    : "<br/><br/><b>Caution: Clicking next will start a tutorial and will clear the current flow.</b>";
+
+  tour.addStep({
+    id: "starting-step",
+    title: "Welcome to the Tutorial",
+    text: `This is the AutoGPT builder! ${warningText}`,
+    buttons: [
+      {
+        text: "Skip Tutorial",
+        action: () => {
+          tour.cancel(); // Ends the tour
+          storage.set(Key.SHEPHERD_TOUR, "skipped"); // Set the tutorial as skipped in local storage
+        },
+        classes: "shepherd-button-secondary", // Optionally add a class for styling the skip button differently
+      },
+      {
+        text: "Next",
+        action: () => {
+          emptyNodeList(true);
+          tour.next();
+        },
+      },
+    ],
+  });
+
+  tour.addStep({
+    id: "open-block-step",
+    title: "Open Blocks Menu",
+    text: "Please click the block button to open the blocks menu.",
+    attachTo: {
+      element: '[data-id="blocks-control-popover-trigger"]',
+      on: "right",
+    },
+    advanceOn: {
+      selector: '[data-id="blocks-control-popover-trigger"]',
+      event: "click",
+    },
+    buttons: [],
+  });
+
+  tour.addStep({
+    id: "scroll-block-menu",
+    title: "Scroll Down or Search",
+    text: 'Scroll down or search in the blocks menu for the "Calculator Block" and press the block to add it.',
+    attachTo: {
+      element: '[data-id="blocks-control-popover-content"]',
+      on: "right",
+    },
+    buttons: [],
+    beforeShowPromise: () =>
+      waitForElement('[data-id="blocks-control-popover-content"]').then(() => {
+        disableOtherBlocks(
+          '[data-id="block-card-b1ab9b19-67a6-406d-abf5-2dba76d00c79"]',
+        );
+      }),
+    advanceOn: {
+      selector: '[data-id="block-card-b1ab9b19-67a6-406d-abf5-2dba76d00c79"]',
+      event: "click",
+    },
+    when: {
+      show: () => setPinBlocksPopover(true),
+      hide: enableAllBlocks,
+    },
+  });
+
+  tour.addStep({
+    id: "focus-new-block",
+    title: "New Block",
+    text: "This is the Calculator Block! Let's go over how it works.",
+    attachTo: { element: `[data-id="custom-node-1"]`, on: "left" },
+    beforeShowPromise: () => waitForElement('[data-id="custom-node-1"]'),
+    buttons: [
+      {
+        text: "Next",
+        action: tour.next,
+      },
+    ],
+    when: {
+      show: () => {
+        setPinBlocksPopover(false);
+        setTimeout(() => {
+          fitViewToScreen();
+        }, 100);
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "input-to-block",
+    title: "Input to the Block",
+    text: "This is the input pin for the block. You can input the output of other blocks here; this block takes numbers as input.",
+    attachTo: { element: '[data-nodeid="1"]', on: "left" },
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+      {
+        text: "Next",
+        action: tour.next,
+      },
+    ],
+  });
+
+  tour.addStep({
+    id: "output-from-block",
+    title: "Output from the Block",
+    text: "This is the output pin for the block. You can connect this to another block to pass the output along.",
+    attachTo: { element: '[data-handlepos="right"]', on: "right" },
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+      {
+        text: "Next",
+        action: tour.next,
+      },
+    ],
+  });
+
+  tour.addStep({
+    id: "select-operation-and-input",
+    title: "Select Operation and Input Numbers",
+    text: "Select any mathematical operation you'd like to perform, and enter numbers in both input fields.",
+    attachTo: { element: '[data-id="input-handles"]', on: "right" },
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+      {
+        text: "Next",
+        action: tour.next,
+      },
+    ],
+  });
+
+  tour.addStep({
+    id: "press-initial-save-button",
+    title: "Press Save",
+    text: "First we need to save the flow before we can run it!",
+    attachTo: {
+      element: '[data-id="save-control-popover-trigger"]',
+      on: "left",
+    },
+    advanceOn: {
+      selector: '[data-id="save-control-popover-trigger"]',
+      event: "click",
+    },
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+    ],
+    when: {
+      hide: () => setPinSavePopover(true),
+    },
+  });
+
+  tour.addStep({
+    id: "save-agent-details",
+    title: "Save the Agent",
+    text: "Enter a name for your agent, add an optional description, and then click 'Save agent' to save your flow.",
+    attachTo: {
+      element: '[data-id="save-control-popover-content"]',
+      on: "top",
+    },
+    buttons: [],
+    beforeShowPromise: () =>
+      waitForElement('[data-id="save-control-popover-content"]'),
+    advanceOn: {
+      selector: '[data-id="save-control-save-agent"]',
+      event: "click",
+    },
+    when: {
+      hide: () => setPinSavePopover(false),
+    },
+  });
+
+  tour.addStep({
+    id: "press-run",
+    title: "Press Run",
+    text: "Start your first flow by pressing the Run button!",
+    attachTo: {
+      element: '[data-tutorial-id="primary-action-run-agent"]',
+      on: "top",
+    },
+    advanceOn: {
+      selector: '[data-tutorial-id="primary-action-run-agent"]',
+      event: "click",
+    },
+    buttons: [],
+    beforeShowPromise: () =>
+      waitForElement('[data-tutorial-id="primary-action-run-agent"]'),
+    when: {
+      hide: () => {
+        setTimeout(() => {
+          fitViewToScreen();
+        }, 500);
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "wait-for-processing",
+    title: "Processing",
+    text: "Let's wait for the block to finish being processed...",
+    attachTo: {
+      element: '[data-id^="badge-"][data-id$="-QUEUED"]',
+      on: "bottom",
+    },
+    buttons: [],
+    beforeShowPromise: () =>
+      waitForElement('[data-id^="badge-"][data-id$="-QUEUED"]').then(
+        fitViewToScreen,
+      ),
+    when: {
+      show: () => {
+        waitForElement('[data-id^="badge-"][data-id$="-COMPLETED"]').then(
+          () => {
+            tour.next();
+          },
+        );
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "check-output",
+    title: "Check the Output",
+    text: "Check here to see the output of the block after running the flow.",
+    attachTo: { element: '[data-id="latest-output"]', on: "top" },
+    beforeShowPromise: () =>
+      new Promise((resolve) => {
+        setTimeout(() => {
+          waitForElement('[data-id="latest-output"]').then(resolve);
+        }, 100);
+      }),
+    buttons: [
+      {
+        text: "Next",
+        action: tour.next,
+      },
+    ],
+    when: {
+      show: () => {
+        fitViewToScreen();
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "copy-paste-block",
+    title: "Copy and Paste the Block",
+    text: "Let’s duplicate this block. Click and hold the block with your mouse, then press Ctrl+C (Cmd+C on Mac) to copy and Ctrl+V (Cmd+V on Mac) to paste.",
+    attachTo: { element: '[data-testid^="rf__node-"]', on: "top" },
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+    ],
+    when: {
+      show: () => {
+        fitViewToScreen();
+        waitForElement('[data-testid^="rf__node-"]:nth-child(2)').then(() => {
+          tour.next();
+        });
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "focus-second-block",
+    title: "Focus on the New Block",
+    text: "This is your copied Calculator Block. Now, let’s move it to the side of the first block.",
+    attachTo: { element: '[data-testid^="rf__node-"]:nth-child(2)', on: "top" },
+    beforeShowPromise: () =>
+      waitForElement('[data-testid^="rf__node-"]:nth-child(2)'),
+    buttons: [
+      {
+        text: "Next",
+        action: tour.next,
+      },
+    ],
+  });
+
+  tour.addStep({
+    id: "connect-blocks-output",
+    title: "Connect the Blocks: Output",
+    text: "Now, let's connect the output of the first Calculator Block to the input of the second Calculator Block. Drag from the output pin of the first block to the input pin (A) of the second block.",
+    attachTo: {
+      element:
+        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
+      on: "bottom",
+    },
+
+    buttons: [
+      {
+        text: "Back",
+        action: tour.back,
+      },
+    ],
+    beforeShowPromise: () => {
+      return waitForElement(
+        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
+      );
+    },
+    when: {
+      show: () => {
+        fitViewToScreen();
+        resetConnectionState(); // Reset state when revisiting this step
+        tour.modal.show();
+        const outputPin = document.querySelector(
+          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
+        );
+        if (outputPin) {
+          outputPin.addEventListener("mousedown", handleMouseDown);
+        }
+      },
+      hide: () => {
+        const outputPin = document.querySelector(
+          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
+        );
+        if (outputPin) {
+          outputPin.removeEventListener("mousedown", handleMouseDown);
+        }
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "connect-blocks-input",
+    title: "Connect the Blocks: Input",
+    text: "Now, connect the output to the input pin of the second block (A).",
+    attachTo: {
+      element: '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
+      on: "top",
+    },
+    buttons: [],
+    beforeShowPromise: () => {
+      return waitForElement(
+        '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
+      ).then(() => {
+        detectConnection();
+      });
+    },
+    when: {
+      show: () => {
+        tour.modal.show();
+        document.addEventListener("mouseup", handleMouseUp, true);
+      },
+      hide: () => {
+        tour.modal.hide();
+        document.removeEventListener("mouseup", handleMouseUp, true);
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "press-run-again",
+    title: "Press Run Again",
+    text: "Now, press the Run button again to execute the flow with the new Calculator Block added!",
+    attachTo: {
+      element: '[data-tutorial-id="primary-action-run-agent"]',
+      on: "top",
+    },
+    advanceOn: {
+      selector: '[data-tutorial-id="primary-action-run-agent"]',
+      event: "click",
+    },
+    buttons: [],
+    beforeShowPromise: () =>
+      waitForElement('[data-tutorial-id="primary-action-run-agent"]'),
+    when: {
+      hide: () => {
+        setTimeout(() => {
+          fitViewToScreen();
+        }, 500);
+      },
+    },
+  });
+
+  tour.addStep({
+    id: "congratulations",
+    title: "Congratulations!",
+    text: "You have successfully created your first flow. Watch for the outputs in the blocks!",
+    beforeShowPromise: () => waitForElement('[data-id="latest-output"]'),
+    when: {
+      show: () => tour.modal.hide(),
+    },
+    buttons: [
+      {
+        text: "Finish",
+        action: tour.complete,
+      },
+    ],
+  });
+
+  // Unpin blocks and save menu when the tour is completed or canceled
+  tour.on("complete", () => {
+    setPinBlocksPopover(false);
+    setPinSavePopover(false);
+    storage.set(Key.SHEPHERD_TOUR, "completed"); // Optionally mark the tutorial as completed
+  });
+
+  for (const step of tour.steps) {
+    step.on("show", () => {
+      "use client";
+      console.debug("sendTutorialStep");
+
+      analytics.sendGAEvent("event", "tutorial_step_shown", { value: step.id });
+    });
+  }
+
+  tour.on("cancel", () => {
+    setPinBlocksPopover(false);
+    setPinSavePopover(false);
+    storage.set(Key.SHEPHERD_TOUR, "canceled"); // Optionally mark the tutorial as canceled
+  });
+
+  tour.start();
+};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/useCopyPaste.ts

@@ -0,0 +1,142 @@
+import { useCallback } from "react";
+import { Node, Edge, useReactFlow } from "@xyflow/react";
+import { Key, storage } from "@/services/storage/local-storage";
+import { ConnectedEdge } from "./CustomNode/CustomNode";
+
+interface CopyableData {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+export function useCopyPaste(getNextNodeId: () => string) {
+  const { setNodes, addEdges, getNodes, getEdges, getViewport } =
+    useReactFlow();
+
+  const handleCopyPaste = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.ctrlKey || event.metaKey) {
+        if (event.key === "c" || event.key === "C") {
+          const selectedNodes = getNodes().filter((node) => node.selected);
+          const selectedNodeIds = new Set(selectedNodes.map((node) => node.id));
+
+          // Only copy edges where both source and target nodes are selected
+          const selectedEdges = getEdges().filter(
+            (edge) =>
+              edge.selected &&
+              selectedNodeIds.has(edge.source) &&
+              selectedNodeIds.has(edge.target),
+          );
+
+          const copiedData: CopyableData = {
+            nodes: selectedNodes.map((node) => ({
+              ...node,
+              data: {
+                ...node.data,
+                connections: node.data.connections || [], // Preserve connections
+              },
+            })),
+            edges: selectedEdges,
+          };
+
+          storage.set(Key.COPIED_FLOW_DATA, JSON.stringify(copiedData));
+        }
+        if (event.key === "v" || event.key === "V") {
+          const copiedDataString = storage.get(Key.COPIED_FLOW_DATA);
+          if (copiedDataString) {
+            const copiedData = JSON.parse(copiedDataString) as CopyableData;
+            const oldToNewIdMap: Record<string, string> = {};
+
+            // Get fresh viewport values at paste time to ensure correct positioning
+            const { x, y, zoom } = getViewport();
+            const viewportCenter = {
+              x: (window.innerWidth / 2 - x) / zoom,
+              y: (window.innerHeight / 2 - y) / zoom,
+            };
+
+            let minX = Infinity,
+              minY = Infinity,
+              maxX = -Infinity,
+              maxY = -Infinity;
+            copiedData.nodes.forEach((node: Node) => {
+              minX = Math.min(minX, node.position.x);
+              minY = Math.min(minY, node.position.y);
+              maxX = Math.max(maxX, node.position.x);
+              maxY = Math.max(maxY, node.position.y);
+            });
+
+            const offsetX = viewportCenter.x - (minX + maxX) / 2;
+            const offsetY = viewportCenter.y - (minY + maxY) / 2;
+
+            const pastedNodes = copiedData.nodes.map((node: Node) => {
+              const newNodeId = getNextNodeId();
+              oldToNewIdMap[node.id] = newNodeId;
+              return {
+                ...node,
+                id: newNodeId, // Generate unique ID for the pasted node
+                selected: true, // Select the pasted nodes so they're visible
+                position: {
+                  x: node.position.x + offsetX,
+                  y: node.position.y + offsetY,
+                },
+                data: {
+                  ...node.data,
+                  backend_id: undefined, // Clear backend_id so the new node.id is used when saving
+                  connections: node.data.connections || [], // Preserve connections
+                  status: undefined,
+                  executionResults: undefined,
+                },
+              };
+            });
+
+            const pastedEdges = copiedData.edges.map((edge) => {
+              const newSourceId = oldToNewIdMap[edge.source] ?? edge.source;
+              const newTargetId = oldToNewIdMap[edge.target] ?? edge.target;
+              return {
+                ...edge,
+                id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
+                source: newSourceId,
+                target: newTargetId,
+              };
+            });
+
+            setNodes((existingNodes) => [
+              ...existingNodes.map((node) => ({ ...node, selected: false })),
+              ...pastedNodes,
+            ]);
+            addEdges(pastedEdges);
+
+            setNodes((nodes) => {
+              return nodes.map((node) => {
+                const nodeConnections = getEdges()
+                  .filter(
+                    (edge: Edge) =>
+                      edge.source === node.id || edge.target === node.id,
+                  )
+                  .map(
+                    (edge: Edge): ConnectedEdge => ({
+                      id: edge.id,
+                      source: edge.source,
+                      target: edge.target,
+                      sourceHandle: edge.sourceHandle!,
+                      targetHandle: edge.targetHandle!,
+                    }),
+                  );
+
+                return {
+                  ...node,
+                  data: {
+                    ...node.data,
+                    connections: nodeConnections,
+                  },
+                };
+              });
+            });
+          }
+        }
+      }
+    },
+    [setNodes, addEdges, getNodes, getEdges, getNextNodeId, getViewport],
+  );
+
+  return handleCopyPaste;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/types.ts

@@ -9,4 +9,5 @@ export enum BlockUIType {
   AGENT = "Agent",
   AI = "AI",
   AYRSHARE = "Ayrshare",
+  MCP_TOOL = "MCP Tool",
 }

autogpt_platform/frontend/src/app/(platform)/build/page.tsx

@@ -1,13 +1,64 @@
 "use client";
-import { ReactFlowProvider } from "@xyflow/react";
-import { Flow } from "./components/FlowEditor/Flow/Flow";
 
-export default function BuilderPage() {
+import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
+import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
+// import LoadingBox from "@/components/__legacy__/ui/loading";
+import { GraphID } from "@/lib/autogpt-server-api/types";
+import { ReactFlowProvider } from "@xyflow/react";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs";
+import { Flow } from "./components/FlowEditor/Flow/Flow";
+import { useBuilderView } from "./useBuilderView";
+
+function BuilderContent() {
+  const query = useSearchParams();
+  const { completeStep } = useOnboarding();
+
+  useEffect(() => {
+    completeStep("BUILDER_OPEN");
+  }, [completeStep]);
+
+  const _graphVersion = query.get("flowVersion");
+  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;
   return (
-    <div className="relative h-full w-full">
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </div>
+    <FlowEditor
+      className="flex h-full w-full"
+      flowID={(query.get("flowID") as GraphID | null) ?? undefined}
+      flowVersion={graphVersion}
+    />
+  );
+}
+
+export default function BuilderPage() {
+  const {
+    isSwitchEnabled,
+    selectedView,
+    setSelectedView,
+    isNewFlowEditorEnabled,
+  } = useBuilderView();
+
+  // Switch is temporary, we will remove it once our new flow editor is ready
+  if (isSwitchEnabled) {
+    return (
+      <div className="relative h-full w-full">
+        <BuilderViewTabs value={selectedView} onChange={setSelectedView} />
+        {selectedView === "new" ? (
+          <ReactFlowProvider>
+            <Flow />
+          </ReactFlowProvider>
+        ) : (
+          <BuilderContent />
+        )}
+      </div>
+    );
+  }
+
+  return isNewFlowEditorEnabled ? (
+    <ReactFlowProvider>
+      <Flow />
+    </ReactFlowProvider>
+  ) : (
+    <BuilderContent />
   );
 }

autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts

@@ -0,0 +1,44 @@
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+import { BuilderView } from "./components/BuilderViewTabs/BuilderViewTabs";
+
+export function useBuilderView() {
+  const isNewFlowEditorEnabled = useGetFlag(Flag.NEW_FLOW_EDITOR);
+  const isBuilderViewSwitchEnabled = useGetFlag(Flag.BUILDER_VIEW_SWITCH);
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentView = searchParams.get("view");
+  const defaultView = "old";
+  const selectedView = useMemo<BuilderView>(() => {
+    if (currentView === "new" || currentView === "old") return currentView;
+    return defaultView;
+  }, [currentView, defaultView]);
+
+  useEffect(() => {
+    if (isBuilderViewSwitchEnabled === true) {
+      if (currentView !== "new" && currentView !== "old") {
+        const params = new URLSearchParams(searchParams);
+        params.set("view", defaultView);
+        router.replace(`${pathname}?${params.toString()}`);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isBuilderViewSwitchEnabled, defaultView, pathname, router, searchParams]);
+
+  const setSelectedView = (value: BuilderView) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("view", value);
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return {
+    isSwitchEnabled: isBuilderViewSwitchEnabled === true,
+    selectedView,
+    setSelectedView,
+    isNewFlowEditorEnabled: Boolean(isNewFlowEditorEnabled),
+  } as const;
+}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx

@@ -0,0 +1,180 @@
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+import { Button } from "@/components/__legacy__/ui/button";
+import { TextRenderer } from "@/components/__legacy__/ui/render";
+import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+} from "@/components/__legacy__/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/__legacy__/ui/dropdown-menu";
+import { ChevronDownIcon, EnterIcon } from "@radix-ui/react-icons";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/__legacy__/ui/table";
+import { formatDistanceToNow } from "date-fns";
+import { DialogTitle } from "@/components/__legacy__/ui/dialog";
+import { AgentImportForm } from "./AgentImportForm";
+
+export const AgentFlowList = ({
+  flows,
+  executions,
+  selectedFlow,
+  onSelectFlow,
+  className,
+}: {
+  flows: LibraryAgent[];
+  executions?: GraphExecutionMeta[];
+  selectedFlow: LibraryAgent | null;
+  onSelectFlow: (f: LibraryAgent) => void;
+  className?: string;
+}) => {
+  return (
+    <Card className={className}>
+      <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
+        <CardTitle>Agents</CardTitle>
+
+        <div className="flex items-center">
+          {/* Split "Create" button */}
+          <Button variant="outline" className="rounded-r-none">
+            <Link href="/build">Create</Link>
+          </Button>
+          <Dialog>
+            {/* https://ui.shadcn.com/docs/components/dialog#notes */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={"rounded-l-none border-l-0 px-2"}
+                  data-testid="create-agent-dropdown"
+                >
+                  <ChevronDownIcon />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent>
+                <DialogTrigger asChild>
+                  <DropdownMenuItem data-testid="import-agent-from-file">
+                    <EnterIcon className="mr-2" /> Import from file
+                  </DropdownMenuItem>
+                </DialogTrigger>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle className="sr-only">Import Agent</DialogTitle>
+                <h2 className="text-lg font-semibold">
+                  Import an Agent from a file
+                </h2>
+              </DialogHeader>
+              <AgentImportForm />
+            </DialogContent>
+          </Dialog>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              {/* <TableHead>Status</TableHead> */}
+              {/* <TableHead>Last updated</TableHead> */}
+              {executions && (
+                <TableHead className="md:hidden lg:table-cell">
+                  # of runs
+                </TableHead>
+              )}
+              {executions && <TableHead>Last run</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody data-testid="agent-flow-list-body">
+            {flows
+              .map((flow) => {
+                let runCount = 0,
+                  lastRun: GraphExecutionMeta | null = null;
+                if (executions) {
+                  const _flowRuns = executions.filter(
+                    (r) => r.graph_id == flow.graph_id,
+                  );
+                  runCount = _flowRuns.length;
+                  lastRun =
+                    runCount == 0
+                      ? null
+                      : _flowRuns.reduce((a, c) => {
+                          const aTime = a.started_at?.getTime() ?? 0;
+                          const cTime = c.started_at?.getTime() ?? 0;
+                          return aTime > cTime ? a : c;
+                        });
+                }
+                return { flow, runCount, lastRun };
+              })
+              .sort((a, b) => {
+                if (!a.lastRun && !b.lastRun) return 0;
+                if (!a.lastRun) return 1;
+                if (!b.lastRun) return -1;
+                const bTime = b.lastRun.started_at?.getTime() ?? 0;
+                const aTime = a.lastRun.started_at?.getTime() ?? 0;
+                return bTime - aTime;
+              })
+              .map(({ flow, runCount, lastRun }) => (
+                <TableRow
+                  key={flow.id}
+                  data-testid={flow.id}
+                  data-name={flow.name}
+                  className="cursor-pointer"
+                  onClick={() => onSelectFlow(flow)}
+                  data-state={selectedFlow?.id == flow.id ? "selected" : null}
+                >
+                  <TableCell>
+                    <TextRenderer value={flow.name} truncateLengthLimit={30} />
+                  </TableCell>
+                  {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
+                  {/* <TableCell>
+                  {flow.updatedAt ?? "???"}
+                </TableCell> */}
+                  {executions && (
+                    <TableCell className="md:hidden lg:table-cell">
+                      {runCount}
+                    </TableCell>
+                  )}
+                  {executions &&
+                    (!lastRun ? (
+                      <TableCell />
+                    ) : (
+                      <TableCell title={lastRun.started_at?.toString() ?? ""}>
+                        {lastRun.started_at
+                          ? formatDistanceToNow(lastRun.started_at, {
+                              addSuffix: true,
+                            })
+                          : "—"}
+                      </TableCell>
+                    ))}
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};
+export default AgentFlowList;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentImportForm.tsx

@@ -0,0 +1,175 @@
+import { z } from "zod";
+import { cn } from "@/lib/utils";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from "react";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/__legacy__/ui/form";
+import { Input } from "@/components/__legacy__/ui/input";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Textarea } from "@/components/__legacy__/ui/textarea";
+import { EnterIcon } from "@radix-ui/react-icons";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import {
+  Graph,
+  GraphCreatable,
+  sanitizeImportedGraph,
+} from "@/lib/autogpt-server-api";
+
+// Add this custom schema for File type
+const fileSchema = z.custom<File>((val) => val instanceof File, {
+  message: "Must be a File object",
+});
+
+const formSchema = z.object({
+  agentFile: fileSchema,
+  agentName: z.string().min(1, "Agent name is required"),
+  agentDescription: z.string(),
+  importAsTemplate: z.boolean(),
+});
+
+export const AgentImportForm: React.FC<
+  React.FormHTMLAttributes<HTMLFormElement>
+> = ({ className, ...props }) => {
+  const [agentObject, setAgentObject] = useState<GraphCreatable | null>(null);
+  const api = useBackendAPI();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      agentName: "",
+      agentDescription: "",
+      importAsTemplate: false,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    if (!agentObject) {
+      form.setError("root", { message: "No Agent object to save" });
+      return;
+    }
+    const payload: GraphCreatable = {
+      ...agentObject,
+      name: values.agentName,
+      description: values.agentDescription,
+      is_active: !values.importAsTemplate,
+    };
+
+    api
+      .createGraph(payload, "upload")
+      .then((response) => {
+        const qID = "flowID";
+        window.location.href = `/build?${qID}=${response.id}`;
+      })
+      .catch((error) => {
+        const entity_type = "agent";
+        form.setError("root", {
+          message: `Could not create ${entity_type}: ${error}`,
+        });
+      });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn("space-y-4", className)}
+        {...props}
+      >
+        <FormField
+          control={form.control}
+          name="agentFile"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Agent file</FormLabel>
+              <FormControl className="cursor-pointer">
+                <Input
+                  type="file"
+                  accept="application/json"
+                  data-testid="import-agent-file-input"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    if (file) {
+                      field.onChange(file);
+                      const reader = new FileReader();
+                      // Attach parser to file reader
+                      reader.onload = (event) => {
+                        try {
+                          const obj = JSON.parse(
+                            event.target?.result as string,
+                          );
+                          if (
+                            !["name", "description", "nodes", "links"].every(
+                              (key) => key in obj && obj[key] != null,
+                            )
+                          ) {
+                            throw new Error(
+                              "Invalid agent object in file: " +
+                                JSON.stringify(obj, null, 2),
+                            );
+                          }
+                          const graph = obj as Graph;
+                          sanitizeImportedGraph(graph);
+                          setAgentObject(graph);
+                          form.setValue("agentName", graph.name);
+                          form.setValue("agentDescription", graph.description);
+                        } catch (error) {
+                          console.error("Error loading agent file:", error);
+                        }
+                      };
+                      // Load file
+                      reader.readAsText(file);
+                    }
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="agentName"
+          disabled={!agentObject}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Agent name</FormLabel>
+              <FormControl>
+                <Input {...field} data-testid="agent-name-input" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="agentDescription"
+          disabled={!agentObject}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Agent description</FormLabel>
+              <FormControl>
+                <Textarea {...field} data-testid="agent-description-input" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={!agentObject}
+          data-testid="import-agent-submit"
+        >
+          <EnterIcon className="mr-2" /> Import & Edit
+        </Button>
+      </form>
+    </Form>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowInfo.tsx

@@ -0,0 +1,243 @@
+import React, { useEffect, useState } from "react";
+import {
+  Graph,
+  GraphExecutionMeta,
+  LibraryAgent,
+} from "@/lib/autogpt-server-api";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/__legacy__/ui/dropdown-menu";
+import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
+import {
+  ClockIcon,
+  ExitIcon,
+  Pencil2Icon,
+  PlayIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
+import Link from "next/link";
+import { exportAsJSONFile } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/__legacy__/ui/dialog";
+import useAgentGraph from "@/hooks/useAgentGraph";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { FlowRunsStatus } from "./FlowRunsStatus";
+import { RunnerInputDialog } from "../../build/components/legacy-builder/RunnerInputUI";
+
+export const FlowInfo: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & {
+    flow: LibraryAgent;
+    executions: GraphExecutionMeta[];
+    flowVersion?: number | "all";
+    refresh: () => void;
+  }
+> = ({ flow, executions, flowVersion, refresh, ...props }) => {
+  const { savedAgent, saveAndRun, stopRun, isRunning } = useAgentGraph(
+    flow.graph_id,
+    flow.graph_version,
+    undefined,
+    false,
+  );
+
+  const api = useBackendAPI();
+
+  const [flowVersions, setFlowVersions] = useState<Graph[] | null>(null);
+  const [selectedVersion, setSelectedFlowVersion] = useState(
+    flowVersion ?? "all",
+  );
+  const selectedFlowVersion: Graph | undefined = flowVersions?.find(
+    (v) =>
+      v.version ==
+      (selectedVersion == "all" ? flow.graph_version : selectedVersion),
+  );
+
+  const hasInputs = Object.keys(flow.input_schema.properties).length > 0;
+  const hasCredentialsInputs =
+    Object.keys(flow.credentials_input_schema.properties).length > 0;
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
+  const isDisabled = !selectedFlowVersion;
+
+  useEffect(() => {
+    api
+      .getGraphAllVersions(flow.graph_id)
+      .then((result) => setFlowVersions(result));
+  }, [flow.graph_id, api]);
+
+  const openRunDialog = () => setIsRunDialogOpen(true);
+
+  const runOrOpenInput = () => {
+    if (hasInputs || hasCredentialsInputs) {
+      openRunDialog();
+    } else {
+      saveAndRun({}, {});
+    }
+  };
+
+  return (
+    <Card {...props}>
+      <CardHeader className="">
+        <CardTitle>
+          {flow.name} <span className="font-light">v{flow.graph_version}</span>
+        </CardTitle>
+        <div className="flex flex-col space-y-2 py-6">
+          {(flowVersions?.length ?? 0) > 1 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline">
+                  <ClockIcon className="mr-2" />
+                  {selectedVersion == "all"
+                    ? "All versions"
+                    : `Version ${selectedVersion}`}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56">
+                <DropdownMenuLabel>Choose a version</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuRadioGroup
+                  value={String(selectedVersion)}
+                  onValueChange={(choice: string) =>
+                    setSelectedFlowVersion(
+                      choice == "all" ? choice : Number(choice),
+                    )
+                  }
+                >
+                  <DropdownMenuRadioItem value="all">
+                    All versions
+                  </DropdownMenuRadioItem>
+                  {flowVersions?.map((v) => (
+                    <DropdownMenuRadioItem
+                      key={v.version}
+                      value={v.version.toString()}
+                    >
+                      Version {v.version}
+                      {v.is_active ? " (active)" : ""}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {flow.can_access_graph && (
+            <Link
+              className={buttonVariants({ variant: "default" })}
+              href={`/build?flowID=${flow.graph_id}&flowVersion=${flow.graph_version}`}
+            >
+              <Pencil2Icon className="mr-2" />
+              Open in Builder
+            </Link>
+          )}
+          {flow.can_access_graph && (
+            <Button
+              variant="outline"
+              className="px-2.5"
+              title="Export to a JSON-file"
+              data-testid="export-button"
+              onClick={() =>
+                api
+                  .getGraph(flow.graph_id, selectedFlowVersion!.version, true)
+                  .then((graph) =>
+                    exportAsJSONFile(
+                      graph,
+                      `${flow.name}_v${selectedFlowVersion!.version}.json`,
+                    ),
+                  )
+              }
+            >
+              <ExitIcon className="mr-2" /> Export
+            </Button>
+          )}
+          <Button
+            variant="secondary"
+            className="bg-purple-500 text-white hover:bg-purple-700"
+            onClick={!isRunning ? runOrOpenInput : stopRun}
+            disabled={isDisabled}
+            title={!isRunning ? "Run Agent" : "Stop Agent"}
+          >
+            <PlayIcon className="mr-2" />
+            {isRunning ? "Stop Agent" : "Run Agent"}
+          </Button>
+          {flow.can_access_graph && (
+            <Button
+              variant="destructive"
+              onClick={() => setIsDeleteModalOpen(true)}
+              data-testid="delete-button"
+            >
+              <TrashIcon className="mr-2" />
+              Delete Agent
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <FlowRunsStatus
+          flows={[flow]}
+          executions={executions.filter(
+            (execution) =>
+              execution.graph_id == flow.graph_id &&
+              (selectedVersion == "all" ||
+                execution.graph_version == selectedVersion),
+          )}
+        />
+      </CardContent>
+      <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Agent</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete this agent? <br />
+              This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDeleteModalOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                api.deleteLibraryAgent(flow.id).then(() => {
+                  setIsDeleteModalOpen(false);
+                  refresh();
+                });
+              }}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {savedAgent && (
+        <RunnerInputDialog
+          isOpen={isRunDialogOpen}
+          doClose={() => setIsRunDialogOpen(false)}
+          graph={savedAgent}
+          doRun={saveAndRun}
+        />
+      )}
+    </Card>
+  );
+};
+export default FlowInfo;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+import Link from "next/link";
+import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
+import { IconSquare } from "@/components/__legacy__/ui/icons";
+import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
+import { format } from "date-fns";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import RunnerOutputUI, {
+  OutputNodeInfo,
+} from "../../build/components/legacy-builder/RunnerOutputUI";
+
+export const FlowRunInfo: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & {
+    agent: LibraryAgent;
+    execution: GraphExecutionMeta;
+  }
+> = ({ agent, execution, ...props }) => {
+  const [isOutputOpen, setIsOutputOpen] = useState(false);
+  const [blockOutputs, setBlockOutputs] = useState<OutputNodeInfo[]>([]);
+  const api = useBackendAPI();
+
+  const fetchBlockResults = useCallback(async () => {
+    const graph = await api.getGraph(agent.graph_id, agent.graph_version);
+    const graphExecution = await api.getGraphExecutionInfo(
+      agent.graph_id,
+      execution.id,
+    );
+
+    // Transform results to BlockOutput format
+    setBlockOutputs(
+      Object.entries(graphExecution.outputs).flatMap(([key, values]) =>
+        values.map(
+          (value) =>
+            ({
+              metadata: {
+                name: graph.output_schema.properties[key].title || "Output",
+                description:
+                  graph.output_schema.properties[key].description ||
+                  "Output from the agent",
+              },
+              result: value,
+            }) satisfies OutputNodeInfo,
+        ),
+      ),
+    );
+  }, [api, agent.graph_id, agent.graph_version, execution.id]);
+
+  // Fetch graph and execution data
+  useEffect(() => {
+    if (!isOutputOpen) return;
+    fetchBlockResults();
+  }, [isOutputOpen, fetchBlockResults]);
+
+  if (execution.graph_id != agent.graph_id) {
+    throw new Error(
+      `FlowRunInfo can't be used with non-matching execution.graph_id and flow.id`,
+    );
+  }
+
+  const handleStopRun = useCallback(() => {
+    api.stopGraphExecution(agent.graph_id, execution.id);
+  }, [api, agent.graph_id, execution.id]);
+
+  return (
+    <>
+      <Card {...props}>
+        <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
+          <div>
+            <CardTitle>
+              {agent.name}{" "}
+              <span className="font-light">v{execution.graph_version}</span>
+            </CardTitle>
+          </div>
+          <div className="flex space-x-2">
+            {execution.status === "RUNNING" && (
+              <Button onClick={handleStopRun} variant="destructive">
+                <IconSquare className="mr-2" /> Stop Run
+              </Button>
+            )}
+            <Button onClick={() => setIsOutputOpen(true)} variant="outline">
+              <ExitIcon className="mr-2" /> View Outputs
+            </Button>
+            {agent.can_access_graph && (
+              <Link
+                className={buttonVariants({ variant: "default" })}
+                href={`/build?flowID=${execution.graph_id}&flowVersion=${execution.graph_version}&flowExecutionID=${execution.id}`}
+              >
+                <Pencil2Icon className="mr-2" /> Open in Builder
+              </Link>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="hidden">
+            <strong>Agent ID:</strong> <code>{agent.graph_id}</code>
+          </p>
+          <p className="hidden">
+            <strong>Run ID:</strong> <code>{execution.id}</code>
+          </p>
+          <div>
+            <strong>Status:</strong>{" "}
+            <FlowRunStatusBadge status={execution.status} />
+          </div>
+          <p>
+            <strong>Started:</strong>{" "}
+            {execution.started_at
+              ? format(execution.started_at, "yyyy-MM-dd HH:mm:ss")
+              : "—"}
+          </p>
+          <p>
+            <strong>Finished:</strong>{" "}
+            {execution.ended_at
+              ? format(execution.ended_at, "yyyy-MM-dd HH:mm:ss")
+              : "—"}
+          </p>
+          {execution.stats && (
+            <p>
+              <strong>Duration (run time):</strong>{" "}
+              {execution.stats.duration.toFixed(1)} (
+              {execution.stats.node_exec_time.toFixed(1)}) seconds
+            </p>
+          )}
+        </CardContent>
+      </Card>
+      <RunnerOutputUI
+        isOpen={isOutputOpen}
+        doClose={() => setIsOutputOpen(false)}
+        outputs={blockOutputs}
+      />
+    </>
+  );
+};
+
+export default FlowRunInfo;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunStatusBadge.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Badge } from "@/components/__legacy__/ui/badge";
+import { cn } from "@/lib/utils";
+import { GraphExecutionMeta } from "@/lib/autogpt-server-api";
+
+export const FlowRunStatusBadge: React.FC<{
+  status: GraphExecutionMeta["status"];
+  className?: string;
+}> = ({ status, className }) => (
+  <Badge
+    variant="default"
+    className={cn(
+      status === "RUNNING"
+        ? "bg-blue-500 dark:bg-blue-700"
+        : status === "QUEUED"
+          ? "bg-yellow-500 dark:bg-yellow-600"
+          : status === "COMPLETED"
+            ? "bg-green-500 dark:bg-green-600"
+            : "bg-red-500 dark:bg-red-700",
+      className,
+    )}
+  >
+    {status}
+  </Badge>
+);

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/__legacy__/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/__legacy__/ui/table";
+import { format } from "date-fns";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+import { TextRenderer } from "../../../../components/__legacy__/ui/render";
+
+export const FlowRunsList: React.FC<{
+  flows: LibraryAgent[];
+  executions: GraphExecutionMeta[];
+  className?: string;
+  selectedRun?: GraphExecutionMeta | null;
+  onSelectRun: (r: GraphExecutionMeta) => void;
+}> = ({ flows, executions, selectedRun, onSelectRun, className }) => (
+  <Card className={className}>
+    <CardHeader>
+      <CardTitle>Runs</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Agent</TableHead>
+            <TableHead>Started</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Duration</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody data-testid="flow-runs-list-body">
+          {executions.map((execution) => (
+            <TableRow
+              key={execution.id}
+              data-testid={`flow-run-${execution.id}-graph-${execution.graph_id}`}
+              data-runid={execution.id}
+              data-graphid={execution.graph_id}
+              className="cursor-pointer"
+              onClick={() => onSelectRun(execution)}
+              data-state={selectedRun?.id == execution.id ? "selected" : null}
+            >
+              <TableCell>
+                <TextRenderer
+                  value={
+                    flows.find((f) => f.graph_id == execution.graph_id)?.name
+                  }
+                  truncateLengthLimit={30}
+                />
+              </TableCell>
+              <TableCell>
+                {execution.started_at
+                  ? format(execution.started_at, "HH:mm")
+                  : "—"}
+              </TableCell>
+              <TableCell>
+                <FlowRunStatusBadge
+                  status={execution.status}
+                  className="w-full justify-center"
+                />
+              </TableCell>
+              <TableCell>
+                {execution.stats
+                  ? formatDuration(execution.stats.duration)
+                  : ""}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </CardContent>
+  </Card>
+);
+
+function formatDuration(seconds: number): string {
+  return (
+    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
+    "s"
+  );
+}
+
+export default FlowRunsList;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsStatus.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import { CardTitle } from "@/components/__legacy__/ui/card";
+import { Button } from "@/components/__legacy__/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/__legacy__/ui/popover";
+import { Calendar } from "@/components/__legacy__/ui/calendar";
+import { FlowRunsTimeline } from "@/app/(platform)/monitoring/components/FlowRunsTimeline";
+
+export const FlowRunsStatus: React.FC<{
+  flows: LibraryAgent[];
+  executions: GraphExecutionMeta[];
+  title?: string;
+  className?: string;
+}> = ({ flows, executions: executions, title, className }) => {
+  /* "dateMin": since the first flow in the dataset
+   * number > 0: custom date (unix timestamp)
+   * number < 0: offset relative to Date.now() (in seconds) */
+  const [selected, setSelected] = useState<Date>();
+  const [statsSince, setStatsSince] = useState<number | "dataMin">(-24 * 3600);
+  const statsSinceTimestamp = // unix timestamp or null
+    typeof statsSince == "string"
+      ? null
+      : statsSince < 0
+        ? Date.now() + statsSince * 1000
+        : statsSince;
+  const filteredFlowRuns =
+    statsSinceTimestamp != null
+      ? executions.filter(
+          (fr) =>
+            fr.started_at && fr.started_at.getTime() > statsSinceTimestamp,
+        )
+      : executions;
+
+  return (
+    <div className={className}>
+      <div className="flex flex-row items-center justify-between">
+        <CardTitle>{title || "Stats"}</CardTitle>
+        <div className="flex flex-wrap space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince(-2 * 3600)}
+          >
+            2h
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince(-8 * 3600)}
+          >
+            8h
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince(-24 * 3600)}
+          >
+            24h
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince(-7 * 24 * 3600)}
+          >
+            7d
+          </Button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant={"outline"} size="sm">
+                Custom
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={selected}
+                onSelect={(_, selectedDay) => {
+                  setSelected(selectedDay);
+                  setStatsSince(selectedDay.getTime());
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince("dataMin")}
+          >
+            All
+          </Button>
+        </div>
+      </div>
+      <FlowRunsTimeline
+        flows={flows}
+        executions={executions}
+        dataMin={statsSince}
+        className="mt-3"
+      />
+      <hr className="my-4" />
+      <div>
+        <p>
+          <strong>Total runs:</strong> {filteredFlowRuns.length}
+        </p>
+        <p>
+          <strong>Total run time:</strong>{" "}
+          {filteredFlowRuns.reduce(
+            (total, run) => total + (run.stats?.node_exec_time ?? 0),
+            0,
+          )}{" "}
+          seconds
+        </p>
+        {filteredFlowRuns.some((r) => r.stats) && (
+          <p>
+            <strong>Total cost:</strong> $
+            {(
+              filteredFlowRuns.reduce(
+                (total, run) => total + (run.stats?.cost ?? 0),
+                0,
+              ) / 100
+            ).toFixed(2)}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+export default FlowRunsStatus;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx

@@ -0,0 +1,189 @@
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import {
+  ComposedChart,
+  DefaultLegendContentProps,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Scatter,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { differenceInHours, format } from "date-fns";
+import { Card } from "@/components/__legacy__/ui/card";
+import { cn, hashString } from "@/lib/utils";
+import React from "react";
+import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
+
+export const FlowRunsTimeline = ({
+  flows,
+  executions,
+  dataMin,
+  className,
+}: {
+  flows: LibraryAgent[];
+  executions: GraphExecutionMeta[];
+  dataMin: "dataMin" | number;
+  className?: string;
+}) => (
+  /* TODO: make logarithmic? */
+  <ResponsiveContainer width="100%" height={120} className={className}>
+    <ComposedChart>
+      <XAxis
+        dataKey="time"
+        type="number"
+        domain={[
+          typeof dataMin == "string"
+            ? dataMin
+            : dataMin < 0
+              ? Date.now() + dataMin * 1000
+              : dataMin,
+          Date.now(),
+        ]}
+        allowDataOverflow={true}
+        tickFormatter={(unixTime) => {
+          const now = new Date();
+          const time = new Date(unixTime);
+          return differenceInHours(now, time) < 24
+            ? format(time, "HH:mm")
+            : format(time, "yyyy-MM-dd HH:mm");
+        }}
+        name="Time"
+        scale="time"
+      />
+      <YAxis
+        dataKey="_duration"
+        name="Duration (s)"
+        tickFormatter={(s) => (s > 90 ? `${Math.round(s / 60)}m` : `${s}s`)}
+      />
+      <Tooltip
+        content={({ payload }) => {
+          if (payload && payload.length) {
+            const data: GraphExecutionMeta & {
+              time: number;
+              _duration: number;
+            } = payload[0].payload;
+            const flow = flows.find((f) => f.graph_id === data.graph_id);
+            return (
+              <Card className="p-2 text-xs leading-normal">
+                <p>
+                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
+                </p>
+                <div>
+                  <strong>Status:</strong>&nbsp;
+                  <FlowRunStatusBadge
+                    status={data.status}
+                    className="px-1.5 py-0"
+                  />
+                </div>
+                <p>
+                  <strong>Started:</strong>{" "}
+                  {data.started_at
+                    ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
+                    : "—"}
+                </p>
+                {data.stats && (
+                  <p>
+                    <strong>Duration / run time:</strong>{" "}
+                    {formatDuration(data.stats.duration)} /{" "}
+                    {formatDuration(data.stats.node_exec_time)}
+                  </p>
+                )}
+              </Card>
+            );
+          }
+          return null;
+        }}
+      />
+      {flows.map((flow) => (
+        <Scatter
+          key={flow.id}
+          data={executions
+            .filter((e) => e.graph_id == flow.graph_id && e.started_at)
+            .map((e) => ({
+              ...e,
+              time:
+                (e.started_at?.getTime() ?? 0) +
+                (e.stats?.node_exec_time ?? 0) * 1000,
+              _duration: e.stats?.node_exec_time ?? 0,
+            }))}
+          name={flow.name}
+          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
+        />
+      ))}
+      {executions
+        .filter((e) => e.started_at && e.ended_at)
+        .map((execution) => (
+          <Line
+            key={execution.id}
+            type="linear"
+            dataKey="_duration"
+            data={[
+              {
+                ...execution,
+                time: execution.started_at!.getTime(),
+                _duration: 0,
+              },
+              {
+                ...execution,
+                time: execution.ended_at!.getTime(),
+                _duration: execution.stats?.node_exec_time ?? 0,
+              },
+            ]}
+            stroke={`hsl(${(hashString(execution.graph_id) * 137.5) % 360}, 70%, 50%)`}
+            strokeWidth={2}
+            dot={false}
+            legendType="none"
+          />
+        ))}
+      <Legend
+        content={<ScrollableLegend />}
+        wrapperStyle={{
+          bottom: 0,
+          left: 0,
+          right: 0,
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      />
+    </ComposedChart>
+  </ResponsiveContainer>
+);
+
+export default FlowRunsTimeline;
+
+const ScrollableLegend: React.FC<
+  DefaultLegendContentProps & { className?: string }
+> = ({ payload, className }) => {
+  return (
+    <div
+      className={cn(
+        "space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
+        className,
+      )}
+      style={{ scrollbarWidth: "none" }}
+    >
+      {payload?.map((entry, index) => {
+        if (entry.type == "none") return;
+        return (
+          <span key={`item-${index}`} className="inline-flex items-center">
+            <span
+              className="mr-1 inline-block size-2.5 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span>{entry.value}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+function formatDuration(seconds: number): string {
+  return (
+    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
+    "s"
+  );
+}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/SchedulesTable.tsx

@@ -0,0 +1,285 @@
+import { LibraryAgent } from "@/lib/autogpt-server-api";
+import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import { Button } from "@/components/__legacy__/ui/button";
+import { Card } from "@/components/__legacy__/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/__legacy__/ui/table";
+import { Badge } from "@/components/__legacy__/ui/badge";
+import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
+import { ClockIcon, Loader2 } from "lucide-react";
+import { useToast } from "@/components/molecules/Toast/use-toast";
+import { humanizeCronExpression } from "@/lib/cron-expression-utils";
+import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
+import {
+  formatScheduleTime,
+  getTimezoneAbbreviation,
+} from "@/lib/timezone-utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/__legacy__/ui/select";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/__legacy__/ui/dialog";
+import { TextRenderer } from "../../../../components/__legacy__/ui/render";
+import { Input } from "../../../../components/__legacy__/ui/input";
+import { Label } from "../../../../components/__legacy__/ui/label";
+
+interface SchedulesTableProps {
+  schedules: GraphExecutionJobInfo[];
+  agents: LibraryAgent[];
+  onRemoveSchedule: (scheduleId: string, enabled: boolean) => void;
+  sortColumn: keyof GraphExecutionJobInfo;
+  sortDirection: "asc" | "desc";
+  onSort: (column: keyof GraphExecutionJobInfo) => void;
+}
+
+export const SchedulesTable = ({
+  schedules,
+  agents,
+  onRemoveSchedule,
+  sortColumn,
+  sortDirection,
+  onSort,
+}: SchedulesTableProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+  const [selectedAgent, setSelectedAgent] = useState<string>(""); // Library Agent ID
+  const [selectedVersion, setSelectedVersion] = useState<number>(0); // Graph version
+  const [maxVersion, setMaxVersion] = useState<number>(0);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedFilter, setSelectedFilter] = useState<string>(""); // Graph ID
+
+  // Get user's timezone for displaying schedule times
+  const userTimezone = useUserTimezone() ?? "UTC";
+
+  const filteredAndSortedSchedules = [...schedules]
+    .filter(
+      (schedule) => !selectedFilter || schedule.graph_id === selectedFilter,
+    )
+    .sort((a, b) => {
+      const aValue = a[sortColumn];
+      const bValue = b[sortColumn];
+      if (sortDirection === "asc") {
+        return String(aValue).localeCompare(String(bValue));
+      }
+      return String(bValue).localeCompare(String(aValue));
+    });
+
+  const handleToggleSchedule = (scheduleId: string, enabled: boolean) => {
+    onRemoveSchedule(scheduleId, enabled);
+    if (!enabled) {
+      toast({
+        title: "Schedule Disabled",
+        description: "The schedule has been successfully disabled.",
+      });
+    }
+  };
+
+  const handleNewSchedule = () => {
+    setIsDialogOpen(true);
+  };
+
+  const handleAgentSelect = (agentId: string) => {
+    setSelectedAgent(agentId);
+    const agent = agents.find((a) => a.id === agentId);
+    setMaxVersion(agent!.graph_version);
+    setSelectedVersion(agent!.graph_version);
+  };
+
+  const handleVersionSelect = (version: string) => {
+    setSelectedVersion(parseInt(version));
+  };
+
+  const handleSchedule = async () => {
+    if (!selectedAgent || !selectedVersion) {
+      toast({
+        title: "Invalid Input",
+        description: "Please select an agent and a version.",
+        variant: "destructive",
+      });
+      return;
+    }
+    if (selectedVersion < 1 || selectedVersion > maxVersion) {
+      toast({
+        title: "Invalid Version",
+        description: `Please select a version between 1 and ${maxVersion}.`,
+        variant: "destructive",
+      });
+      return;
+    }
+    setIsLoading(true);
+    const agent = agents.find((a) => a.id == selectedAgent)!;
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      router.push(
+        `/build?flowID=${agent.graph_id}&flowVersion=${agent.graph_version}&open_scheduling=true`,
+      );
+    } catch (error) {
+      console.error("Navigation error:", error);
+    }
+  };
+
+  return (
+    <Card className="h-fit p-4">
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Select Agent for New Schedule</DialogTitle>
+          </DialogHeader>
+          <Select onValueChange={handleAgentSelect}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select an agent" />
+            </SelectTrigger>
+            <SelectContent>
+              {agents.map((agent, i) => (
+                <SelectItem key={agent.id + i} value={agent.id}>
+                  <TextRenderer value={agent.name} truncateLengthLimit={30} />
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Label className="mt-4">
+            Select version between 1 and {maxVersion}
+          </Label>
+          <Input
+            type="number"
+            min={1}
+            max={selectedAgent ? maxVersion : 0}
+            value={selectedVersion}
+            onChange={(e) => handleVersionSelect(e.target.value)}
+            placeholder="Select version"
+            className="w-full"
+          />
+          <Button
+            onClick={handleSchedule}
+            disabled={isLoading || !selectedAgent}
+            className="mt-4"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Loading...
+              </>
+            ) : (
+              "Schedule"
+            )}
+          </Button>
+        </DialogContent>
+      </Dialog>
+
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Schedules</h3>
+        <div className="flex flex-wrap gap-2">
+          <Select onValueChange={setSelectedFilter}>
+            <SelectTrigger className="h-8 w-[180px] rounded-md px-3 text-xs">
+              <SelectValue placeholder="Filter by graph" />
+            </SelectTrigger>
+            <SelectContent className="text-xs">
+              {agents.map((agent) => (
+                <SelectItem key={agent.id} value={agent.graph_id}>
+                  {agent.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button size="sm" variant="outline" onClick={handleNewSchedule}>
+            <ClockIcon className="mr-2 h-4 w-4" />
+            New Schedule
+          </Button>
+        </div>
+      </div>
+      <ScrollArea className="max-h-[400px]">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead
+                onClick={() => onSort("graph_id")}
+                className="cursor-pointer"
+              >
+                Graph Name
+              </TableHead>
+              <TableHead className="cursor-pointer">Graph Version</TableHead>
+              <TableHead
+                onClick={() => onSort("next_run_time")}
+                className="cursor-pointer"
+              >
+                Next Execution
+              </TableHead>
+              <TableHead
+                onClick={() => onSort("cron")}
+                className="cursor-pointer"
+              >
+                Schedule
+              </TableHead>
+              <TableHead>Timezone</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredAndSortedSchedules.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="py-8 text-center text-lg text-gray-400"
+                >
+                  No schedules are available
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredAndSortedSchedules.map((schedule) => (
+                <TableRow key={schedule.id}>
+                  <TableCell className="font-medium">
+                    {agents.find((a) => a.graph_id === schedule.graph_id)
+                      ?.name || schedule.graph_id}
+                  </TableCell>
+                  <TableCell>{schedule.graph_version}</TableCell>
+                  <TableCell>
+                    {formatScheduleTime(schedule.next_run_time, userTimezone)}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="secondary">
+                      {humanizeCronExpression(schedule.cron)}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground">
+                      {schedule.timezone
+                        ? getTimezoneAbbreviation(schedule.timezone)
+                        : userTimezone && getTimezoneAbbreviation(userTimezone)}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex space-x-2">
+                      <Button
+                        variant={"destructive"}
+                        onClick={() => handleToggleSchedule(schedule.id, false)}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </ScrollArea>
+    </Card>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/AgentFlowListSkeleton.tsx

@@ -0,0 +1,24 @@
+export default function AgentsFlowListSkeleton() {
+  return (
+    <div className="mx-auto max-w-4xl p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Agents</h1>
+        <div className="h-10 w-24 animate-pulse rounded bg-gray-200"></div>
+      </div>
+      <div className="rounded-lg bg-white p-4 shadow">
+        <div className="mb-4 grid grid-cols-3 gap-4 font-medium text-gray-500">
+          <div>Name</div>
+          <div># of runs</div>
+          <div>Last run</div>
+        </div>
+        {[...Array(3)].map((_, index) => (
+          <div key={index} className="mb-4 grid grid-cols-3 gap-4">
+            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
+            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
+            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/FlowRunsListSkeleton.tsx

@@ -0,0 +1,23 @@
+export default function FlowRunsListSkeleton() {
+  return (
+    <div className="mx-auto max-w-4xl p-4">
+      <div className="rounded-lg bg-white p-4 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Runs</h2>
+        <div className="mb-4 grid grid-cols-4 gap-4 text-sm font-medium text-gray-500">
+          <div>Agent</div>
+          <div>Started</div>
+          <div>Status</div>
+          <div>Duration</div>
+        </div>
+        {[...Array(4)].map((_, index) => (
+          <div key={index} className="mb-4 grid grid-cols-4 gap-4">
+            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
+            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
+            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
+            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/FlowRunsStatusSkeleton.tsx

@@ -0,0 +1,28 @@
+export default function FlowRunsStatusSkeleton() {
+  return (
+    <div className="mx-auto max-w-4xl p-4">
+      <div className="rounded-lg bg-white p-4 shadow">
+        <div className="mb-6 flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Stats</h2>
+          <div className="flex space-x-2">
+            {["2h", "8h", "24h", "7d", "Custom", "All"].map((btn) => (
+              <div
+                key={btn}
+                className="h-8 w-16 animate-pulse rounded bg-gray-200"
+              ></div>
+            ))}
+          </div>
+        </div>
+
+        {/* Placeholder for the line chart */}
+        <div className="mb-6 h-64 w-full animate-pulse rounded bg-gray-200"></div>
+
+        {/* Placeholders for total runs and total run time */}
+        <div className="space-y-2">
+          <div className="h-6 w-1/3 animate-pulse rounded bg-gray-200"></div>
+          <div className="h-6 w-1/2 animate-pulse rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/monitoring/loading.tsx

@@ -0,0 +1,21 @@
+import AgentFlowListSkeleton from "@/app/(platform)/monitoring/components/skeletons/AgentFlowListSkeleton";
+import React from "react";
+import FlowRunsListSkeleton from "@/app/(platform)/monitoring/components/skeletons/FlowRunsListSkeleton";
+import FlowRunsStatusSkeleton from "@/app/(platform)/monitoring/components/skeletons/FlowRunsStatusSkeleton";
+
+export default function MonitorLoadingSkeleton() {
+  return (
+    <div className="space-y-4 p-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {/* Agents Section */}
+        <AgentFlowListSkeleton />
+
+        {/* Runs Section */}
+        <FlowRunsListSkeleton />
+
+        {/* Stats Section */}
+        <FlowRunsStatusSkeleton />
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/monitoring/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+import React, { useCallback, useEffect, useState } from "react";
+
+import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
+import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
+import {
+  useGetV1ListExecutionSchedulesForAUser,
+  useDeleteV1DeleteExecutionSchedule,
+} from "@/app/api/__generated__/endpoints/schedules/schedules";
+import { okData } from "@/app/api/helpers";
+
+import { Card } from "@/components/__legacy__/ui/card";
+import { SchedulesTable } from "@/app/(platform)/monitoring/components/SchedulesTable";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import AgentFlowList from "./components/AgentFlowList";
+import FlowRunsList from "./components/FlowRunsList";
+import FlowRunInfo from "./components/FlowRunInfo";
+import FlowInfo from "./components/FlowInfo";
+import FlowRunsStatus from "./components/FlowRunsStatus";
+
+const Monitor = () => {
+  const [flows, setFlows] = useState<LibraryAgent[]>([]);
+  const [executions, setExecutions] = useState<GraphExecutionMeta[]>([]);
+  const [selectedFlow, setSelectedFlow] = useState<LibraryAgent | null>(null);
+  const [selectedRun, setSelectedRun] = useState<GraphExecutionMeta | null>(
+    null,
+  );
+  const [sortColumn, setSortColumn] =
+    useState<keyof GraphExecutionJobInfo>("id");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
+  const api = useBackendAPI();
+
+  // Use generated API hooks for schedules
+  const { data: schedulesResponse, refetch: refetchSchedules } =
+    useGetV1ListExecutionSchedulesForAUser();
+  const deleteScheduleMutation = useDeleteV1DeleteExecutionSchedule();
+
+  const schedules = okData(schedulesResponse) ?? [];
+
+  const removeSchedule = useCallback(
+    async (scheduleId: string) => {
+      await deleteScheduleMutation.mutateAsync({ scheduleId });
+      refetchSchedules();
+    },
+    [deleteScheduleMutation, refetchSchedules],
+  );
+
+  const fetchAgents = useCallback(() => {
+    api.listLibraryAgents().then((response) => {
+      setFlows(response.agents);
+    });
+    api.getExecutions().then((executions) => {
+      setExecutions(executions);
+    });
+  }, [api]);
+
+  useEffect(() => {
+    fetchAgents();
+  }, [fetchAgents]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => fetchAgents(), 5000);
+    return () => clearInterval(intervalId);
+  }, [fetchAgents, flows]);
+
+  const column1 = "md:col-span-2 xl:col-span-3 xxl:col-span-2";
+  const column2 = "md:col-span-3 lg:col-span-2 xl:col-span-3";
+  const column3 = "col-span-full xl:col-span-4 xxl:col-span-5";
+
+  const handleSort = (column: keyof GraphExecutionJobInfo) => {
+    if (sortColumn === column) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  };
+
+  return (
+    <div
+      className="grid grid-cols-1 gap-4 p-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
+      data-testid="monitor-page"
+    >
+      <AgentFlowList
+        className={column1}
+        flows={flows}
+        executions={executions}
+        selectedFlow={selectedFlow}
+        onSelectFlow={(f) => {
+          setSelectedRun(null);
+          setSelectedFlow(f.id == selectedFlow?.id ? null : f);
+        }}
+      />
+      <FlowRunsList
+        className={column2}
+        flows={flows}
+        executions={[
+          ...(selectedFlow
+            ? executions.filter((v) => v.graph_id == selectedFlow.graph_id)
+            : executions),
+        ].sort((a, b) => {
+          const aTime = a.started_at?.getTime() ?? 0;
+          const bTime = b.started_at?.getTime() ?? 0;
+          return bTime - aTime;
+        })}
+        selectedRun={selectedRun}
+        onSelectRun={(r) => setSelectedRun(r.id == selectedRun?.id ? null : r)}
+      />
+      {(selectedRun && (
+        <FlowRunInfo
+          agent={
+            selectedFlow ||
+            flows.find((f) => f.graph_id == selectedRun.graph_id)!
+          }
+          execution={selectedRun}
+          className={column3}
+        />
+      )) ||
+        (selectedFlow && (
+          <FlowInfo
+            flow={selectedFlow}
+            executions={executions.filter(
+              (e) => e.graph_id == selectedFlow.graph_id,
+            )}
+            className={column3}
+            refresh={() => {
+              fetchAgents();
+              setSelectedFlow(null);
+              setSelectedRun(null);
+            }}
+          />
+        )) || (
+          <Card className={`p-6 ${column3}`}>
+            <FlowRunsStatus flows={flows} executions={executions} />
+          </Card>
+        )}
+      <div className="col-span-full xl:col-span-6">
+        <SchedulesTable
+          schedules={schedules} // all schedules
+          agents={flows} // for filtering purpose
+          onRemoveSchedule={removeSchedule}
+          sortColumn={sortColumn}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Monitor;

autogpt_platform/frontend/src/app/api/openapi.json

@@ -4268,6 +4268,128 @@
         }
       }
     },
+    "/api/mcp/discover-tools": {
+      "post": {
+        "tags": ["v2", "mcp", "mcp"],
+        "summary": "Discover available tools on an MCP server",
+        "description": "Connect to an MCP server and return its available tools.\n\nIf the user has a stored MCP credential for this server URL, it will be\nused automatically — no need to pass an explicit auth token.",
+        "operationId": "postV2Discover available tools on an mcp server",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": { "$ref": "#/components/schemas/DiscoverToolsRequest" }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/DiscoverToolsResponse"
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        },
+        "security": [{ "HTTPBearerJWT": [] }]
+      }
+    },
+    "/api/mcp/oauth/callback": {
+      "post": {
+        "tags": ["v2", "mcp", "mcp"],
+        "summary": "Exchange OAuth code for MCP tokens",
+        "description": "Exchange the authorization code for tokens and store the credential.\n\nThe frontend calls this after receiving the OAuth code from the popup.\nOn success, subsequent ``/discover-tools`` calls for the same server URL\nwill automatically use the stored credential.",
+        "operationId": "postV2Exchange oauth code for mcp tokens",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/MCPOAuthCallbackRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/CredentialsMetaResponse"
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        },
+        "security": [{ "HTTPBearerJWT": [] }]
+      }
+    },
+    "/api/mcp/oauth/login": {
+      "post": {
+        "tags": ["v2", "mcp", "mcp"],
+        "summary": "Initiate OAuth login for an MCP server",
+        "description": "Discover OAuth metadata from the MCP server and return a login URL.\n\n1. Discovers the protected-resource metadata (RFC 9728)\n2. Fetches the authorization server metadata (RFC 8414)\n3. Performs Dynamic Client Registration (RFC 7591) if available\n4. Returns the authorization URL for the frontend to open in a popup",
+        "operationId": "postV2Initiate oauth login for an mcp server",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": { "$ref": "#/components/schemas/MCPOAuthLoginRequest" }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/MCPOAuthLoginResponse"
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        },
+        "security": [{ "HTTPBearerJWT": [] }]
+      }
+    },
     "/api/oauth/app/{client_id}": {
       "get": {
         "tags": ["oauth"],
@@ -7643,7 +7765,7 @@
           "host": {
             "anyOf": [{ "type": "string" }, { "type": "null" }],
             "title": "Host",
-            "description": "Host pattern for host-scoped credentials"
+            "description": "Host pattern for host-scoped or MCP server URL for MCP credentials"
           }
         },
         "type": "object",
@@ -7663,6 +7785,45 @@
         "required": ["version_counts"],
         "title": "DeleteGraphResponse"
       },
+      "DiscoverToolsRequest": {
+        "properties": {
+          "server_url": {
+            "type": "string",
+            "title": "Server Url",
+            "description": "URL of the MCP server"
+          },
+          "auth_token": {
+            "anyOf": [{ "type": "string" }, { "type": "null" }],
+            "title": "Auth Token",
+            "description": "Optional Bearer token for authenticated MCP servers"
+          }
+        },
+        "type": "object",
+        "required": ["server_url"],
+        "title": "DiscoverToolsRequest",
+        "description": "Request to discover tools on an MCP server."
+      },
+      "DiscoverToolsResponse": {
+        "properties": {
+          "tools": {
+            "items": { "$ref": "#/components/schemas/MCPToolResponse" },
+            "type": "array",
+            "title": "Tools"
+          },
+          "server_name": {
+            "anyOf": [{ "type": "string" }, { "type": "null" }],
+            "title": "Server Name"
+          },
+          "protocol_version": {
+            "anyOf": [{ "type": "string" }, { "type": "null" }],
+            "title": "Protocol Version"
+          }
+        },
+        "type": "object",
+        "required": ["tools"],
+        "title": "DiscoverToolsResponse",
+        "description": "Response containing the list of tools available on an MCP server."
+      },
       "DocPageResponse": {
         "properties": {
           "type": {
@@ -9239,6 +9400,62 @@
         "required": ["login_url", "state_token"],
         "title": "LoginResponse"
       },
+      "MCPOAuthCallbackRequest": {
+        "properties": {
+          "code": {
+            "type": "string",
+            "title": "Code",
+            "description": "Authorization code from OAuth callback"
+          },
+          "state_token": {
+            "type": "string",
+            "title": "State Token",
+            "description": "State token for CSRF verification"
+          }
+        },
+        "type": "object",
+        "required": ["code", "state_token"],
+        "title": "MCPOAuthCallbackRequest",
+        "description": "Request to exchange an OAuth code for tokens."
+      },
+      "MCPOAuthLoginRequest": {
+        "properties": {
+          "server_url": {
+            "type": "string",
+            "title": "Server Url",
+            "description": "URL of the MCP server that requires OAuth"
+          }
+        },
+        "type": "object",
+        "required": ["server_url"],
+        "title": "MCPOAuthLoginRequest",
+        "description": "Request to start an OAuth flow for an MCP server."
+      },
+      "MCPOAuthLoginResponse": {
+        "properties": {
+          "login_url": { "type": "string", "title": "Login Url" },
+          "state_token": { "type": "string", "title": "State Token" }
+        },
+        "type": "object",
+        "required": ["login_url", "state_token"],
+        "title": "MCPOAuthLoginResponse",
+        "description": "Response with the OAuth login URL for the user to authenticate."
+      },
+      "MCPToolResponse": {
+        "properties": {
+          "name": { "type": "string", "title": "Name" },
+          "description": { "type": "string", "title": "Description" },
+          "input_schema": {
+            "additionalProperties": true,
+            "type": "object",
+            "title": "Input Schema"
+          }
+        },
+        "type": "object",
+        "required": ["name", "description", "input_schema"],
+        "title": "MCPToolResponse",
+        "description": "A single MCP tool returned by discovery."
+      },
       "MarketplaceListing": {
         "properties": {
           "id": { "type": "string", "title": "Id" },

autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsx

@@ -86,7 +86,7 @@ export function CredentialsInput({
     handleCredentialSelect,
   } = hookData;
 
-  const displayName = toDisplayName(provider);
+  const displayName = (schema as any).display_name || toDisplayName(provider);
   const selectedCredentialIsSystem =
     selectedCredential && isSystemCredential(selectedCredential);
 

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx

@@ -38,13 +38,8 @@ export function CredentialsGroupedView({
   const allProviders = useContext(CredentialsProvidersContext);
 
   const { userCredentialFields, systemCredentialFields } = useMemo(
-    () =>
-      splitCredentialFieldsBySystem(
-        credentialFields,
-        allProviders,
-        inputCredentials,
-      ),
-    [credentialFields, allProviders, inputCredentials],
+    () => splitCredentialFieldsBySystem(credentialFields, allProviders),
+    [credentialFields, allProviders],
   );
 
   const hasSystemCredentials = systemCredentialFields.length > 0;
@@ -86,11 +81,13 @@ export function CredentialsGroupedView({
       const providerNames = schema.credentials_provider || [];
       const credentialTypes = schema.credentials_types || [];
       const requiredScopes = schema.credentials_scopes;
+      const discriminatorValues = schema.discriminator_values;
       const savedCredential = findSavedCredentialByProviderAndType(
         providerNames,
         credentialTypes,
         requiredScopes,
         allProviders,
+        discriminatorValues,
       );
 
       if (savedCredential) {

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.ts

@@ -23,10 +23,35 @@ function hasRequiredScopes(
   return true;
 }
 
+/** Check if a credential matches the discriminator values (e.g. MCP server URL). */
+function matchesDiscriminatorValues(
+  credential: { host?: string | null; provider: string; type: string },
+  discriminatorValues?: string[],
+) {
+  // MCP OAuth2 credentials must match by server URL
+  if (credential.type === "oauth2" && credential.provider === "mcp") {
+    if (!discriminatorValues || discriminatorValues.length === 0) return false;
+    return (
+      credential.host != null && discriminatorValues.includes(credential.host)
+    );
+  }
+  // Host-scoped credentials match by host
+  if (credential.type === "host_scoped" && credential.host) {
+    if (!discriminatorValues || discriminatorValues.length === 0) return true;
+    return discriminatorValues.some((v) => {
+      try {
+        return new URL(v).hostname === credential.host;
+      } catch {
+        return false;
+      }
+    });
+  }
+  return true;
+}
+
 export function splitCredentialFieldsBySystem(
   credentialFields: CredentialField[],
   allProviders: CredentialsProvidersContextType | null,
-  inputCredentials?: Record<string, unknown>,
 ) {
   if (!allProviders || credentialFields.length === 0) {
     return {
@@ -52,17 +77,9 @@ export function splitCredentialFieldsBySystem(
     }
   }
 
-  const sortByUnsetFirst = (a: CredentialField, b: CredentialField) => {
-    const aIsSet = Boolean(inputCredentials?.[a[0]]);
-    const bIsSet = Boolean(inputCredentials?.[b[0]]);
-
-    if (aIsSet === bIsSet) return 0;
-    return aIsSet ? 1 : -1;
-  };
-
   return {
-    userCredentialFields: userFields.sort(sortByUnsetFirst),
-    systemCredentialFields: systemFields.sort(sortByUnsetFirst),
+    userCredentialFields: userFields,
+    systemCredentialFields: systemFields,
   };
 }
 
@@ -160,6 +177,7 @@ export function findSavedCredentialByProviderAndType(
   credentialTypes: string[],
   requiredScopes: string[] | undefined,
   allProviders: CredentialsProvidersContextType | null,
+  discriminatorValues?: string[],
 ): SavedCredential | undefined {
   for (const providerName of providerNames) {
     const providerData = allProviders?.[providerName];
@@ -176,9 +194,14 @@ export function findSavedCredentialByProviderAndType(
         credentialTypes.length === 0 ||
         credentialTypes.includes(credential.type);
       const scopesMatch = hasRequiredScopes(credential, requiredScopes);
+      const hostMatches = matchesDiscriminatorValues(
+        credential,
+        discriminatorValues,
+      );
 
       if (!typeMatches) continue;
       if (!scopesMatch) continue;
+      if (!hostMatches) continue;
 
       matchingCredentials.push(credential as SavedCredential);
     }
@@ -190,9 +213,14 @@ export function findSavedCredentialByProviderAndType(
           credentialTypes.length === 0 ||
           credentialTypes.includes(credential.type);
         const scopesMatch = hasRequiredScopes(credential, requiredScopes);
+        const hostMatches = matchesDiscriminatorValues(
+          credential,
+          discriminatorValues,
+        );
 
         if (!typeMatches) continue;
         if (!scopesMatch) continue;
+        if (!hostMatches) continue;
 
         matchingCredentials.push(credential as SavedCredential);
       }
@@ -214,6 +242,7 @@ export function findSavedUserCredentialByProviderAndType(
   credentialTypes: string[],
   requiredScopes: string[] | undefined,
   allProviders: CredentialsProvidersContextType | null,
+  discriminatorValues?: string[],
 ): SavedCredential | undefined {
   for (const providerName of providerNames) {
     const providerData = allProviders?.[providerName];
@@ -230,9 +259,14 @@ export function findSavedUserCredentialByProviderAndType(
         credentialTypes.length === 0 ||
         credentialTypes.includes(credential.type);
       const scopesMatch = hasRequiredScopes(credential, requiredScopes);
+      const hostMatches = matchesDiscriminatorValues(
+        credential,
+        discriminatorValues,
+      );
 
       if (!typeMatches) continue;
       if (!scopesMatch) continue;
+      if (!hostMatches) continue;
 
       matchingCredentials.push(credential as SavedCredential);
     }

autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsx

@@ -1,4 +1,5 @@
 import { CredentialsMetaInput } from "@/app/api/__generated__/models/credentialsMetaInput";
+import { useEffect, useRef } from "react";
 import { getCredentialDisplayName } from "../../helpers";
 import { CredentialRow } from "../CredentialRow/CredentialRow";
 
@@ -41,17 +42,23 @@ export function CredentialsSelect({
     }
   }
 
+  // Resolve the selected credential — treat stale/deleted IDs as unselected
   const selectedCredential = selectedCredentials
     ? credentials.find((c) => c.id === selectedCredentials.id)
     : null;
 
-  const displayCredential = selectedCredential
+  // When credentials exist and nothing is matched,
+  // default to the first credential instead of "None"
+  const effectiveCredential =
+    selectedCredential ?? (credentials.length > 0 ? credentials[0] : null);
+
+  const displayCredential = effectiveCredential
     ? {
-        id: selectedCredential.id,
-        title: selectedCredential.title,
-        username: selectedCredential.username,
-        type: selectedCredential.type,
-        provider: selectedCredential.provider,
+        id: effectiveCredential.id,
+        title: effectiveCredential.title,
+        username: effectiveCredential.username,
+        type: effectiveCredential.type,
+        provider: effectiveCredential.provider,
       }
     : allowNone
       ? {
@@ -67,16 +74,37 @@ export function CredentialsSelect({
           provider: provider,
         };
 
+  // Use matched credential ID (not the raw selectedCredentials.id which may be stale)
+  const defaultValue =
+    effectiveCredential?.id ??
+    (credentials.length > 0 ? credentials[0].id : "__none__");
+
+  // Notify parent when defaulting to a credential so the value is captured on submit
+  const hasNotifiedDefault = useRef(false);
+  useEffect(() => {
+    if (hasNotifiedDefault.current) return;
+    if (selectedCredential) return; // Already matched — no need to override
+    if (credentials.length > 0) {
+      hasNotifiedDefault.current = true;
+      onSelectCredential(credentials[0].id);
+    }
+  }, [credentials, selectedCredential, onSelectCredential]);
+
   return (
     <div className="mb-4 w-full">
       <div className="relative">
         <select
-          value={selectedCredentials?.id ?? "__none__"}
+          value={defaultValue}
           onChange={handleValueChange}
           disabled={readOnly}
           className="absolute inset-0 z-10 cursor-pointer opacity-0"
           aria-label={`Select ${displayName} credential`}
         >
+          {credentials.map((credential) => (
+            <option key={credential.id} value={credential.id}>
+              {getCredentialDisplayName(credential, displayName)}
+            </option>
+          ))}
           {allowNone ? (
             <option value="__none__">None (skip this credential)</option>
           ) : (
@@ -84,11 +112,6 @@ export function CredentialsSelect({
               Select a credential
             </option>
           )}
-          {credentials.map((credential) => (
-            <option key={credential.id} value={credential.id}>
-              {getCredentialDisplayName(credential, displayName)}
-            </option>
-          ))}
         </select>
         <div className="rounded-medium border border-zinc-200 bg-white">
           <CredentialRow

autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts

@@ -5,14 +5,13 @@ import {
   BlockIOCredentialsSubSchema,
   CredentialsMetaInput,
 } from "@/lib/autogpt-server-api/types";
+import { openOAuthPopup } from "@/lib/oauth-popup";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import {
   filterSystemCredentials,
   getActionButtonText,
   getSystemCredentials,
-  OAUTH_TIMEOUT_MS,
-  OAuthPopupResultMessage,
 } from "./helpers";
 
 export type CredentialsInputState = ReturnType<typeof useCredentialsInput>;
@@ -57,6 +56,14 @@ export function useCredentialsInput({
   const queryClient = useQueryClient();
   const credentials = useCredentials(schema, siblingInputs);
   const hasAttemptedAutoSelect = useRef(false);
+  const oauthAbortRef = useRef<((reason?: string) => void) | null>(null);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      oauthAbortRef.current?.();
+    };
+  }, []);
 
   const deleteCredentialsMutation = useDeleteV1DeleteCredentials({
     mutation: {
@@ -81,11 +88,14 @@ export function useCredentialsInput({
     }
   }, [credentials, onLoaded]);
 
-  // Unselect credential if not available
+  // Unselect credential if not available in the loaded credential list.
+  // Skip when no credentials have been loaded yet (empty list could mean
+  // the provider data hasn't finished loading, not that the credential is invalid).
   useEffect(() => {
     if (readOnly) return;
     if (!credentials || !("savedCredentials" in credentials)) return;
     const availableCreds = credentials.savedCredentials;
+    if (availableCreds.length === 0) return;
     if (
       selectedCredential &&
       !availableCreds.some((c) => c.id === selectedCredential.id)
@@ -110,7 +120,9 @@ export function useCredentialsInput({
       if (hasAttemptedAutoSelect.current) return;
       hasAttemptedAutoSelect.current = true;
 
-      if (isOptional) return;
+      // Auto-select if exactly one credential matches.
+      // For optional fields with multiple options, let the user choose.
+      if (isOptional && savedCreds.length > 1) return;
 
       const cred = savedCreds[0];
       onSelectCredential({
@@ -148,7 +160,9 @@ export function useCredentialsInput({
     supportsHostScoped,
     savedCredentials,
     oAuthCallback,
+    mcpOAuthCallback,
     isSystemProvider,
+    discriminatorValue,
   } = credentials;
 
   // Split credentials into user and system
@@ -157,72 +171,64 @@ export function useCredentialsInput({
 
   async function handleOAuthLogin() {
     setOAuthError(null);
-    const { login_url, state_token } = await api.oAuthLogin(
-      provider,
-      schema.credentials_scopes,
-    );
-    setOAuth2FlowInProgress(true);
-    const popup = window.open(login_url, "_blank", "popup=true");
 
-    if (!popup) {
-      throw new Error(
-        "Failed to open popup window. Please allow popups for this site.",
+    // Abort any previous OAuth flow
+    oauthAbortRef.current?.();
+
+    // MCP uses dynamic OAuth discovery per server URL
+    const isMCP = provider === "mcp" && !!discriminatorValue;
+
+    try {
+      let login_url: string;
+      let state_token: string;
+
+      if (isMCP) {
+        ({ login_url, state_token } = await api.mcpOAuthLogin(
+          discriminatorValue!,
+        ));
+      } else {
+        ({ login_url, state_token } = await api.oAuthLogin(
+          provider,
+          schema.credentials_scopes,
+        ));
+      }
+
+      setOAuth2FlowInProgress(true);
+
+      const { promise, cleanup } = openOAuthPopup(login_url, {
+        stateToken: state_token,
+        useCrossOriginListeners: isMCP,
+        // Standard OAuth uses "oauth_popup_result", MCP uses "mcp_oauth_result"
+        acceptMessageTypes: isMCP
+          ? ["mcp_oauth_result"]
+          : ["oauth_popup_result"],
+      });
+
+      oauthAbortRef.current = cleanup.abort;
+      // Expose abort signal for the waiting modal's cancel button
+      const controller = new AbortController();
+      cleanup.signal.addEventListener("abort", () =>
+        controller.abort("completed"),
       );
-    }
+      setOAuthPopupController(controller);
 
-    const controller = new AbortController();
-    setOAuthPopupController(controller);
-    controller.signal.onabort = () => {
-      console.debug("OAuth flow aborted");
-      setOAuth2FlowInProgress(false);
-      popup.close();
-    };
+      const result = await promise;
 
-    const handleMessage = async (e: MessageEvent<OAuthPopupResultMessage>) => {
-      console.debug("Message received:", e.data);
-      if (
-        typeof e.data != "object" ||
-        !("message_type" in e.data) ||
-        e.data.message_type !== "oauth_popup_result"
-      ) {
-        console.debug("Ignoring irrelevant message");
-        return;
-      }
+      // Exchange code for tokens via the provider (updates credential cache)
+      const credentialResult = isMCP
+        ? await mcpOAuthCallback(result.code, state_token)
+        : await oAuthCallback(result.code, result.state);
 
-      if (!e.data.success) {
-        console.error("OAuth flow failed:", e.data.message);
-        setOAuthError(`OAuth flow failed: ${e.data.message}`);
-        setOAuth2FlowInProgress(false);
-        return;
-      }
-
-      if (e.data.state !== state_token) {
-        console.error("Invalid state token received");
-        setOAuthError("Invalid state token received");
-        setOAuth2FlowInProgress(false);
-        return;
-      }
-
-      try {
-        console.debug("Processing OAuth callback");
-        const credentials = await oAuthCallback(e.data.code, e.data.state);
-        console.debug("OAuth callback processed successfully");
-
-        // Check if the credential's scopes match the required scopes
+      // Check if the credential's scopes match the required scopes (skip for MCP)
+      if (!isMCP) {
         const requiredScopes = schema.credentials_scopes;
         if (requiredScopes && requiredScopes.length > 0) {
-          const grantedScopes = new Set(credentials.scopes || []);
+          const grantedScopes = new Set(credentialResult.scopes || []);
           const hasAllRequiredScopes = new Set(requiredScopes).isSubsetOf(
             grantedScopes,
           );
 
           if (!hasAllRequiredScopes) {
-            console.error(
-              `Newly created OAuth credential for ${providerName} has insufficient scopes. Required:`,
-              requiredScopes,
-              "Granted:",
-              credentials.scopes,
-            );
             setOAuthError(
               "Connection failed: the granted permissions don't match what's required. " +
                 "Please contact the application administrator.",
@@ -230,38 +236,28 @@ export function useCredentialsInput({
             return;
           }
         }
+      }
 
-        onSelectCredential({
-          id: credentials.id,
-          type: "oauth2",
-          title: credentials.title,
-          provider,
-        });
-      } catch (error) {
-        console.error("Error in OAuth callback:", error);
+      onSelectCredential({
+        id: credentialResult.id,
+        type: "oauth2",
+        title: credentialResult.title,
+        provider,
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message === "OAuth flow timed out") {
+        setOAuthError("OAuth flow timed out");
+      } else {
         setOAuthError(
-          `Error in OAuth callback: ${
+          `OAuth error: ${
             error instanceof Error ? error.message : String(error)
           }`,
         );
-      } finally {
-        console.debug("Finalizing OAuth flow");
-        setOAuth2FlowInProgress(false);
-        controller.abort("success");
       }
-    };
-
-    console.debug("Adding message event listener");
-    window.addEventListener("message", handleMessage, {
-      signal: controller.signal,
-    });
-
-    setTimeout(() => {
-      console.debug("OAuth flow timed out");
-      controller.abort("timeout");
+    } finally {
       setOAuth2FlowInProgress(false);
-      setOAuthError("OAuth flow timed out");
-    }, OAUTH_TIMEOUT_MS);
+      oauthAbortRef.current = null;
+    }
   }
 
   function handleActionButtonClick() {

autogpt_platform/frontend/src/hooks/useCredentials.ts

@@ -100,6 +100,11 @@ export default function useCredentials(
       return false;
     }
 
+    // Filter MCP OAuth2 credentials by server URL matching
+    if (c.type === "oauth2" && c.provider === "mcp") {
+      return discriminatorValue != null && c.host === discriminatorValue;
+    }
+
     // Filter by OAuth credentials that have sufficient scopes for this block
     if (c.type === "oauth2") {
       const requiredScopes = credsInputSchema.credentials_scopes;

autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts

@@ -33,6 +33,7 @@ import type {
   GraphMeta,
   GraphUpdateable,
   HostScopedCredentials,
+  MCPDiscoverToolsResponse,
   LibraryAgent,
   LibraryAgentID,
   LibraryAgentPreset,
@@ -792,6 +793,38 @@ export default class BackendAPI {
     return this._request("POST", "/otto/ask", query);
   }
 
+  ////////////////////////////////////////
+  ///////////// MCP FUNCTIONS ////////////
+  ////////////////////////////////////////
+
+  async mcpDiscoverTools(
+    serverUrl: string,
+    authToken?: string,
+  ): Promise<MCPDiscoverToolsResponse> {
+    return this._request("POST", "/mcp/discover-tools", {
+      server_url: serverUrl,
+      auth_token: authToken || null,
+    });
+  }
+
+  async mcpOAuthLogin(
+    serverUrl: string,
+  ): Promise<{ login_url: string; state_token: string }> {
+    return this._request("POST", "/mcp/oauth/login", {
+      server_url: serverUrl,
+    });
+  }
+
+  async mcpOAuthCallback(
+    code: string,
+    stateToken: string,
+  ): Promise<CredentialsMetaResponse> {
+    return this._request("POST", "/mcp/oauth/callback", {
+      code,
+      state_token: stateToken,
+    });
+  }
+
   ////////////////////////////////////////
   ////////// INTERNAL FUNCTIONS //////////
   ////////////////////////////////////////