# How to integrate Canvas MCP with Vercel AI SDK v6

```json
{
  "title": "How to integrate Canvas MCP with Vercel AI SDK v6",
  "toolkit": "Canvas",
  "toolkit_slug": "canvas",
  "framework": "Vercel AI SDK",
  "framework_slug": "ai-sdk",
  "url": "https://composio.dev/toolkits/canvas/framework/ai-sdk",
  "markdown_url": "https://composio.dev/toolkits/canvas/framework/ai-sdk.md",
  "updated_at": "2026-05-06T08:05:04.164Z"
}
```

## Introduction

This guide walks you through connecting Canvas to Vercel AI SDK v6 using the Composio tool router. By the end, you'll have a working Canvas agent that can create a new assignment for your math course, send a message to all students in biology 101, schedule office hours as a calendar event through natural language commands.
This guide will help you understand how to give your Vercel AI SDK agent real control over a Canvas account through Composio's Canvas MCP server.
Before we dive in, let's take a quick look at the key ideas and tools involved.

## Also integrate Canvas with

- [OpenAI Agents SDK](https://composio.dev/toolkits/canvas/framework/open-ai-agents-sdk)
- [Claude Agent SDK](https://composio.dev/toolkits/canvas/framework/claude-agents-sdk)
- [Claude Code](https://composio.dev/toolkits/canvas/framework/claude-code)
- [Claude Cowork](https://composio.dev/toolkits/canvas/framework/claude-cowork)
- [Codex](https://composio.dev/toolkits/canvas/framework/codex)
- [OpenClaw](https://composio.dev/toolkits/canvas/framework/openclaw)
- [Hermes](https://composio.dev/toolkits/canvas/framework/hermes-agent)
- [CLI](https://composio.dev/toolkits/canvas/framework/cli)
- [Google ADK](https://composio.dev/toolkits/canvas/framework/google-adk)
- [LangChain](https://composio.dev/toolkits/canvas/framework/langchain)
- [Mastra AI](https://composio.dev/toolkits/canvas/framework/mastra-ai)
- [LlamaIndex](https://composio.dev/toolkits/canvas/framework/llama-index)
- [CrewAI](https://composio.dev/toolkits/canvas/framework/crew-ai)

## TL;DR

Here's what you'll learn:
- How to set up and configure a Vercel AI SDK agent with Canvas integration
- Using Composio's Tool Router to dynamically load and access Canvas tools
- Creating an MCP client connection using HTTP transport
- Building an interactive CLI chat interface with conversation history management
- Handling tool calls and results within the Vercel AI SDK framework

## What is Vercel AI SDK?

The Vercel AI SDK is a TypeScript library for building AI-powered applications. It provides tools for creating agents that can use external services and maintain conversation state.
Key features include:
- streamText: Core function for streaming responses with real-time tool support
- MCP Client: Built-in support for Model Context Protocol via @ai-sdk/mcp
- Step Counting: Control multi-step tool execution with stopWhen: stepCountIs()
- OpenAI Provider: Native integration with OpenAI models

## What is the Canvas MCP server, and what's possible with it?

The Canvas MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Canvas account. It provides structured and secure access to your courses, assignments, and communications, so your agent can perform actions like creating assignments, posting announcements, sending messages, managing course events, and sharing content on your behalf.
- Automated assignment management: Have your agent create new assignments or adjust assignment dates and overrides for students, groups, or sections in any of your courses.
- Course communication and collaboration: Let the agent send messages, start new conversations, or post entries in discussions to keep classes engaged and informed.
- Calendar and event scheduling: Easily instruct your agent to schedule or update course calendar events and appointment groups, including specific recurrence and blackout dates.
- Content and notification sharing: Ask your agent to share learning materials, send content to selected users, or create global notifications for everyone in an account.
- User channel and course creation: Enable your agent to add new communication channels for users or spin up brand new courses with custom configurations, all through secure automation.

## Supported Tools

| Tool slug | Name | Description |
|---|---|---|
| `CANVAS_CREATE_ACCOUNT_NOTIFICATION` | Create account notification | Creates a global notification within a canvas account, ensuring `end at` is after `start at` and any specified `notification roles` are valid. |
| `CANVAS_CREATE_APPOINTMENT_GROUP` | Create appointment group | Creates a new appointment group in canvas for schedulable time slots within specified course or group contexts. |
| `CANVAS_CREATE_ASSIGNMENT` | Create an assignment | Creates a new assignment within a specified course in canvas lms. |
| `CANVAS_CREATE_ASSIGNMENT_OVERRIDE` | Create assignment override | Creates an assignment override to adjust due/unlock/lock dates for an assignment in a course, targeting specific students (requires `title`), a group, or a course section; at least one target (`student ids`, `group id`, or `course section id`) is required. |
| `CANVAS_CREATE_CALENDAR_EVENT` | Create Calendar Event | Creates a calendar event with options for recurrence (finite `rrule` series only), section-specific timings, and blackout dates within a specified context. |
| `CANVAS_CREATE_COMMUNICATION_CHANNEL` | Create communication channel | Creates a new communication channel (e.g., email, sms, push) for an existing canvas user to receive notifications. |
| `CANVAS_CREATE_CONTENT_SHARE` | Create content share | Shares a canvas content item to specified users, if the sender has necessary permissions and receiver ids are valid. |
| `CANVAS_CREATE_CONVERSATION` | Create conversation | Use to send messages in canvas by creating a new conversation or adding to an existing one; an existing conversation with the same recipients (and matching scope/filter, if specified) may be reused unless `force new` is true. |
| `CANVAS_CREATE_COURSE` | Create a course | Creates a new course in canvas within a specified account, with comprehensive configuration options. |
| `CANVAS_CREATE_DISCUSSION_ENTRY` | Create discussion entry | Tool to create a new entry in a canvas discussion topic. use when posting a message with optional attachments to a discussion topic. |
| `CANVAS_CREATE_DISCUSSION_TOPIC` | Create discussion topic | Creates a new discussion topic in a specified canvas course, allowing comprehensive configuration of its content, type, publication settings, engagement features, and associations. |
| `CANVAS_CREATE_ENROLLMENT` | Create enrollment | Enrolls a user in a canvas course with a specified role and status; `associated user id` is required if `enrollment type` is 'observerenrollment'. |
| `CANVAS_CREATE_FOLDER` | Create Folder | Creates a new folder in canvas within a specified context (e.g., course, user) and optional parent folder; ensure the context and any parent folder (specified by id or path, not both) already exist. |
| `CANVAS_CREATE_MODULE` | Create Module | Creates a new organizational module within a specified canvas lms course, with options for availability, sequencing, and prerequisites. |
| `CANVAS_CREATE_PAGE_FOR_COURSE` | Create a page for a course | Creates a new wiki page in a specified canvas course, with options for title, html body, editing permissions, publication, and designation as front page (which also requires publication). |
| `CANVAS_CREATE_QUIZ` | Create Quiz | Creates a new quiz with various settings in a specified existing canvas course; `assignment group id` applies only to graded quiz types. |
| `CANVAS_CREATE_QUIZ_QUESTION` | Create a quiz question | Creates a new question for an existing quiz within a course; if `answers` are provided, their structure must align with `question type`, and any `quiz group id` must be valid for an existing group in the quiz. |
| `CANVAS_DELETE_APPOINTMENT_GROUP` | Delete appointment group | Permanently deletes an existing appointment group by its id; associated appointments may also be canceled or affected. |
| `CANVAS_DELETE_ASSIGNMENT` | Delete an assignment | Soft-deletes a specific assignment within a course, returning the assignment object with its `workflow state` updated to 'deleted'. |
| `CANVAS_DELETE_FOLDER` | Delete a folder | Permanently deletes an existing folder specified by its unique id. |
| `CANVAS_DELETE_QUIZ` | Delete quiz | Permanently deletes the quiz identified by `quiz id` from the course identified by `course id`; this action cannot be undone. |
| `CANVAS_DEPARTMENT_LEVEL_GRADE_DATA_FOR_CURRENT_GRADES` | Get current grades | Fetches current, aggregated grade data from canvas analytics for a specified account id. |
| `CANVAS_DEPARTMENT_LEVEL_GRADE_DATA_FOR_TERM_GRADES` | Get term grade data | Retrieves department-level aggregated grade data for a specific academic term within a canvas account. |
| `CANVAS_EDIT_ASSIGNMENT` | Edit assignment | Updates an existing assignment in a canvas course (identified by `course id` and `assignment id`); only attributes explicitly provided in the request are modified. |
| `CANVAS_EDIT_QUIZ` | Edit a quiz | Modifies an existing canvas quiz; only attributes with provided values in the request are updated. |
| `CANVAS_EXPORT_CONTENT` | Export content | Use to initiate an asynchronous export of content (e.g., common cartridge, qti, zip) from an existing canvas course, returning an export id and progress url. |
| `CANVAS_FETCH_DATA` | Fetch Data | Fetches a specific category of canvas data (e.g., accounts, courses, users) by setting exactly one `get *` boolean flag to true and providing any associated ids. supports pagination with per page (default 100, max 100) and page (default 1) parameters to fetch large datasets. |
| `CANVAS_GET_ACCOUNTS` | Get Canvas accounts | Retrieves all canvas accounts accessible to the authenticated user. |
| `CANVAS_GET_ALL_ASSIGNMENTS` | Get all assignments | Retrieves assignments for a specified canvas course. |
| `CANVAS_GET_ALL_USERS` | Get all users | Retrieves a list of users for a specified canvas `account id` (use 'self' for the current user's root account), supporting filtering, sorting, and pagination. |
| `CANVAS_GET_ASSIGNMENT` | Get assignment | Retrieves detailed information for a specific assignment within a given course in canvas. |
| `CANVAS_GET_ASSIGNMENT_RUBRIC` | Get Assignment Rubric | Fetches the detailed rubric for a specified assignment within a canvas course; fails if the assignment has no associated rubric. |
| `CANVAS_GET_COURSE_LEVEL_PARTICIPATION_DATA` | Get Course Activity | Retrieves daily activity analytics, such as page views and participation events, for a specified canvas course. |
| `CANVAS_GET_CURRENT_USER` | Get Current User | Retrieves detailed information about the currently authenticated user from the canvas lms. |
| `CANVAS_GET_DEPARTMENT_LEVEL_COMPLETED_STATISTICS` | Get department-level completed statistics | Retrieves numeric statistics for all completed courses for a specified canvas account id; the account must exist. |
| `CANVAS_GET_DEPARTMENT_LEVEL_CURRENT_STATISTICS` | Get department level current statistics | Fetches a snapshot of current numerical statistics for a canvas account, requiring its valid id. |
| `CANVAS_GET_DEPARTMENT_LEVEL_GRADE_DATA_COMPLETED_GRADES` | Get department level completed grades | Retrieves the distribution of final grades (0-100, binned to whole numbers) for all completed courses in a canvas account, where each data point represents one student's final grade in one course. |
| `CANVAS_GET_DEPARTMENT_LEVEL_TERM_STATISTICS` | Get department level term statistics | Retrieves department-level academic term statistics (e.g., enrollment, activity, grades) for a specified account and term in canvas, provided analytics data is available. |
| `CANVAS_GET_ENROLLMENT_BY_ID` | Get enrollment by ID | Retrieves a specific enrollment by its id within a given account. |
| `CANVAS_GET_GRADEBOOK_HISTORY_DAYS` | Get gradebook history days | Retrieves a chronological list of dates with grading activity and the active graders for a specified course. |
| `CANVAS_GET_PAGE_FOR_COURSE` | Get Page for a Course | Retrieves a specific content page (wiki or content page) by its url or numeric id from a specified canvas course. |
| `CANVAS_GET_QUIZ_SUBMISSIONS` | Get quiz submissions | Retrieves all submissions for a specific quiz within a course; ensure `course id` and `quiz id` are valid and the quiz belongs to the course. |
| `CANVAS_GET_REPORT_STATUS` | Get report status | Retrieves the status of a previously initiated report in a canvas account, specified by its type and id. |
| `CANVAS_GET_SINGLE_COURSE` | Get a single course | Retrieves detailed information for a specific canvas course using its `course id`, which must be valid, and allows for including additional data fields in the response via the `include` parameter. |
| `CANVAS_GET_SINGLE_SUBMISSION` | Get single submission | Retrieves a specific submission for an assignment made by a particular user within a designated course. |
| `CANVAS_GET_SUBMISSION_FILES` | Get submission files | Retrieves files from a student's canvas assignment submission, processing text, binary, and zip files, and providing s3 download urls if s3 integration is active and uploads are successful. |
| `CANVAS_GET_USER_ASSIGNMENT_ANALYTICS` | Get user assignment analytics | Fetches detailed assignment-level analytics for a specific student in a designated course, including submission details and class performance statistics. |
| `CANVAS_GET_USER_COURSE_PROGRESS` | Get user course progress | Retrieves the academic progress of a specific user within a given course. |
| `CANVAS_GET_USER_PARTICIPATION_ANALYTICS` | Get user participation analytics | Retrieves page view activity and participation details for a specific student enrolled in a designated course. |
| `CANVAS_GET_USER_PROFILE` | Get User Profile | Retrieves profile information for an existing canvas user. |
| `CANVAS_GRADE_COMMENT_SUBMISSION` | Grade or comment on a submission | Updates a student's assignment submission with a grade, comment, sticker, or status change; requires `course id`, `assignment id`, `user id`, and at least one update field. |
| `CANVAS_LIST_ACCOUNTS_FOR_COURSE_ADMINS` | List Accounts for Course Admins | Retrieves canvas accounts visible to the current user due to their course-level administrative roles; no request parameters are needed. |
| `CANVAS_LIST_ALL_FOLDERS` | List all folders | Retrieves the first page of folders for a specified canvas course id; this action is scoped to courses only. |
| `CANVAS_LIST_APPOINTMENT_GROUPS` | List appointment groups | Retrieves a list of canvas appointment groups based on specified filters; any provided `context codes` must be valid and accessible by the user. |
| `CANVAS_LIST_ASSIGNMENT_SUBMISSIONS` | List assignment submissions | Retrieves submissions for a specific assignment within a course, optionally including related resources or grouping by student group for group assignments. supports pagination to retrieve more than the default 10 submissions. |
| `CANVAS_LIST_AVAILABLE_REPORTS` | List Available Reports | Lists available reports (including those that can be or have been generated) for a valid canvas account id. |
| `CANVAS_LIST_CALENDAR_EVENTS_FOR_USER` | List calendar events for a user | Retrieves calendar events and assignments for a specific user from canvas lms, supporting extensive filtering options detailed in the request schema. |
| `CANVAS_LIST_COMM_MESSAGES` | List communication messages | Retrieves communication messages from canvas. |
| `CANVAS_LIST_COMMUNICATION_CHANNELS` | List communication channels | Retrieves a list of communication channels associated with a specific user in canvas. |
| `CANVAS_LIST_CONTENT_EXPORTS` | List content exports | Retrieves a paginated list of content exports from canvas for a specified, existing course. |
| `CANVAS_LIST_COURSES` | List courses | Retrieves a list of the current user's courses from canvas, optionally filtered by enrollment type and state. |
| `CANVAS_LIST_COURSES_FOR_USER` | List Courses for a User | Retrieves a list of courses in canvas for a specified `user id`, requiring observer or admin permissions to view courses for others. |
| `CANVAS_LIST_COURSE_USERS` | List Course Users | Retrieves a paginated list of users for a given canvas `course id` (which must be an existing course), supporting various filtering, sorting, and data inclusion options. |
| `CANVAS_LIST_DISCUSSION_ENTRIES` | List Discussion Entries | Tool to retrieve paginated discussion entries for a specific discussion topic in a course. use when needing to list all posts and replies under a given topic, supports pagination. |
| `CANVAS_LIST_DISCUSSION_TOPICS` | List Discussion Topics | Retrieves a paginated list of discussion topics or announcements for a specified course. |
| `CANVAS_LIST_FILES` | List Files | Fetches metadata (id, name, size, type, urls) for all files within a specified canvas course. |
| `CANVAS_LIST_FOLDERS` | List folders | Retrieves a list of immediate sub-folders within the specified `folder id`. |
| `CANVAS_LIST_PAGES_FOR_COURSE` | List pages for a course | Retrieves a list of wiki pages associated with a specific, existing course in canvas. |
| `CANVAS_LIST_QUIZZES_IN_COURSE` | List Quizzes in Course | Retrieves a paginated list of quizzes for a specified, valid canvas course, optionally filtering by a search term in the quiz title. |
| `CANVAS_LIST_SENT_CONTENT_SHARES` | List sent content shares | Retrieves content shares sent by the specified user to other users or courses within canvas. |
| `CANVAS_LIST_SUBMISSIONS` | List submissions | Fetches gradebook history submissions for a specific course, assignment, grader, and date from canvas. |
| `CANVAS_LIST_SUBMISSIONSFOR_MULTIPLE_ASSIGNMENTS` | List submissions for multiple assignments | Retrieves submissions from a canvas course for specified assignments and/or students; the course must be accessible. |
| `CANVAS_LIST_UNCOLLATED_SUBMISSION_VERSIONS` | List uncollated submission versions | Retrieves a feed of uncollated submission versions from the gradebook history for a course; any provided `assignment id` must be valid for the course, and any `user id` must be for a user enrolled in the course. |
| `CANVAS_LIST_USERS_IN_ACCOUNT` | List users in account | Use this action to retrieve all users associated with a specific, existing canvas account id. |
| `CANVAS_REPLY_TO_DISCUSSION_ENTRY` | Reply to discussion entry | Tool to reply to a discussion entry. use when you need to send a message to a discussion entry with optional attachments. |
| `CANVAS_RETRIEVE_ENROLLMENT_TERM` | Retrieve enrollment term | Retrieves detailed information for a specific enrollment term within a given root account in canvas. |
| `CANVAS_START_REPORT` | Start a Report | Initiates an asynchronous report generation for a canvas account, using a valid report type for the account; the response confirms initiation and may include progress tracking details. |
| `CANVAS_TRANSLATE_FILE_REFERENCE` | Translate File Reference | Resolves a file's migration id to its current representation within a specific canvas course. |
| `CANVAS_UPDATE_APPOINTMENT_GROUP` | Update Appointment Group | Updates an existing canvas appointment group by its id; only provided fields are modified, but `publish` defaults to `false` if omitted. the `appointment group id` must be valid. |
| `CANVAS_UPDATE_COURSE` | Update course | Updates an existing course, specified by its id, with new attributes or triggers a lifecycle event like 'conclude' or 'delete'. |
| `CANVAS_UPDATE_COURSE_SETTINGS` | Update course settings | Updates various settings for an existing course in canvas, identified by `course id`. |
| `CANVAS_UPDATE_FILE` | Update file | Modifies an existing file's name or relocates it to a new parent folder; the target folder, if specified, must be valid and in the file's original context. |
| `CANVAS_UPDATE_PAGE_FOR_COURSE` | Update page for a course | Updates an existing wiki page in a canvas course; if setting as front page, it must also be or be made published. |
| `CANVAS_UPDATE_QUIZ_SUBMISSION_SCORES` | Update quiz submission scores | Updates scores, comments for questions, and/or applies fudge points to a specific quiz submission attempt; the attempt must be completed and referenced by valid, existing course, quiz, and submission ids. |
| `CANVAS_UPDATE_USER_SETTINGS` | Update User Settings | Updates a canvas user's preferences for various interface elements and content interaction behaviors. |
| `CANVAS_UPLOAD_COURSE_FILE` | Upload a course file | Uploads a file to an accessible canvas course, optionally to a specific folder (created if a non-existent `parent folder path` is provided) and with defined behavior for duplicate filenames. |
| `CANVAS_UPLOAD_SUBMISSION_FILE` | Upload submission file | Uploads a submission file for an assignment in a canvas course for a specified `user id`; this user must be enrolled, the assignment open for them, and 'masquerade' permissions may be needed if `user id` isn't 'self'. |

## Supported Triggers

| Trigger slug | Name | Description |
|---|---|---|
| `CANVAS_ASSIGNMENT_GRADED_TRIGGER` | Canvas Assignment Graded | Polls Canvas for newly graded submissions for a specific assignment. |
| `CANVAS_NEW_ASSIGNMENT_SUBMISSION_TRIGGER` | New Canvas Assignment Submission | Polls Canvas for new submissions to a specific assignment. |
| `CANVAS_NEW_CANVAS_DISCUSSION_MESSAGE_TRIGGER` | New Canvas Discussion Message | Polls Canvas discussion topics for new messages. |
| `CANVAS_NEW_CANVAS_DISCUSSION_TRIGGER` | New Canvas Discussion Topic | Polls a Canvas course for new discussion topics. |
| `CANVAS_NEW_COURSE_CREATED_TRIGGER` | New Course Created for User | Polls Canvas for newly created courses for a specific user. |
| `CANVAS_NEW_FILE_UPLOADED_TRIGGER` | New Canvas File Upload | Polls a Canvas course for new file uploads. |

## Creating MCP Server - Stand-alone vs Composio SDK

The Canvas MCP server is an implementation of the Model Context Protocol that connects your AI agent to Canvas. It provides structured and secure access so your agent can perform Canvas operations on your behalf through a secure, permission-based interface.
With Composio's managed implementation, you don't have to create your own developer app. For production, if you're building an end product, we recommend using your own credentials. The managed server helps you prototype fast and go from 0-1 faster.

## Step-by-step Guide

### 1. Prerequisites

Before you begin, make sure you have:
- Node.js and npm installed
- A Composio account with API key
- An OpenAI API key

### 1. Getting API Keys for OpenAI and Composio

OpenAI API Key
- Go to the [OpenAI dashboard](https://platform.openai.com/settings/organization/api-keys) and create an API key. You'll need credits to use the models, or you can connect to another model provider.
- Keep the API key safe.
Composio API Key
- Log in to the [Composio dashboard](https://dashboard.composio.dev?utm_source=toolkits&utm_medium=framework_docs).
- Navigate to your API settings and generate a new API key.
- Store this key securely as you'll need it for authentication.

### 2. Install required dependencies

First, install the necessary packages for your project.
What you're installing:
- @ai-sdk/openai: Vercel AI SDK's OpenAI provider
- @ai-sdk/mcp: MCP client for Vercel AI SDK
- @composio/core: Composio SDK for tool integration
- ai: Core Vercel AI SDK
- dotenv: Environment variable management
```bash
npm install @ai-sdk/openai @ai-sdk/mcp @composio/core ai dotenv
```

### 3. Set up environment variables

Create a .env file in your project root.
What's needed:
- OPENAI_API_KEY: Your OpenAI API key for GPT model access
- COMPOSIO_API_KEY: Your Composio API key for tool access
- COMPOSIO_USER_ID: A unique identifier for the user session
```bash
OPENAI_API_KEY=your_openai_api_key_here
COMPOSIO_API_KEY=your_composio_api_key_here
COMPOSIO_USER_ID=your_user_id_here
```

### 4. Import required modules and validate environment

What's happening:
- We're importing all necessary libraries including Vercel AI SDK's OpenAI provider and Composio
- The dotenv/config import automatically loads environment variables
- The MCP client import enables connection to Composio's tool server
```typescript
import "dotenv/config";
import { openai } from "@ai-sdk/openai";
import { Composio } from "@composio/core";
import * as readline from "readline";
import { streamText, type ModelMessage, stepCountIs } from "ai";
import { createMCPClient } from "@ai-sdk/mcp";

const composioAPIKey = process.env.COMPOSIO_API_KEY;
const composioUserID = process.env.COMPOSIO_USER_ID;

if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set");
if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set");

const composio = new Composio({
  apiKey: composioAPIKey,
});
```

### 5. Create Tool Router session and initialize MCP client

What's happening:
- We're creating a Tool Router session that gives your agent access to Canvas tools
- The create method takes the user ID and specifies which toolkits should be available
- The returned mcp object contains the URL and authentication headers needed to connect to the MCP server
- This session provides access to all Canvas-related tools through the MCP protocol
```typescript
async function main() {
  // Create a tool router session for the user
  const session = await composio.create(composioUserID!, {
    toolkits: ["canvas"],
  });

  const mcpUrl = session.mcp.url;
```

### 6. Connect to MCP server and retrieve tools

What's happening:
- We're creating an MCP client that connects to our Composio Tool Router session via HTTP
- The mcp.url provides the endpoint, and mcp.headers contains authentication credentials
- The type: "http" is important - Composio requires HTTP transport
- tools() retrieves all available Canvas tools that the agent can use
```typescript
const mcpClient = await createMCPClient({
  transport: {
    type: "http",
    url: mcpUrl,
    headers: session.mcp.headers, // Authentication headers for the Composio MCP server
  },
});

const tools = await mcpClient.tools();
```

### 7. Initialize conversation and CLI interface

What's happening:
- We initialize an empty messages array to maintain conversation history
- A readline interface is created to accept user input from the command line
- Instructions are displayed to guide the user on how to interact with the agent
```typescript
let messages: ModelMessage[] = [];

console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
console.log(
  "Ask any questions related to canvas, like summarize my last 5 emails, send an email, etc... :)))\n",
);

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  prompt: "> ",
});

rl.prompt();
```

### 8. Handle user input and stream responses with real-time tool feedback

What's happening:
- We use streamText instead of generateText to stream responses in real-time
- toolChoice: "auto" allows the model to decide when to use Canvas tools
- stopWhen: stepCountIs(10) allows up to 10 steps for complex multi-tool operations
- onStepFinish callback displays which tools are being used in real-time
- We iterate through the text stream to create a typewriter effect as the agent responds
- The complete response is added to conversation history to maintain context
- Errors are caught and displayed with helpful retry suggestions
```typescript
rl.on("line", async (userInput: string) => {
  const trimmedInput = userInput.trim();

  if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) {
    console.log("\nGoodbye!");
    rl.close();
    process.exit(0);
  }

  if (!trimmedInput) {
    rl.prompt();
    return;
  }

  messages.push({ role: "user", content: trimmedInput });
  console.log("\nAgent is thinking...\n");

  try {
    const stream = streamText({
      model: openai("gpt-5"),
      messages,
      tools,
      toolChoice: "auto",
      stopWhen: stepCountIs(10),
      onStepFinish: (step) => {
        for (const toolCall of step.toolCalls) {
          console.log(`[Using tool: ${toolCall.toolName}]`);
          }
          if (step.toolCalls.length > 0) {
            console.log(""); // Add space after tool calls
          }
        },
      });

      for await (const chunk of stream.textStream) {
        process.stdout.write(chunk);
      }

      console.log("\n\n---\n");

      // Get final result for message history
      const response = await stream.response;
      if (response?.messages?.length) {
        messages.push(...response.messages);
      }
    } catch (error) {
      console.error("\nAn error occurred while talking to the agent:");
      console.error(error);
      console.log(
        "\nYou can try again or restart the app if it keeps happening.\n",
      );
    } finally {
      rl.prompt();
    }
  });

  rl.on("close", async () => {
    await mcpClient.close();
    console.log("\n👋 Session ended.");
    process.exit(0);
  });
}

main().catch((err) => {
  console.error("Fatal error:", err);
  process.exit(1);
});
```

## Complete Code

```typescript
import "dotenv/config";
import { openai } from "@ai-sdk/openai";
import { Composio } from "@composio/core";
import * as readline from "readline";
import { streamText, type ModelMessage, stepCountIs } from "ai";
import { createMCPClient } from "@ai-sdk/mcp";

const composioAPIKey = process.env.COMPOSIO_API_KEY;
const composioUserID = process.env.COMPOSIO_USER_ID;

if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set");
if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set");

const composio = new Composio({
  apiKey: composioAPIKey,
});

async function main() {
  // Create a tool router session for the user
  const session = await composio.create(composioUserID!, {
    toolkits: ["canvas"],
  });

  const mcpUrl = session.mcp.url;

  const mcpClient = await createMCPClient({
    transport: {
      type: "http",
      url: mcpUrl,
      headers: session.mcp.headers, // Authentication headers for the Composio MCP server
    },
  });

  const tools = await mcpClient.tools();

  let messages: ModelMessage[] = [];

  console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
  console.log(
    "Ask any questions related to canvas, like summarize my last 5 emails, send an email, etc... :)))\n",
  );

  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    prompt: "> ",
  });

  rl.prompt();

  rl.on("line", async (userInput: string) => {
    const trimmedInput = userInput.trim();

    if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) {
      console.log("\nGoodbye!");
      rl.close();
      process.exit(0);
    }

    if (!trimmedInput) {
      rl.prompt();
      return;
    }

    messages.push({ role: "user", content: trimmedInput });
    console.log("\nAgent is thinking...\n");

    try {
      const stream = streamText({
        model: openai("gpt-5"),
        messages,
        tools,
        toolChoice: "auto",
        stopWhen: stepCountIs(10),
        onStepFinish: (step) => {
          for (const toolCall of step.toolCalls) {
            console.log(`[Using tool: ${toolCall.toolName}]`);
          }
          if (step.toolCalls.length > 0) {
            console.log(""); // Add space after tool calls
          }
        },
      });

      for await (const chunk of stream.textStream) {
        process.stdout.write(chunk);
      }

      console.log("\n\n---\n");

      // Get final result for message history
      const response = await stream.response;
      if (response?.messages?.length) {
        messages.push(...response.messages);
      }
    } catch (error) {
      console.error("\nAn error occurred while talking to the agent:");
      console.error(error);
      console.log(
        "\nYou can try again or restart the app if it keeps happening.\n",
      );
    } finally {
      rl.prompt();
    }
  });

  rl.on("close", async () => {
    await mcpClient.close();
    console.log("\n👋 Session ended.");
    process.exit(0);
  });
}

main().catch((err) => {
  console.error("Fatal error:", err);
  process.exit(1);
});
```

## Conclusion

You've successfully built a Canvas agent using the Vercel AI SDK with streaming capabilities! This implementation provides a powerful foundation for building AI applications with natural language interfaces and real-time feedback.
Key features of this implementation:
- Real-time streaming responses for a better user experience with typewriter effect
- Live tool execution feedback showing which tools are being used as the agent works
- Dynamic tool loading through Composio's Tool Router with secure authentication
- Multi-step tool execution with configurable step limits (up to 10 steps)
- Comprehensive error handling for robust agent execution
- Conversation history maintenance for context-aware responses
You can extend this further by adding custom error handling, implementing specific business logic, or integrating additional Composio toolkits to create multi-app workflows.

## How to build Canvas MCP Agent with another framework

- [OpenAI Agents SDK](https://composio.dev/toolkits/canvas/framework/open-ai-agents-sdk)
- [Claude Agent SDK](https://composio.dev/toolkits/canvas/framework/claude-agents-sdk)
- [Claude Code](https://composio.dev/toolkits/canvas/framework/claude-code)
- [Claude Cowork](https://composio.dev/toolkits/canvas/framework/claude-cowork)
- [Codex](https://composio.dev/toolkits/canvas/framework/codex)
- [OpenClaw](https://composio.dev/toolkits/canvas/framework/openclaw)
- [Hermes](https://composio.dev/toolkits/canvas/framework/hermes-agent)
- [CLI](https://composio.dev/toolkits/canvas/framework/cli)
- [Google ADK](https://composio.dev/toolkits/canvas/framework/google-adk)
- [LangChain](https://composio.dev/toolkits/canvas/framework/langchain)
- [Mastra AI](https://composio.dev/toolkits/canvas/framework/mastra-ai)
- [LlamaIndex](https://composio.dev/toolkits/canvas/framework/llama-index)
- [CrewAI](https://composio.dev/toolkits/canvas/framework/crew-ai)

## Related Toolkits

- [Accredible certificates](https://composio.dev/toolkits/accredible_certificates) - Accredible Certificates is a platform for creating and managing digital certificates, badges, and blockchain credentials. It streamlines issuing, tracking, and verifying professional achievements for organizations of any size.
- [Api bible](https://composio.dev/toolkits/api_bible) - API.Bible is a developer platform for Scripture content and passage search. Easily integrate Bible verses and translations into your apps or chatbots.
- [Blackboard](https://composio.dev/toolkits/blackboard) - Blackboard is a digital learning platform for higher education and schools, offering tools to manage courses, track engagement, and deliver interactive content. It helps institutions improve student outcomes through actionable analytics and in-app guidance.
- [Certifier](https://composio.dev/toolkits/certifier) - Certifier is a platform for creating, managing, and issuing digital certificates and credentials. Organizations use it to automate and secure the entire credentialing process.
- [Classmarker](https://composio.dev/toolkits/classmarker) - ClassMarker is a professional online quiz maker for business and education. It provides instant grading, flexible test design, and in-depth reporting.
- [Coassemble](https://composio.dev/toolkits/coassemble) - Coassemble is a flexible platform for building, managing, and delivering online training courses. It helps teams streamline onboarding, upskilling, and ongoing learning for employees or partners.
- [D2lbrightspace](https://composio.dev/toolkits/d2lbrightspace) - D2L Brightspace is a learning management system for delivering and managing online courses and assessments. It helps educators streamline digital teaching, assignments, and communication with students.
- [Dictionary api](https://composio.dev/toolkits/dictionary_api) - Dictionary api is the Merriam-Webster API providing rich dictionary and thesaurus data for developers. Instantly access definitions, synonyms, etymologies, and audio pronunciations in your apps.
- [Google Classroom](https://composio.dev/toolkits/google_classroom) - Google Classroom is a free web service for educators and students to manage assignments and communication. It streamlines classroom collaboration and grading, making teaching simpler and more connected.
- [Lessonspace](https://composio.dev/toolkits/lessonspace) - Lessonspace is an online collaborative classroom platform offering video, whiteboards, and real-time interaction for educators and students. It streamlines remote teaching with integrated tools for engagement and communication.
- [Linguapop](https://composio.dev/toolkits/linguapop) - Linguapop is a web platform for administering language placement tests in English, German, Spanish, Italian, and French. It helps schools and organizations efficiently manage multilingual assessments and analyze results.
- [Memberspot](https://composio.dev/toolkits/memberspot) - Memberspot is an online course and video-hosting platform for business learning. It helps teams manage, deliver, and track knowledge efficiently.
- [Membervault](https://composio.dev/toolkits/membervault) - Membervault is a platform for hosting courses, memberships, and digital products in one place. It helps you build stronger relationships with your audience by centralizing digital offers and customer engagement.
- [Gmail](https://composio.dev/toolkits/gmail) - Gmail is Google's email service with powerful spam protection, search, and G Suite integration. It keeps your inbox organized and makes communication fast and reliable.
- [Google Calendar](https://composio.dev/toolkits/googlecalendar) - Google Calendar is a time management service for scheduling meetings, events, and reminders. It streamlines personal and team organization with integrated notifications and sharing options.
- [Google Drive](https://composio.dev/toolkits/googledrive) - Google Drive is a cloud storage platform for uploading, sharing, and collaborating on files. It's perfect for keeping your documents accessible and organized across devices.
- [Outlook](https://composio.dev/toolkits/outlook) - Outlook is Microsoft's email and calendaring platform for unified communications and scheduling. It helps users stay organized with powerful email, contacts, and calendar management.
- [Twitter](https://composio.dev/toolkits/twitter) - Twitter is a social media platform for sharing real-time updates, conversations, and news. Stay connected, informed, and engaged with communities worldwide.
- [Google Sheets](https://composio.dev/toolkits/googlesheets) - Google Sheets is a cloud-based spreadsheet tool for real-time collaboration and data analysis. It lets teams work together from anywhere, updating information instantly.
- [Supabase](https://composio.dev/toolkits/supabase) - Supabase is an open-source backend platform offering scalable Postgres databases, authentication, storage, and real-time APIs. It lets developers build modern apps without managing infrastructure.

## Frequently Asked Questions

### What are the differences in Tool Router MCP and Canvas MCP?

With a standalone Canvas MCP server, the agents and LLMs can only access a fixed set of Canvas tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Canvas and many other apps based on the task at hand, all through a single MCP endpoint.

### Can I use Tool Router MCP with Vercel AI SDK v6?

Yes, you can. Vercel AI SDK v6 fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Canvas tools.

### Can I manage the permissions and scopes for Canvas while using Tool Router?

Yes, absolutely. You can configure which Canvas scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

### How safe is my data with Composio Tool Router?

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Canvas data and credentials are handled as safely as possible.

---
[See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)