تواصل معنا

Chrome Extension for AI-Powered Canvas Assistance

Overview

Navigating complex documentation can be time-consuming — especially when you just need a clear answer, fast.
To solve this, we built a Chrome extension that acts as an AI assistant for Canvas users, offering instant, context-aware answers directly within the browser.

By integrating n8n automations, Supabase vector storage, and AI retrieval-augmented generation (RAG), this tool helps users interact naturally with Canvas documentation — without ever needing to open a help page.

The Idea

As someone who works closely with educators and students using Canvas, I noticed a recurring problem: users often get stuck searching through multiple pages of guides for simple solutions.

That led to a clear goal — make Canvas documentation conversational.

I wanted users to be able to ask questions like “How do I create a new assignment group?” or “Where do I change course settings?” and receive direct, accurate responses instantly, without leaving their workspace.

Product Design & Development

The project began with designing a clean, lightweight chat interface that integrates directly into the Chrome toolbar.
Using HTML, CSS, and JavaScript, I built a fast, responsive interface that connects seamlessly to an n8n AI automation pipeline.

The challenge was to ensure real-time interaction and minimal latency — which required careful prompt design and efficient backend communication between the extension and n8n.

From concept to prototype, the goal remained consistent: build a practical, minimal, and intelligent assistant for daily Canvas users.

Automation & AI Architecture

This project’s power lies in its automation pipeline and retrieval system.

  • n8n Automations: Designed to handle message routing, system prompts, and communication between the Chrome extension and AI model.

  • Supabase Vector Storage: Populated with the entire Canvas documentation, allowing the agent to retrieve contextually relevant information through similarity search.

  • Custom System Prompts: Carefully engineered to ensure the AI responds with accuracy and relevance, formatted for quick comprehension.

To populate the vector database, I created an n8n automation that scrapes, cleans, and uploads Canvas guides into Supabase automatically — turning hundreds of static pages into a searchable, AI-readable knowledge base.

AI Interaction & Functionality

When users open the extension, they’re greeted with a simple chat interface.
They can ask any question related to Canvas, and the AI agent retrieves and summarizes information directly from the documentation stored in the vector database.

This creates a seamless, AI-driven support experience — no documentation browsing required, no wasted time.

While currently designed as a standalone assistant, the system can be further expanded by giving the agent direct API access to Canvas, enabling it to perform live actions such as retrieving course data or guiding users through real workflows.

Tech Stack

  • Chrome Extension Development — HTML, JavaScript, and Manifest v3

  • n8n Automations — for message routing, prompt management, and vector querying

  • Supabase — for vector storage and authentication

  • Figma — for UI mockups and interaction design

This stack provided a lean yet powerful infrastructure for AI-enhanced user support.

Outcome

The final product is an AI-powered Chrome extension that transforms the way users interact with Canvas documentation.
It bridges the gap between static guides and conversational support — creating a tool that’s both practical and scalable.

This project highlights the potential of AI workflow automation, retrieval-based systems, and browser-native interfaces in simplifying complex support experiences.

Future Enhancements

The next step is integrating Canvas API access, allowing the AI not only to answer questions but also to perform real-time actions like checking course status or configuring settings — making it a fully interactive Canvas assistant.