Skip to content

DEV-124 Adding overview page for frameworks and MCP clients #613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vfanelle merged 7 commits into from
Dec 19, 2025
Merged

DEV-124 Adding overview page for frameworks and MCP clients #613

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7892532
Adding overview page for frameworks and MCP clients
nearestnabors Dec 18, 2025
fee9a23
Update app/en/home/agent-frameworks-overview/page.mdx
nearestnabors Dec 18, 2025
53890ae
Pagerduty documentation (#600)
jottakka Dec 18, 2025
8a516a6
Finesse the design of the framework tiles
nearestnabors Dec 18, 2025
3d5cfd9
adding a universal tile for future use. Adding bak MCP clients
nearestnabors Dec 18, 2025
c526ae6
puts tabs in
nearestnabors Dec 19, 2025
a32aae7
swapping tabs
nearestnabors Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/en/home/_meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
Expand Down
155 changes: 155 additions & 0 deletions app/en/home/agent-frameworks-overview/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
# Arcade with 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

<div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://avatars.githubusercontent.com/u/126733545?s=200&v=4" alt="LangChain logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/langchain/use-arcade-tools" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">LangChain</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://avatars.githubusercontent.com/u/170677839?s=200&v=4" alt="CrewAI logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/crewai/use-arcade-tools" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">CrewAI</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://avatars.githubusercontent.com/u/14957082?s=200&v=4" alt="OpenAI logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/oai-agents/overview" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">OpenAI Agents</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://avatars.githubusercontent.com/u/1342004?s=200&v=4" alt="Google logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/google-adk/overview" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">Google ADK</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://avatars.githubusercontent.com/u/157496478?s=200&v=4" alt="Mastra logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/mastra/overview" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">Mastra</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://avatars.githubusercontent.com/u/14985020?s=200&v=4" alt="Vercel logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/vercelai/using-arcade-tools" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">Vercel AI</p>
</a>
</div>
</div>
</div>
</div>

## MCP Clients

<div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://claude.ai/images/claude_app_icon.png" alt="Claude Desktop logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/mcp-clients/claude-desktop" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">Claude Desktop</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://www.cursor.com/favicon.ico" alt="Cursor logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/mcp-clients/cursor" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">Cursor</p>
</a>
</div>
</div>
</div>

<div className="group relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
<div className="flex items-center space-x-3">
<div className="shrink-0">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" alt="VS Code logo" className="h-8 w-8" />
</div>
</div>
<div className="min-w-0 flex-1">
<a href="/home/mcp-clients/visual-studio-code" className="focus:outline-none">
<span className="absolute inset-0" aria-hidden="true"></span>
<p className="text-sm font-medium text-gray-900 dark:text-white">VS Code</p>
</a>
</div>
</div>
</div>
</div>