Skip to content
5 changes: 4 additions & 1 deletion app/en/guides/agent-frameworks/page.mdx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
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

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

Expand Down Expand Up @@ -65,3 +67,4 @@ Arcade seamlessly integrates with your favorite agent frameworks and MCP clients
</div>
</Tabs.Tab>
</Tabs>
```
15 changes: 9 additions & 6 deletions app/en/guides/agent-frameworks/vercelai/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ 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 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 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.

Expand Down Expand Up @@ -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 responseuseful 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

Expand Down Expand Up @@ -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. 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";
Expand Down Expand Up @@ -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 checks for Arcade's `authorization_required` flag in tool results:

```tsx filename="app/page.tsx"
export default function Chat() {
Expand Down Expand Up @@ -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 accountArcade 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).

</Steps>

Expand Down Expand Up @@ -941,4 +943,5 @@ export default function Chat() {
}
```


</details>