Skip to content

Editorial improvements for #755 #759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
github-actions wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Editorial improvements for #755 #759

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 4 additions & 72 deletions app/en/get-started/agent-frameworks/vercelai/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<GuideOverview>
<GuideOverview.Outcomes>
Expand Down Expand Up @@ -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 (
<Message key={message.id} from={message.role}>
<MessageContent>
{/* Show loader while assistant is thinking */}
{message.role === "assistant" && !textContent && !authPart && isLoading ? (
<Spinner />
) : authPart ? (
// Show auth UI when Arcade needs authorization
(() => {
const toolPart = authPart as { toolName?: string; output?: unknown };
const result = toolPart.output as Record<string, unknown>;
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 (
<AuthPendingUI
authUrl={authResponse?.url || ""}
toolName={toolName}
onAuthComplete={() => regenerate()}
/>
);
})()
) : (
<MessageResponse>{textContent}</MessageResponse>
)}
</MessageContent>
</Message>
);
})}
</ConversationContent>
</Conversation>

{/* PromptInput handles the form with auto-resize textarea */}
<div className="p-4">
<PromptInput
onSubmit={({ text }) => {
if (text.trim()) {
sendMessage({ text });
}
}}
>
<PromptInputTextarea
ref={inputRef}
placeholder="Ask about your emails or Slack..."
disabled={isLoading}
/>
<PromptInputFooter>
<div /> {/* Spacer */}
<PromptInputSubmit status={status} disabled={isLoading} />
</PromptInputFooter>
</PromptInput>
</div>
</div>
);
}
```

</details>
// Get text content from message