Skip to content

Commit 50d9638

Browse files
nearestnaborsvfanellejottakkaFrancisco Liberal
authored
DEV-124 Adding overview page for frameworks and MCP clients (#613)
* Adding overview page for frameworks and MCP clients * Update app/en/home/agent-frameworks-overview/page.mdx Co-authored-by: vfanelle <[email protected]> * Pagerduty documentation (#600) * Pagerduty documentation * merge * update docs --------- Co-authored-by: Francisco Liberal <[email protected]> * Finesse the design of the framework tiles * adding a universal tile for future use. Adding bak MCP clients * puts tabs in * swapping tabs --------- Co-authored-by: Rachel Lee Nabors <[email protected]> Co-authored-by: vfanelle <[email protected]> Co-authored-by: jottakka <[email protected]> Co-authored-by: Francisco Liberal <[email protected]>
1 parent 225274c commit 50d9638

File tree

3 files changed

+138
-0
lines changed

3 files changed

+138
-0
lines changed

‎app/_components/platform-card.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
import { Card, CardHeader, CardTitle } from "@arcadeai/design-system";
3+
import { cn } from "@arcadeai/design-system/lib/utils";
4+
import Link from "next/link";
5+
import type React from "react";
6+
7+
type PlatformCardProps = {
8+
name: string;
9+
icon: string;
10+
link: string;
11+
type: "Agent Framework" | "MCP Client";
12+
};
13+
14+
export const PlatformCard: React.FC<PlatformCardProps> = ({
15+
name,
16+
icon,
17+
link,
18+
type,
19+
}) => {
20+
const cardContent = (
21+
<Card
22+
className={cn(
23+
"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"
24+
)}
25+
>
26+
<CardHeader>
27+
<div className="flex items-center space-x-5">
28+
<div className="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg">
29+
<img alt={`${name} logo`} className="size-9" src={icon} />
30+
</div>
31+
<div>
32+
<CardTitle className="mb-0.5 text-base text-gray-900 dark:text-gray-50">
33+
{name}
34+
</CardTitle>
35+
<div className="text-gray-600 text-xs dark:text-gray-400">
36+
{type}
37+
</div>
38+
</div>
39+
</div>
40+
</CardHeader>
41+
</Card>
42+
);
43+
44+
return <Link href={link}>{cardContent}</Link>;
45+
};

‎app/en/home/_meta.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ export const meta: MetaRecord = {
6868
type: "separator",
6969
title: "Agent Frameworks and MCP",
7070
},
71+
"agent-frameworks-overview": {
72+
title: "Overview",
73+
},
7174
"mcp-clients": {
7275
title: "MCP Clients",
7376
},

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { PlatformCard } from "@/app/_components/platform-card";
2+
import { Tabs } from "nextra/components";
3+
4+
# Arcade with Agent Frameworks and MCP Clients
5+
6+
Arcade seamlessly integrates with your favorite agent frameworks and MCP clients, making it easy to add powerful tool-calling capabilities to your AI applications.
7+
8+
## Agent Frameworks
9+
10+
<Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
11+
<Tabs.Tab>
12+
<div className="mt-6 grid gap-3 sm:grid-cols-2 sm:gap-4 md:gap-5 lg:grid-cols-3">
13+
<PlatformCard
14+
name="LangChain"
15+
icon="https://avatars.githubusercontent.com/u/126733545?s=200&v=4"
16+
link="/home/langchain/use-arcade-tools"
17+
type="Agent Framework"
18+
/>
19+
<PlatformCard
20+
name="CrewAI"
21+
icon="https://avatars.githubusercontent.com/u/170677839?s=200&v=4"
22+
link="/home/crewai/use-arcade-tools"
23+
type="Agent Framework"
24+
/>
25+
<PlatformCard
26+
name="OpenAI Agents"
27+
icon="https://avatars.githubusercontent.com/u/14957082?s=200&v=4"
28+
link="/home/oai-agents/overview"
29+
type="Agent Framework"
30+
/>
31+
<PlatformCard
32+
name="Google ADK"
33+
icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
34+
link="/home/google-adk/overview"
35+
type="Agent Framework"
36+
/>
37+
</div>
38+
</Tabs.Tab>
39+
<Tabs.Tab>
40+
<div className="mt-6 grid gap-3 sm:grid-cols-2 sm:gap-4 md:gap-5 lg:grid-cols-3">
41+
<PlatformCard
42+
name="LangChain"
43+
icon="https://avatars.githubusercontent.com/u/126733545?s=200&v=4"
44+
link="/home/langchain/use-arcade-tools"
45+
type="Agent Framework"
46+
/>
47+
<PlatformCard
48+
name="Google ADK"
49+
icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
50+
link="/home/google-adk/overview"
51+
type="Agent Framework"
52+
/>
53+
<PlatformCard
54+
name="Mastra"
55+
icon="https://avatars.githubusercontent.com/u/157496478?s=200&v=4"
56+
link="/home/mastra/overview"
57+
type="Agent Framework"
58+
/>
59+
<PlatformCard
60+
name="Vercel AI"
61+
icon="https://avatars.githubusercontent.com/u/14985020?s=200&v=4"
62+
link="/home/vercelai/using-arcade-tools"
63+
type="Agent Framework"
64+
/>
65+
</div>
66+
</Tabs.Tab>
67+
</Tabs>
68+
69+
## MCP Clients
70+
71+
<div className="mt-8 grid gap-3 sm:grid-cols-2 sm:gap-4 md:gap-5 lg:grid-cols-3">
72+
<PlatformCard
73+
name="Claude Desktop"
74+
icon="https://claude.ai/images/claude_app_icon.png"
75+
link="/home/mcp-clients/claude-desktop"
76+
type="MCP Client"
77+
/>
78+
<PlatformCard
79+
name="Cursor"
80+
icon="https://www.cursor.com/favicon.ico"
81+
link="/home/mcp-clients/cursor"
82+
type="MCP Client"
83+
/>
84+
<PlatformCard
85+
name="VS Code"
86+
icon="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg"
87+
link="/home/mcp-clients/visual-studio-code"
88+
type="MCP Client"
89+
/>
90+
</div>

0 commit comments

Comments
 (0)