From 64affe3ff9ff72f66bbba8a929b4602272cec920 Mon Sep 17 00:00:00 2001
From: Evan Tahler <evan@arcade.dev>
Date: Thu, 29 Jan 2026 17:46:00 -0800
Subject: [PATCH 1/2] Quickstart Next Steps - visit framework pages

---
 app/_components/agent-framework-tabs.tsx      | 75 +++++++++++++++++++
 app/en/get-started/agent-frameworks/page.mdx  | 72 +-----------------
 .../quickstarts/call-tool-agent/page.mdx      |  5 +-
 next-env.d.ts                                 |  2 +-
 4 files changed, 82 insertions(+), 72 deletions(-)
 create mode 100644 app/_components/agent-framework-tabs.tsx

diff --git a/app/_components/agent-framework-tabs.tsx b/app/_components/agent-framework-tabs.tsx
new file mode 100644
index 000000000..ea472faaf
--- /dev/null
+++ b/app/_components/agent-framework-tabs.tsx
@@ -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>
+  );
+}
diff --git a/app/en/get-started/agent-frameworks/page.mdx b/app/en/get-started/agent-frameworks/page.mdx
index 062cd1908..08ce38a4b 100644
--- a/app/en/get-started/agent-frameworks/page.mdx
+++ b/app/en/get-started/agent-frameworks/page.mdx
@@ -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
 
@@ -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 />
diff --git a/app/en/get-started/quickstarts/call-tool-agent/page.mdx b/app/en/get-started/quickstarts/call-tool-agent/page.mdx
index c9ffd61d6..0acb8a64c 100644
--- a/app/en/get-started/quickstarts/call-tool-agent/page.mdx
+++ b/app/en/get-started/quickstarts/call-tool-agent/page.mdx
@@ -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
 
@@ -376,7 +377,9 @@ console.log(respose_send_email.output?.value);
 
 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).
 
-## Example Code
+<AgentFrameworkTabs />
+
+## Full Example Code
 
 <Tabs items={["Python", "TypeScript"]} storageKey="preferredLanguage">
 
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -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";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

From 5a1dcd5ba8fa8ccde2cc3e9db873d741c198bcf9 Mon Sep 17 00:00:00 2001
From: Evan Tahler <evan@arcade.dev>
Date: Thu, 29 Jan 2026 17:48:16 -0800
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 app/en/get-started/quickstarts/call-tool-agent/page.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/en/get-started/quickstarts/call-tool-agent/page.mdx b/app/en/get-started/quickstarts/call-tool-agent/page.mdx
index 0acb8a64c..8b85f65bd 100644
--- a/app/en/get-started/quickstarts/call-tool-agent/page.mdx
+++ b/app/en/get-started/quickstarts/call-tool-agent/page.mdx
@@ -375,7 +375,7 @@ 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).
 
 <AgentFrameworkTabs />