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..8b85f65bd 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
 
@@ -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">
 
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.