docs/app/_components/agent-framework-tabs.tsx at 786ad22cb2e8e490baca0b507d99e1e6fbff003a · ArcadeAI/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { Tabs } from "nextra/components";
import { PlatformCard } from "@/app/_components/platform-card";

export function AgentFrameworkTabs() {
  return (
    <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
            icon="https://avatars.githubusercontent.com/u/170677839?s=200&v=4"
            link="/en/get-started/agent-frameworks/crewai/use-arcade-tools"
            name="CrewAI"
            type="Agent Framework"
          />
          <PlatformCard
            icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
            link="/en/get-started/agent-frameworks/google-adk/setup-python"
            name="Google ADK"
            type="Agent Framework"
          />
          <PlatformCard
            icon="/images/icons/langchain.svg"
            invertInDark
            link="/en/get-started/agent-frameworks/langchain/use-arcade-with-langchain-py"
            name="LangChain"
            type="Agent Framework"
          />
          <PlatformCard
            icon="https://avatars.githubusercontent.com/u/14957082?s=200&v=4"
            link="/en/get-started/agent-frameworks/openai-agents/setup-python"
            name="OpenAI Agents"
            type="Agent Framework"
          />
          <PlatformCard
            icon="/images/icons/python.svg"
            link="/en/get-started/agent-frameworks/setup-arcade-with-your-llm-python"
            name="Vanilla Python"
            type="MCP Client"
          />
        </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
            icon="/images/icons/langchain.svg"
            invertInDark
            link="/en/get-started/agent-frameworks/langchain/use-arcade-with-langchain-ts"
            name="LangChain"
            type="Agent Framework"
          />
          <PlatformCard
            icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
            link="/en/get-started/agent-frameworks/google-adk/setup-typescript"
            name="Google ADK"
            type="Agent Framework"
          />
          <PlatformCard
            icon="/images/icons/mastra.svg"
            invertInDark
            link="/en/get-started/agent-frameworks/mastra"
            name="Mastra"
            type="Agent Framework"
          />
          <PlatformCard
            icon="/images/icons/vercel.svg"
            invertInDark
            link="/en/get-started/agent-frameworks/vercelai"
            name="Vercel AI"
            type="Agent Framework"
          />
          <PlatformCard
            icon="https://avatars.githubusercontent.com/u/72518640?s=200&v=4"
            link="/en/get-started/agent-frameworks/tanstack-ai"
            name="TanStack AI"
            type="Agent Framework"
          />
          <PlatformCard
            icon="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg"
            link="/en/get-started/agent-frameworks/setup-arcade-with-your-llm-typescript"
            name="Vanilla TypeScript"
            type="MCP Client"
          />
        </div>
      </Tabs.Tab>
    </Tabs>
  );
}