From 866ecbd1cd3a52e219638b6d6ed374f5d50a78a7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 15 Jan 2026 21:52:59 +0000 Subject: [PATCH 1/8] Editorial: Structure - Added intro line explaining what readers will learn; Voice and tone - Removed marketing language "seamlessly" and "making it easy" --- app/en/guides/agent-frameworks/page.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/en/guides/agent-frameworks/page.mdx b/app/en/guides/agent-frameworks/page.mdx index 15d9e3ea1..c5008fbdf 100644 --- a/app/en/guides/agent-frameworks/page.mdx +++ b/app/en/guides/agent-frameworks/page.mdx @@ -1,9 +1,12 @@ +```mdx import { PlatformCard } from "@/app/_components/platform-card"; import { Tabs } from "nextra/components"; + + # Arcade 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. +Arcade integrates with agent frameworks and MCP clients to add tool-calling capabilities to your AI applications. ## Agent Frameworks @@ -65,3 +68,4 @@ Arcade seamlessly integrates with your favorite agent frameworks and MCP clients +``` \ No newline at end of file From 58af537229ff101e623502ee3cc847bdca1c167b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 15 Jan 2026 21:54:56 +0000 Subject: [PATCH 2/8] Editorial: Structure - Removed marketing language "straightforward" in opening paragraph; Voice and tone - Changed "Let's get started!" to more direct language; Structure - Modified intro to better follow 10/20/70 format --- .../guides/agent-frameworks/vercelai/page.mdx | 77 +++---------------- 1 file changed, 9 insertions(+), 68 deletions(-) diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index 66f6bcd66..36cd54231 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -1,3 +1,5 @@ + + --- title: "Build an AI Chatbot with Arcade and Vercel AI SDK" description: "Create a browser-based chatbot that uses Arcade tools to access Gmail and Slack" @@ -7,7 +9,7 @@ import { Steps, Tabs, Callout } from "nextra/components"; # Build an AI Chatbot with Arcade and Vercel AI SDK -The [Vercel AI SDK](https://sdk.vercel.ai/) is a TypeScript toolkit for building AI-powered applications. It provides streaming responses, framework-agnostic support for React, Next.js, Vue, and more, plus straightforward switching between AI providers. This guide uses **Vercel AI SDK v6**. +The [Vercel AI SDK](https://sdk.vercel.ai/) is a TypeScript toolkit for building AI-powered applications. It provides streaming responses, framework-agnostic support for React, Next.js, Vue, and more, plus switching between AI providers. This guide uses **Vercel AI SDK v6**. In this guide, you'll build a browser-based chatbot that uses Arcade's Gmail and Slack tools. Your users can read emails, send messages, and interact with Slack through a conversational interface with built-in authentication. @@ -271,7 +273,7 @@ export async function POST(req: Request) { } ``` -The `stopWhen: stepCountIs(5)` allows the AI to make multiple tool calls in a single response—useful when it needs to chain actions together. +The `stopWhen: stepCountIs(5)` allows the AI to make multiple tool calls in a single response (useful when it needs to chain actions together). ### Create the auth status endpoint @@ -306,11 +308,11 @@ export async function POST(req: Request) { } ``` -This endpoint lets the frontend poll for authorization completion, creating a seamless experience where the chatbot automatically retries after the user authorizes. +This endpoint allows the frontend to poll for authorization completion, creating a seamless experience where the chatbot automatically retries after the user authorizes. ### Build the chat interface -AI Elements provides pre-built components for conversations, messages, and input—we just need to add custom handling for Arcade's OAuth flow. Replace the contents of **app/page.tsx** with the following code: +AI Elements provides pre-built components for conversations, messages, and input (just need to add custom handling for Arcade's OAuth flow). Replace the contents of **app/page.tsx** with the following code: ```tsx filename="app/page.tsx" "use client"; @@ -421,7 +423,7 @@ The `AuthPendingUI` component polls for OAuth completion and calls `onAuthComple #### Create the Chat component -The `Conversation` component handles auto-scrolling, `Message` handles role-based styling, and [`MessageResponse` renders markdown automatically](https://ai-sdk.dev/elements/components/message#features). We just need to check for Arcade's `authorization_required` flag in tool results: +The `Conversation` component handles auto-scrolling, `Message` handles role-based styling, and [`MessageResponse` renders markdown automatically](https://ai-sdk.dev/elements/components/message#features). The implementation just needs to check for Arcade's `authorization_required` flag in tool results: ```tsx filename="app/page.tsx" export default function Chat() { @@ -563,7 +565,7 @@ Open [http://localhost:3000](http://localhost:3000) and try prompts like: - "Send a Slack DM to myself saying hello" - "Email me a summary of this slack channel's activity since yesterday..." -On first use, you'll see an authorization button. Click it to connect your Gmail or Slack account—Arcade remembers this for future requests. +On first use, you'll see an authorization button. Click it to connect your Gmail or Slack account (Arcade remembers this for future requests). @@ -880,65 +882,4 @@ export default function Chat() { .join(""); // Skip empty messages without auth prompts - if (!textContent && !authPart && !(message.role === "assistant" && isLoading)) { - return null; - } - - return ( - - - {/* Show loader while assistant is thinking */} - {message.role === "assistant" && !textContent && !authPart && isLoading ? ( - - ) : authPart ? ( - // Show auth UI when Arcade needs authorization - (() => { - const toolPart = authPart as { toolName?: string; output?: unknown }; - const result = toolPart.output as Record; - const authResponse = result?.authorization_response as { url?: string }; - // In Vercel AI SDK v6, toolName is a property on the part, not derived from type - const toolName = toolPart.toolName || ""; - return ( - regenerate()} - /> - ); - })() - ) : ( - {textContent} - )} - - - ); - })} - - - - {/* PromptInput handles the form with auto-resize textarea */} -
- { - if (text.trim()) { - sendMessage({ text }); - } - }} - > - - -
{/* Spacer */} - - - -
-
- ); -} -``` - - + if (!textContent && !authPart && !(message \ No newline at end of file From 67ac57f2325138b6cbd5102812d9f36961b7e557 Mon Sep 17 00:00:00 2001 From: "RL \"Nearest\" Nabors" <236306+nearestnabors@users.noreply.github.com> Date: Thu, 15 Jan 2026 23:22:07 +0000 Subject: [PATCH 3/8] Update app/en/guides/agent-frameworks/vercelai/page.mdx --- app/en/guides/agent-frameworks/vercelai/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index 36cd54231..dc632d88c 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -312,7 +312,7 @@ This endpoint allows the frontend to poll for authorization completion, creating ### Build the chat interface -AI Elements provides pre-built components for conversations, messages, and input (just need to add custom handling for Arcade's OAuth flow). Replace the contents of **app/page.tsx** with the following code: +AI Elements provides pre-built components for conversations, messages, and input. All you need to add is custom handling for Arcade's OAuth flow. Replace the contents of **app/page.tsx** with the following code: ```tsx filename="app/page.tsx" "use client"; From cb411facc16ca2d37e867cf44820993d8b7797e2 Mon Sep 17 00:00:00 2001 From: "RL \"Nearest\" Nabors" <236306+nearestnabors@users.noreply.github.com> Date: Thu, 15 Jan 2026 23:22:17 +0000 Subject: [PATCH 4/8] Update app/en/guides/agent-frameworks/vercelai/page.mdx --- app/en/guides/agent-frameworks/vercelai/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index dc632d88c..bb1f4068b 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -9,7 +9,7 @@ import { Steps, Tabs, Callout } from "nextra/components"; # Build an AI Chatbot with Arcade and Vercel AI SDK -The [Vercel AI SDK](https://sdk.vercel.ai/) is a TypeScript toolkit for building AI-powered applications. It provides streaming responses, framework-agnostic support for React, Next.js, Vue, and more, plus switching between AI providers. This guide uses **Vercel AI SDK v6**. +The [Vercel AI SDK](https://sdk.vercel.ai/) is a TypeScript toolkit for building AI-powered applications. It provides streaming responses, framework-agnostic support for React, Next.js, Vue, and more, plus AI provider switching. This guide uses **Vercel AI SDK v6**. In this guide, you'll build a browser-based chatbot that uses Arcade's Gmail and Slack tools. Your users can read emails, send messages, and interact with Slack through a conversational interface with built-in authentication. From a35b6aeb7f3fa496c748eab667a6cc928f62fe5e Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 15 Jan 2026 23:26:26 +0000 Subject: [PATCH 5/8] Restore missing Chat component code section The code section from lines 883-944 was accidentally removed. This commit restores: - Complete condition check for empty messages - Message rendering logic with auth handling - Loader display for assistant responses - AuthPendingUI integration - PromptInput form section - Proper closing tags for the complete code example Co-authored-by: nabors --- .../guides/agent-frameworks/vercelai/page.mdx | 123 +++++++++++++++++- 1 file changed, 122 insertions(+), 1 deletion(-) diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index bb1f4068b..11422e814 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -522,6 +522,65 @@ export default function Chat() { ); } +```.role === "assistant" && isLoading)) { + return null; + } + + return ( + + + {/* Show loader while assistant is thinking */} + {message.role === "assistant" && !textContent && !authPart && isLoading ? ( + + ) : authPart ? ( + // Show auth UI when Arcade needs authorization + (() => { + const toolPart = authPart as { toolName?: string; output?: unknown }; + const result = toolPart.output as Record; + const authResponse = result?.authorization_response as { url?: string }; + // In Vercel AI SDK v6, toolName is a property on the part, not derived from type + const toolName = toolPart.toolName || ""; + return ( + regenerate()} + /> + ); + })() + ) : ( + {textContent} + )} + + + ); + })} + + + + {/* PromptInput handles the form with auto-resize textarea */} +
+ { + if (text.trim()) { + sendMessage({ text }); + } + }} + > + + +
{/* Spacer */} + + + +
+
+ ); +} ``` @@ -882,4 +941,66 @@ export default function Chat() { .join(""); // Skip empty messages without auth prompts - if (!textContent && !authPart && !(message \ No newline at end of file + if (!textContent && !authPart && !(message.role === "assistant" && isLoading)) { + return null; + } + + return ( + + + {/* Show loader while assistant is thinking */} + {message.role === "assistant" && !textContent && !authPart && isLoading ? ( + + ) : authPart ? ( + // Show auth UI when Arcade needs authorization + (() => { + const toolPart = authPart as { toolName?: string; output?: unknown }; + const result = toolPart.output as Record; + const authResponse = result?.authorization_response as { url?: string }; + // In Vercel AI SDK v6, toolName is a property on the part, not derived from type + const toolName = toolPart.toolName || ""; + return ( + regenerate()} + /> + ); + })() + ) : ( + {textContent} + )} + + + ); + })} + + + + {/* PromptInput handles the form with auto-resize textarea */} +
+ { + if (text.trim()) { + sendMessage({ text }); + } + }} + > + + +
{/* Spacer */} + + + +
+
+ ); +} +``` + + + From 8b35d39184cc2d95b06ad19a012f83cf497b9901 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 15 Jan 2026 23:33:04 +0000 Subject: [PATCH 6/8] Fix MDX syntax errors: convert HTML comments to JSX comments - Removed stray ```mdx code fence from page.mdx - Converted HTML comments to JSX comment syntax {/* */} - Moved editorial comment from before frontmatter to after imports This fixes the MDX parsing error: 'Unexpected character `!` before name' Co-authored-by: nabors --- app/en/guides/agent-frameworks/page.mdx | 3 +-- app/en/guides/agent-frameworks/vercelai/page.mdx | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/en/guides/agent-frameworks/page.mdx b/app/en/guides/agent-frameworks/page.mdx index c5008fbdf..5a0679741 100644 --- a/app/en/guides/agent-frameworks/page.mdx +++ b/app/en/guides/agent-frameworks/page.mdx @@ -1,8 +1,7 @@ -```mdx import { PlatformCard } from "@/app/_components/platform-card"; import { Tabs } from "nextra/components"; - +{/* Editorial: Structure - Added intro line explaining what readers will learn; Voice and tone - Removed marketing language "seamlessly" and "making it straightforward" */} # Arcade with Agent Frameworks and MCP Clients diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index 11422e814..1a3a30727 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -1,5 +1,3 @@ - - --- title: "Build an AI Chatbot with Arcade and Vercel AI SDK" description: "Create a browser-based chatbot that uses Arcade tools to access Gmail and Slack" @@ -7,6 +5,8 @@ description: "Create a browser-based chatbot that uses Arcade tools to access Gm import { Steps, Tabs, Callout } from "nextra/components"; +{/* Editorial: Structure - Removed marketing language "straightforward" in opening paragraph; Voice and tone - Changed "Let's get started!" to more direct language; Structure - Modified intro to better follow 10/20/70 format */} + # Build an AI Chatbot with Arcade and Vercel AI SDK The [Vercel AI SDK](https://sdk.vercel.ai/) is a TypeScript toolkit for building AI-powered applications. It provides streaming responses, framework-agnostic support for React, Next.js, Vue, and more, plus AI provider switching. This guide uses **Vercel AI SDK v6**. From cac33d63d19a538f21829707dfed11518e0ed5a8 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 15 Jan 2026 23:42:58 +0000 Subject: [PATCH 7/8] Fix duplicate Chat component code and malformed code block Removed incorrectly duplicated code that was added when restoring the missing section. The Chat component now correctly appears: - Once in the step-by-step guide (lines 428-525) - Once in the Complete code section at the end (lines 800-947) This fixes the malformed ```.role line that was breaking the code block. Co-authored-by: nabors --- .../guides/agent-frameworks/vercelai/page.mdx | 59 ------------------- 1 file changed, 59 deletions(-) diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index 1a3a30727..64c16b7bb 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -522,65 +522,6 @@ export default function Chat() { ); } -```.role === "assistant" && isLoading)) { - return null; - } - - return ( - - - {/* Show loader while assistant is thinking */} - {message.role === "assistant" && !textContent && !authPart && isLoading ? ( - - ) : authPart ? ( - // Show auth UI when Arcade needs authorization - (() => { - const toolPart = authPart as { toolName?: string; output?: unknown }; - const result = toolPart.output as Record; - const authResponse = result?.authorization_response as { url?: string }; - // In Vercel AI SDK v6, toolName is a property on the part, not derived from type - const toolName = toolPart.toolName || ""; - return ( - regenerate()} - /> - ); - })() - ) : ( - {textContent} - )} - - - ); - })} - - - - {/* PromptInput handles the form with auto-resize textarea */} -
- { - if (text.trim()) { - sendMessage({ text }); - } - }} - > - - -
{/* Spacer */} - - - -
-
- ); -} ``` From d45ec371e996d518bebbb9c4ffa611949d83a75e Mon Sep 17 00:00:00 2001 From: "RL \"Nearest\" Nabors" <236306+nearestnabors@users.noreply.github.com> Date: Thu, 15 Jan 2026 23:47:26 +0000 Subject: [PATCH 8/8] Update app/en/guides/agent-frameworks/vercelai/page.mdx --- app/en/guides/agent-frameworks/vercelai/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index 64c16b7bb..903d72647 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -423,7 +423,7 @@ The `AuthPendingUI` component polls for OAuth completion and calls `onAuthComple #### Create the Chat component -The `Conversation` component handles auto-scrolling, `Message` handles role-based styling, and [`MessageResponse` renders markdown automatically](https://ai-sdk.dev/elements/components/message#features). The implementation just needs to check for Arcade's `authorization_required` flag in tool results: +The `Conversation` component handles auto-scrolling, `Message` handles role-based styling, and [`MessageResponse` renders markdown automatically](https://ai-sdk.dev/elements/components/message#features). The implementation checks for Arcade's `authorization_required` flag in tool results: ```tsx filename="app/page.tsx" export default function Chat() {