Overview

Docagram uses Chrome's built-in AI to help you visualize content on the web. It uses the Summarization and Prompt APIs to extract relationships from text content and then converts those relationships into Mermaid diagrams.

Built-In AI

This project uses the following APIs:

• Prompt API
• Summarization API
• Writer and Rewriter APIs (Doesn't work, using Prompt API instead)

All docs for the built-in AI APIs can be found here.

Setup

Enable the following flags in Chrome:

• chrome://flags/#optimization-guide-on-device-model
• chrome://flags/#prompt-api-for-gemini-nano
• chrome://flags/#summarization-api-for-gemini-nano
• chrome://flags/#writer-api-for-gemini-nano
• chrome://flags/#rewriter-api-for-gemini-nano

To optionally use the Gemini Pro model for analyzing pages, add a .env file at the root of your project with the following key:

VITE_GOOGLE_API_KEY=

Development

Run the following to have Vite rebuild the project on all changes:

npm run dev

In Chrome Canary, load the unpacked extension from the /dist folder.

Want to build a Chrome Extension?

This repository demonstrates how to create a Chrome extension using React, TypeScript, TailwindCSS, and Vite.

More details can be found in this blog post:

https://joemuller.com/posts/create-a-chrome-extension-with-react-typescript-and-tailwindcss/