How to integrate Canvas MCP with Vercel AI SDK

BOOK A CALLGET STARTED FOR FREE
Framework Integration Gradient
Canvas Logo
Vercel AI SDK Logo
divider

Introduction

This guide walks you through connecting Canvas to Vercel AI SDK using the Composio tool router. By the end, you'll have a working Canvas agent that can create a new assignment for my math course, send a message to all students in biology 101, schedule office hours as a calendar event, post a discussion entry in the literature forum 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.

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
  • Step Counting: Control multi-step tool execution
  • 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 & Triggers

Tools
Triggers
Create account notificationCreates a global notification within a canvas account, ensuring `end at` is after `start at` and any specified `notification roles` are valid.
Create appointment groupCreates a new appointment group in canvas for schedulable time slots within specified course or group contexts.
Create an assignmentCreates a new assignment within a specified course in canvas lms.
Create assignment overrideCreates 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.
Create Calendar EventCreates a calendar event with options for recurrence (finite `rrule` series only), section-specific timings, and blackout dates within a specified context.
Create communication channelCreates a new communication channel (e.
Create content shareShares a canvas content item to specified users, if the sender has necessary permissions and receiver ids are valid.
Create conversationUse 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.
Create a courseCreates a new course in canvas within a specified account, with comprehensive configuration options.
Create discussion entryTool to create a new entry in a canvas discussion topic.
Create discussion topicCreates a new discussion topic in a specified canvas course, allowing comprehensive configuration of its content, type, publication settings, engagement features, and associations.
Create enrollmentEnrolls a user in a canvas course with a specified role and status; `associated user id` is required if `enrollment type` is 'observerenrollment'.
Create FolderCreates a new folder in canvas within a specified context (e.
Create ModuleCreates a new organizational module within a specified canvas lms course, with options for availability, sequencing, and prerequisites.
Create a page for a courseCreates 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).
Create QuizCreates a new quiz with various settings in a specified existing canvas course; `assignment group id` applies only to graded quiz types.
Create a quiz questionCreates 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.
Delete appointment groupPermanently deletes an existing appointment group by its id; associated appointments may also be canceled or affected.
Delete an assignmentSoft-deletes a specific assignment within a course, returning the assignment object with its `workflow state` updated to 'deleted'.
Delete a folderPermanently deletes an existing folder specified by its unique id.
Delete quizPermanently deletes the quiz identified by `quiz id` from the course identified by `course id`; this action cannot be undone.
Get current gradesFetches current, aggregated grade data from canvas analytics for a specified account id.
Get term grade dataRetrieves department-level aggregated grade data for a specific academic term within a canvas account.
Edit assignmentUpdates an existing assignment in a canvas course (identified by `course id` and `assignment id`); only attributes explicitly provided in the request are modified.
Edit a quizModifies an existing canvas quiz; only attributes with provided values in the request are updated.
Export contentUse to initiate an asynchronous export of content (e.
Fetch DataFetches a specific category of canvas data (e.
Get Canvas accountsRetrieves all canvas accounts accessible to the authenticated user.
Get all assignmentsRetrieves assignments for a specified canvas course.
Get all usersRetrieves a list of users for a specified canvas `account id` (use 'self' for the current user's root account), supporting filtering, sorting, and pagination.
Get assignmentRetrieves detailed information for a specific assignment within a given course in canvas.
Get Assignment RubricFetches the detailed rubric for a specified assignment within a canvas course; fails if the assignment has no associated rubric.
Get Course ActivityRetrieves daily activity analytics, such as page views and participation events, for a specified canvas course.
Get Current UserRetrieves detailed information about the currently authenticated user from the canvas lms.
Get department-level completed statisticsRetrieves numeric statistics for all completed courses for a specified canvas account id; the account must exist.
Get department level current statisticsFetches a snapshot of current numerical statistics for a canvas account, requiring its valid id.
Get department level completed gradesRetrieves 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.
Get department level term statisticsRetrieves department-level academic term statistics (e.
Get enrollment by IDRetrieves a specific enrollment by its id within a given account.
Get gradebook history daysRetrieves a chronological list of dates with grading activity and the active graders for a specified course.
Get Page for a CourseRetrieves a specific content page (wiki or content page) by its url or numeric id from a specified canvas course.
Get quiz submissionsRetrieves all submissions for a specific quiz within a course; ensure `course id` and `quiz id` are valid and the quiz belongs to the course.
Get report statusRetrieves the status of a previously initiated report in a canvas account, specified by its type and id.
Get a single courseRetrieves 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.
Get single submissionRetrieves a specific submission for an assignment made by a particular user within a designated course.
Get submission filesRetrieves 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.
Get user assignment analyticsFetches detailed assignment-level analytics for a specific student in a designated course, including submission details and class performance statistics.
Get user course progressRetrieves the academic progress of a specific user within a given course.
Get user participation analyticsRetrieves page view activity and participation details for a specific student enrolled in a designated course.
Get User ProfileRetrieves profile information for an existing canvas user.
Grade or comment on a submissionUpdates 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.
List Accounts for Course AdminsRetrieves canvas accounts visible to the current user due to their course-level administrative roles; no request parameters are needed.
List all foldersRetrieves the first page of folders for a specified canvas course id; this action is scoped to courses only.
List appointment groupsRetrieves a list of canvas appointment groups based on specified filters; any provided `context codes` must be valid and accessible by the user.
List assignment submissionsRetrieves submissions for a specific assignment within a course, optionally including related resources or grouping by student group for group assignments.
List Available ReportsLists available reports (including those that can be or have been generated) for a valid canvas account id.
List calendar events for a userRetrieves calendar events and assignments for a specific user from canvas lms, supporting extensive filtering options detailed in the request schema.
List communication messagesRetrieves communication messages from canvas.
List communication channelsRetrieves a list of communication channels associated with a specific user in canvas.
List content exportsRetrieves a paginated list of content exports from canvas for a specified, existing course.
List coursesRetrieves a list of the current user's courses from canvas, optionally filtered by enrollment type and state.
List Courses for a UserRetrieves a list of courses in canvas for a specified `user id`, requiring observer or admin permissions to view courses for others.
List Course UsersRetrieves 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.
List Discussion EntriesTool to retrieve paginated discussion entries for a specific discussion topic in a course.
List Discussion TopicsRetrieves a paginated list of discussion topics or announcements for a specified course.
List FilesFetches metadata (id, name, size, type, urls) for all files within a specified canvas course.
List foldersRetrieves a list of immediate sub-folders within the specified `folder id`.
List pages for a courseRetrieves a list of wiki pages associated with a specific, existing course in canvas.
List Quizzes in CourseRetrieves a paginated list of quizzes for a specified, valid canvas course, optionally filtering by a search term in the quiz title.
List sent content sharesRetrieves content shares sent by the specified user to other users or courses within canvas.
List submissionsFetches gradebook history submissions for a specific course, assignment, grader, and date from canvas.
List submissions for multiple assignmentsRetrieves submissions from a canvas course for specified assignments and/or students; the course must be accessible.
List uncollated submission versionsRetrieves 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.
List users in accountUse this action to retrieve all users associated with a specific, existing canvas account id.
Reply to discussion entryTool to reply to a discussion entry.
Retrieve enrollment termRetrieves detailed information for a specific enrollment term within a given root account in canvas.
Start a ReportInitiates 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.
Translate File ReferenceResolves a file's migration id to its current representation within a specific canvas course.
Update Appointment GroupUpdates an existing canvas appointment group by its id; only provided fields are modified, but `publish` defaults to `false` if omitted.
Update courseUpdates an existing course, specified by its id, with new attributes or triggers a lifecycle event like 'conclude' or 'delete'.
Update course settingsUpdates various settings for an existing course in canvas, identified by `course id`.
Update fileModifies 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.
Update page for a courseUpdates an existing wiki page in a canvas course; if setting as front page, it must also be or be made published.
Update quiz submission scoresUpdates 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.
Update User SettingsUpdates a canvas user's preferences for various interface elements and content interaction behaviors.
Upload a course fileUploads 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.
Upload submission fileUploads 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'.

What is the Composio tool router, and how does it fit here?

What is Tool Router?

Composio's Tool Router helps agents find the right tools for a task at runtime. You can plug in multiple toolkits (like Gmail, HubSpot, and GitHub), and the agent will identify the relevant app and action to complete multi-step workflows. This can reduce token usage and improve the reliability of tool calls. Read more here: Getting started with Tool Router

The tool router generates a secure MCP URL that your agents can access to perform actions.

How the Tool Router works

The Tool Router follows a three-phase workflow:

  1. Discovery: Searches for tools matching your task and returns relevant toolkits with their details.
  2. Authentication: Checks for active connections. If missing, creates an auth config and returns a connection URL via Auth Link.
  3. Execution: Executes the action using the authenticated connection.

Step-by-step Guide

Prerequisites

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

Getting API Keys for OpenAI and Composio

OpenAI API Key
  • Go to the OpenAI dashboard 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.
  • Navigate to your API settings and generate a new API key.
  • Store this key securely as you'll need it for authentication.

Install required dependencies

bash
npm install @ai-sdk/openai @ai-sdk/mcp @composio/core ai dotenv

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

Set up environment variables

bash
OPENAI_API_KEY=your_openai_api_key_here
COMPOSIO_API_KEY=your_composio_api_key_here
COMPOSIO_USER_ID=your_user_id_here

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

Import required modules and validate environment

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 { experimental_createMCPClient as 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,
});
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

Create Tool Router session and initialize MCP client

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;
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

Connect to MCP server and retrieve tools

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();
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

Initialize conversation and CLI interface

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();
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

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

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);
});
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

Complete Code

Here's the complete code to get you started with Canvas and Vercel AI SDK:

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 { experimental_createMCPClient as 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

OpenAI Agents SDK

Use Canvas MCP with OpenAI Agents SDK

Claude Agent SDK

Claude Agent SDK

Use Canvas MCP with Claude Agent SDK

Google ADK

Google ADK

Use Canvas MCP with Google ADK

LangChain

LangChain

Use Canvas MCP with LangChain

Mastra AI

Mastra AI

Use Canvas MCP with Mastra AI

LlamaIndex

LlamaIndex

Use Canvas MCP with LlamaIndex

CrewAI

CrewAI

Use Canvas MCP with CrewAI

FAQ

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?

Yes, you can. Vercel AI SDK 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.

Used by agents from

Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai

Never worry about agent reliability

We handle tool reliability, observability, and security so you never have to second-guess an agent action.

Book a call↗Get started for free