diff --git a/app/en/get-started/agent-frameworks/vercelai/page.mdx b/app/en/get-started/agent-frameworks/vercelai/page.mdx index cfa684c39..2952b3d2e 100644 --- a/app/en/get-started/agent-frameworks/vercelai/page.mdx +++ b/app/en/get-started/agent-frameworks/vercelai/page.mdx @@ -5,13 +5,13 @@ 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 +This guide shows you how to build a browser-based chatbot using Arcade tools and the 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**. -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. +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. @@ -891,72 +891,4 @@ export default function Chat() { return false; }); - // Get text content from message parts - const textContent = message.parts - ?.filter((part) => part.type === "text") - .map((part) => part.text) - .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 */} - - - -
-
- ); -} -``` - - + // Get text content from message \ No newline at end of file