Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
75 changes: 75 additions & 0 deletions app/_components/agent-framework-tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
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="/images/icons/python.svg"
link="/guides/agent-frameworks/setup-arcade-with-your-llm-python"
name="Vanilla Python"
type="MCP Client"
/>
<PlatformCard
icon="/images/icons/langchain.svg"
invertInDark
link="/guides/agent-frameworks/langchain/use-arcade-tools"
name="LangChain"
type="Agent Framework"
/>
<PlatformCard
icon="https://avatars.githubusercontent.com/u/170677839?s=200&v=4"
link="/guides/agent-frameworks/crewai/use-arcade-tools"
name="CrewAI"
type="Agent Framework"
/>
<PlatformCard
icon="https://avatars.githubusercontent.com/u/14957082?s=200&v=4"
link="/guides/agent-frameworks/openai-agents/overview"
name="OpenAI Agents"
type="Agent Framework"
/>
<PlatformCard
icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
link="/guides/agent-frameworks/google-adk/overview"
name="Google ADK"
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
icon="/images/icons/langchain.svg"
invertInDark
link="/guides/agent-frameworks/langchain/use-arcade-tools"
name="LangChain"
type="Agent Framework"
/>
<PlatformCard
icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
link="/guides/agent-frameworks/google-adk/overview"
name="Google ADK"
type="Agent Framework"
/>
<PlatformCard
icon="/images/icons/mastra.svg"
invertInDark
link="/guides/agent-frameworks/mastra/overview"
name="Mastra"
type="Agent Framework"
/>
<PlatformCard
icon="/images/icons/vercel.svg"
invertInDark
link="/guides/agent-frameworks/vercelai"
name="Vercel AI"
type="Agent Framework"
/>
</div>
</Tabs.Tab>
</Tabs>
);
}
72 changes: 2 additions & 70 deletions app/en/get-started/agent-frameworks/page.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { PlatformCard } from "@/app/_components/platform-card";
import { Tabs } from "nextra/components";
import { AgentFrameworkTabs } from "@/app/_components/agent-framework-tabs";

# Arcade with Agent Frameworks and MCP Clients

Expand All @@ -9,71 +8,4 @@ These guides are for developers building AI applications who need to connect Arc

## 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="Vanilla Python"
icon="/images/icons/python.svg"
link="/guides/agent-frameworks/setup-arcade-with-your-llm-python"
type="Programming Language"
/>
<PlatformCard
name="LangChain"
icon="/images/icons/langchain.svg"
link="/guides/agent-frameworks/langchain/use-arcade-tools"
type="Agent Framework"
invertInDark
/>
<PlatformCard
name="CrewAI"
icon="https://avatars.githubusercontent.com/u/170677839?s=200&v=4"
link="/guides/agent-frameworks/crewai/use-arcade-tools"
type="Agent Framework"
/>
<PlatformCard
name="OpenAI Agents"
icon="https://avatars.githubusercontent.com/u/14957082?s=200&v=4"
link="/guides/agent-frameworks/openai-agents/overview"
type="Agent Framework"
/>
<PlatformCard
name="Google ADK"
icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
link="/guides/agent-frameworks/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="/images/icons/langchain.svg"
link="/guides/agent-frameworks/langchain/use-arcade-tools"
type="Agent Framework"
invertInDark
/>
<PlatformCard
name="Google ADK"
icon="https://avatars.githubusercontent.com/u/1342004?s=200&v=4"
link="/guides/agent-frameworks/google-adk/overview"
type="Agent Framework"
/>
<PlatformCard
name="Mastra"
icon="/images/icons/mastra.svg"
link="/guides/agent-frameworks/mastra/overview"
type="Agent Framework"
invertInDark
/>
<PlatformCard
name="Vercel AI"
icon="/images/icons/vercel.svg"
link="/guides/agent-frameworks/vercelai"
type="Agent Framework"
invertInDark
/>
</div>
</Tabs.Tab>
</Tabs>
<AgentFrameworkTabs />
7 changes: 5 additions & 2 deletions app/en/get-started/quickstarts/call-tool-agent/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ description: "Learn how to call tools in your agent"

import { Steps, Tabs, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";
import { AgentFrameworkTabs } from "@/app/_components/agent-framework-tabs";

# Calling tools in your agent with Arcade

Expand Down Expand Up @@ -374,9 +375,11 @@ console.log(respose_send_email.output?.value);

## Next Steps

In this simple example, we call the tool methods directly. In your real applications and agents, you'll likely be letting the LLM decide which tools to call. Learn more about using Arcade with Frameworks in the [Frameworks](/get-started/agent-frameworks) section, or [how to build your own tools](/guides/create-tools/tool-basics/build-mcp-server).
In this example, we call the tool methods directly. In your real applications and agents, you'll likely be letting the LLM decide which tools to call. Learn more about using Arcade with Frameworks in the [Frameworks](/get-started/agent-frameworks) section, or [how to build your own tools](/guides/create-tools/tool-basics/build-mcp-server).

## Example Code
<AgentFrameworkTabs />

## Full Example Code

<Tabs items={["Python", "TypeScript"]} storageKey="preferredLanguage">

Expand Down
2 changes: 1 addition & 1 deletion next-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Auto-generated file accidentally modified with dev path

Medium Severity

The next-env.d.ts file contains a comment stating it "should not be edited," yet the import path was changed from .next/types/routes.d.ts to .next/dev/types/routes.d.ts. The dev in the path suggests this was auto-generated when running next dev and accidentally committed. This may cause TypeScript errors in CI/CD or production builds if those environments generate type files in .next/types/ rather than .next/dev/types/.

Fix in Cursor Fix in Web


// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.