diff --git a/app/en/guides/agent-frameworks/page.mdx b/app/en/guides/agent-frameworks/page.mdx index 15d9e3ea1..5a0679741 100644 --- a/app/en/guides/agent-frameworks/page.mdx +++ b/app/en/guides/agent-frameworks/page.mdx @@ -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 @@ -65,3 +67,4 @@ Arcade seamlessly integrates with your favorite agent frameworks and MCP clients +``` \ No newline at end of file diff --git a/app/en/guides/agent-frameworks/vercelai/page.mdx b/app/en/guides/agent-frameworks/vercelai/page.mdx index 66f6bcd66..903d72647 100644 --- a/app/en/guides/agent-frameworks/vercelai/page.mdx +++ b/app/en/guides/agent-frameworks/vercelai/page.mdx @@ -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. @@ -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. 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"; @@ -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() { @@ -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). @@ -941,4 +943,5 @@ export default function Chat() { } ``` +