DEV-124 Adding overview page for frameworks and MCP clients

app/_components/platform-card.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { Card, CardHeader, CardTitle } from "@arcadeai/design-system";
+import { cn } from "@arcadeai/design-system/lib/utils";
+import Link from "next/link";
+import type React from "react";
+
+type PlatformCardProps = {
+  name: string;
+  icon: string;
+  link: string;
+  type: "Agent Framework" | "MCP Client";
+};
+
+export const PlatformCard: React.FC<PlatformCardProps> = ({
+  name,
+  icon,
+  link,
+  type,
+}) => {
+  const cardContent = (
+    <Card
+      className={cn(
+        "flex h-full flex-col gap-1.5 border border-gray-600/20 bg-gray-600/2 py-3 backdrop-blur-sm transition-all duration-300 hover:border-primary hover:bg-gray-600/3 hover:shadow-lg dark:bg-gray-900/80"
+      )}
+    >
+      <CardHeader>
+        <div className="flex items-center space-x-5">
+          <div className="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg">
+            <img alt={`${name} logo`} className="size-9" src={icon} />
+          </div>
+          <div>
+            <CardTitle className="mb-0.5 text-base text-gray-900 dark:text-gray-50">
+              {name}
+            </CardTitle>
+            <div className="text-gray-600 text-xs dark:text-gray-400">
+              {type}
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+    </Card>
+  );
+
+  return <Link href={link}>{cardContent}</Link>;
+};

app/en/home/_meta.tsx

@@ -68,6 +68,9 @@ export const meta: MetaRecord = {
     type: "separator",
     title: "Agent Frameworks and MCP",
   },
+  "agent-frameworks-overview": {
+    title: "Overview",
+  },
   "mcp-clients": {
     title: "MCP Clients",
   },

app/en/home/agent-frameworks-overview/page.mdx

@@ -0,0 +1,90 @@
+import { PlatformCard } from "@/app/_components/platform-card";
+import { Tabs } from "nextra/components";
+
+# Arcade with Agent Frameworks and MCP Clients
+
+Arcade seamlessly integrates with your favorite agent frameworks and MCP clients, making it easy to add powerful tool-calling capabilities to your AI applications.
+
+## Agent Frameworks
+
+<Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
+  <Tabs.Tab>
+    <div className="mt-6 grid gap-3 sm:grid-cols-2 sm:gap-4 md:gap-5 lg:grid-cols-3">
+      <PlatformCard
+        name="LangChain"
+        icon="https://avatars.githubusercontent.com/u/126733545?s=200&v=4"
+        link="/home/langchain/use-arcade-tools"
+        type="Agent Framework"
+      />
+      <PlatformCard
+        name="CrewAI"
+        icon="https://avatars.githubusercontent.com/u/170677839?s=200&v=4"
+        link="/home/crewai/use-arcade-tools"
+        type="Agent Framework"
+      />
+      <PlatformCard
+        name="OpenAI Agents"
+        icon="https://avatars.githubusercontent.com/u/14957082?s=200&v=4"
+        link="/home/oai-agents/overview"
+        type="Agent Framework"
+      />
+      <PlatformCard
+        name="Google ADK"
+        icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
+        link="/home/google-adk/overview"
+        type="Agent Framework"
+      />
+    </div>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    <div className="mt-6 grid gap-3 sm:grid-cols-2 sm:gap-4 md:gap-5 lg:grid-cols-3">
+      <PlatformCard
+        name="LangChain"
+        icon="https://avatars.githubusercontent.com/u/126733545?s=200&v=4"
+        link="/home/langchain/use-arcade-tools"
+        type="Agent Framework"
+      />
+      <PlatformCard
+        name="Google ADK"
+        icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
+        link="/home/google-adk/overview"
+        type="Agent Framework"
+      />
+      <PlatformCard
+        name="Mastra"
+        icon="https://avatars.githubusercontent.com/u/157496478?s=200&v=4"
+        link="/home/mastra/overview"
+        type="Agent Framework"
+      />
+      <PlatformCard
+        name="Vercel AI"
+        icon="https://avatars.githubusercontent.com/u/14985020?s=200&v=4"
+        link="/home/vercelai/using-arcade-tools"
+        type="Agent Framework"
+      />
+    </div>
+  </Tabs.Tab>
+</Tabs>
+
+## MCP Clients
+
+<div className="mt-8 grid gap-3 sm:grid-cols-2 sm:gap-4 md:gap-5 lg:grid-cols-3">
+  <PlatformCard
+    name="Claude Desktop"
+    icon="https://claude.ai/images/claude_app_icon.png"
+    link="/home/mcp-clients/claude-desktop"
+    type="MCP Client"
+  />
+  <PlatformCard
+    name="Cursor"
+    icon="https://www.cursor.com/favicon.ico"
+    link="/home/mcp-clients/cursor"
+    type="MCP Client"
+  />
+  <PlatformCard
+    name="VS Code"
+    icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg"
+    link="/home/mcp-clients/visual-studio-code"
+    type="MCP Client"
+  />
+</div>

app/en/home/auth-providers/pagerduty/page.mdx

@@ -4,6 +4,10 @@ import { Tabs, Callout, Steps } from "nextra/components";
 
 The PagerDuty auth provider enables tools and agents to call [PagerDuty APIs](https://developer.pagerduty.com/api-reference/) on behalf of a user using OAuth 2.0 authentication.
 
+<Callout type="warning">
+Arcade currently supports **Classic** PagerDuty OAuth apps only. Choose Classic and select either **read-only** or **read/write** access. Newer Web App or other models are not supported. See [PagerDuty OAuth functionality](https://developer.pagerduty.com/docs/oauth-functionality).
+</Callout>
+
 <Callout>
   Want to quickly get started with PagerDuty in your agent or AI app? The
   pre-built [Arcade PagerDuty MCP
@@ -56,10 +60,10 @@ To integrate with PagerDuty's API using OAuth 2.0, you'll need to register an ap
 
 #### Configure OAuth settings
 
-1. Choose **Scoped OAuth** as the authorization method
-2. Select the required **permission scopes** based on your application's needs:
-   - Common scopes include: `read`, `write`, `analytics.read`, `users.read`, `teams.read`, etc.
-3. Add the **Redirect URL** generated by Arcade (see configuration section below) to your app's redirect URLs
+1. Choose **Classic** OAuth and select the permission level:
+   - **Read-only** (recommended; all current MCP tools only read data)
+   - Or **Read/Write** if you plan custom tools that modify data
+2. Add the **Redirect URL** generated by Arcade (see configuration section below) to your app's redirect URLs
 
 #### Save your credentials
 
@@ -68,7 +72,7 @@ To integrate with PagerDuty's API using OAuth 2.0, you'll need to register an ap
 
 </Steps>
 
-For detailed instructions, refer to PagerDuty's [OAuth 2.0 guide](https://www.pagerduty.com/blog/insights/build-sophisticated-apps-for-your-pagerduty-environment-using-oauth-2-0-and-api-scopes/) and [OAuth documentation](https://developer.pagerduty.com/docs/ZG9jOjExMDI5NTgx-o-auth-2-functionality).
+For detailed instructions, refer to PagerDuty's [OAuth 2.0 guide](https://www.pagerduty.com/blog/insights/build-sophisticated-apps-for-your-pagerduty-environment-using-oauth-2-0-and-api-scopes/) and [OAuth documentation](https://developer.pagerduty.com/docs/oauth-functionality).
 
 Next, add the PagerDuty app to Arcade.
 
@@ -143,7 +147,7 @@ Edit the `engine.yaml` file and add a new item to the `auth.providers` section:
 ```yaml
 auth:
   providers:
-    - id: arcade-pagerduty
+    - id: pagerduty
       description: PagerDuty OAuth 2.0 provider
       enabled: true
       type: oauth2
@@ -195,8 +199,8 @@ user_id = "{arcade_user_id}"
 # Start the authorization process
 auth_response = client.auth.start(
     user_id=user_id,
-    provider="arcade-pagerduty",
-    scopes=["read", "write"]
+    provider="pagerduty",
+    scopes=[]
 )
 
 if auth_response.status != "completed":
@@ -222,10 +226,7 @@ const client = new Arcade();
 const userId = "{arcade_user_id}";
 
 // Start the authorization process
-const authResponse = await client.auth.start(userId, "arcade-pagerduty", [
-  "read",
-  "write",
-]);
+const authResponse = await client.auth.start(userId, "pagerduty", []);
 
 if (authResponse.status !== "completed") {
   console.log("Please complete the authorization challenge in your browser:");
@@ -249,21 +250,18 @@ You can use the pre-built [Arcade PagerDuty MCP Server](/mcp-servers/development
 
 If the pre-built tools in the PagerDuty MCP Server don't meet your needs, you can author your own [custom tools](/home/build-tools/create-a-mcp-server) that interact with the PagerDuty API.
 
-Use the `OAuth2()` auth class to specify that a tool requires authorization with PagerDuty. The `context.authorization.token` field will be automatically populated with the user's PagerDuty token:
+Use the `PagerDuty()` auth class to specify that a tool requires authorization with PagerDuty. The `context.authorization.token` field will be automatically populated with the user's PagerDuty token:
 
 ```python {8-12,22}
 from typing import Annotated
 
 import httpx
 from arcade_tdk import ToolContext, tool
-from arcade_tdk.auth import OAuth2
+from arcade_tdk.auth import PagerDuty
 
 
 @tool(
-    requires_auth=OAuth2(
-        provider_id="arcade-pagerduty",
-        scopes=["read"]
-    )
+    requires_auth=PagerDuty()
 )
 async def get_current_user(
     context: ToolContext,
@@ -283,11 +281,11 @@ async def get_current_user(
         return dict(response.json())
 ```
 
-## Available Scopes
+## Permissions
 
-PagerDuty uses a simplified scope system with the following scopes:
+PagerDuty Classic apps use two permission levels:
 
-- `read` - Read-only access to PagerDuty resources
-- `write` - Full read and write access to PagerDuty resources
+- **read** — Read-only access to PagerDuty resources (recommended; all current MCP tools are read-only)
+- **write** — Full read/write access (only needed if you add custom write tools)
 
-For more details about PagerDuty's OAuth scopes and permissions, refer to the [PagerDuty OAuth Scopes documentation](https://developer.pagerduty.com/docs/ZG9jOjExMDI5NTgx-o-auth-2-functionality#scopes).
+For more details about PagerDuty’s OAuth permissions, refer to the [PagerDuty OAuth functionality docs](https://developer.pagerduty.com/docs/oauth-functionality#scopes).

app/en/mcp-servers/customer-support/_meta.tsx

@@ -14,6 +14,9 @@ const meta: MetaRecord = {
   pylon: {
     title: "Pylon",
   },
+  pagerduty: {
+    title: "PagerDuty",
+  },
 };
 
 export default meta;