Aller au contenu
Cette page n’est pas encore traduite — voici la version anglaise.

Stop the Tab-Switching: Build Your Own AI Webpage Summarizer

Copying text into a chatbot tab breaks your focus. Build a four-node workflow that summarises any web page right where you read it, with a model that can run on your own device. Video tutorial included.

Dannick K.
9 avril 2026 · 2 min de lecture
PrésenterTableau

Aussi dans English

Diagram linking a live web page to an AI summary overlay
Partager
Sur cette page
  1. Watch the tutorial
  2. What the tutorial covers
  3. What you’ll build, step by step
  4. Why browser-native AI changes things
  5. Ready to start?

Are you still copying text from a web page, opening a new tab and pasting it into an AI tool just to get a summary? That “assisted copy-paste” breaks your context and adds friction. It’s time to make your browser an AI layer on the page.

The fix

Don't take the page to the AI. Bring the AI to the page.

The AI comes to you, on the page you're reading.Page text in, summary shown on the page.

Ligne animée
Version texte
  1. The fix: Don't take the page to the AI. Bring the AI to the page.

In our video tutorial, “Build an AI Webpage Summarizer (Step-by-Step Tutorial)”, we show how to build an automation that summarises any content right on the page you’re viewing.

Watch the tutorial

La vidéo se charge depuis YouTube (mode confidentialité renforcée) seulement quand vous lancez la lecture.

What the tutorial covers

It walks you through a workflow that reads the text of a live website and processes it with a large language model (LLM). Unlike AI tools that work in isolation, this workflow is context-centric: the AI works directly on what you’re looking at in your browser.

Old way of highlighting, switching tabs and pasting into ChatGPT, versus one click for an instant summary overlay

What you’ll build, step by step

The same four-node workflow is in our docs as Summarize page (LLM chain). Here it is, running:

Summarise this page in 3 bullets

DéclencheurWhen Started
PageGet All Text
IABasic LLM Chain
PageDisplay Markdown
started on this page
the article's text
3 short bullets
a summary card on the page
Chiffres d'exemple

Run it on any page, any time.Outputs per node (example values).

Workflow en direct
Version texte
  1. summarize-page-llm-chain.awf
  2. started on this page
  3. the article's text
  4. 3 short bullets
  5. a summary card on the page

The trigger

Start the workflow with one click with When Started.

Pick the content with the visual inspector

In Get All Text, use the visual picker: click a section of the page (a heading, the article body) and it fills in a precise CSS selector for the text you want summarised.

The AI step

A Basic LLM Chain sends your prompt to the model. Tip from the video: drag and drop the extracted content into your prompt to make it a dynamic expression.

Show it on the page

Display Markdown shows the summary in a card on the page. Expand it, minimise it or copy it, without switching tabs.

Run it anywhere

Save it, and it’s a reusable tool you can trigger on any website.

In the video, the model is Ollama running Granite 3 Dense on the computer; the docs example uses Web LLM, which runs a model inside the browser. Either way, the page text stays on your device. Here’s where each piece lives on the canvas:

L’éditeur de workflow avec l’exemple Summarise this page in 3 bullets : une note adhésive, puis When Started, Get All Text, Basic LLM Chain et Display Markdown alignés. Un nœud de modèle Web LLM est suspendu sous l’emplacement Model de la chaîne. La chaîne affiche un badge d’avertissement et le bouton Ready to run? indique qu’un réglage reste à renseigner.L’éditeur de workflow avec l’exemple Summarise this page in 3 bullets : une note adhésive, puis When Started, Get All Text, Basic LLM Chain et Display Markdown alignés. Un nœud de modèle Web LLM est suspendu sous l’emplacement Model de la chaîne. La chaîne affiche un badge d’avertissement et le bouton Ready to run? indique qu’un réglage reste à renseigner.

Four nodes. That's the whole summariser.Press Test Workflow to try it.

Capture guidée
Version texte
  1. 1. Read the page: Get All Text, right after the trigger.
  2. 2. Ask the AI: Your prompt, with the page text dragged in.
  3. 3. Choose the model: Web LLM in the browser, or Ollama on your computer.
  4. 4. Show the summary: A card on the page you're reading.

Visual DOM Inspector picking a page heading and filling the CSS selector of the Get All Text node

Why browser-native AI changes things

Building this summariser takes you from simple automation to agentic workflows: AI that works with what’s in front of you.

CritèreAWFlowCopy into a chatbot
Steps per summaryOne clickCopy, switch tab, paste, prompt, switch back
What the AI seesThe part of the page you pickedWhatever you pasted
Where the text goesStays on your device with a local modelTo the chatbot's servers
Pages without an APIYes: it reads the rendered pageYes, if you copy by hand
Free-form follow-up questionsChange the prompt, or use the assistantBuilt for back-and-forth chat

Chat wins for open-ended conversation.Be fair: chat apps are built for follow-ups.

Tableau comparatif
Version texte
  1. Steps per summary: AWFlow: One click; Copy into a chatbot: Copy, switch tab, paste, prompt, switch back
  2. What the AI sees: AWFlow: The part of the page you picked; Copy into a chatbot: Whatever you pasted
  3. Where the text goes: AWFlow: Stays on your device with a local model; Copy into a chatbot: To the chatbot's servers
  4. Pages without an API: AWFlow: Yes: it reads the rendered page; Copy into a chatbot: Yes, if you copy by hand
  5. Free-form follow-up questions: AWFlow: Change the prompt, or use the assistant; Copy into a chatbot: Built for back-and-forth chat
  • Privacy and control: with local models (WebLLM or Ollama), content from your browsing is processed on your device, not on outside servers.
  • Fast feedback: the workflow runs where you are; with a local model there’s no network round trip.
  • Works anywhere: on any website, even without an API, because it reads the rendered page.

Ready to start?

Stop losing time to manual research. By the end of the tutorial, you’ll have a reusable AI tool you can run on any website in one click.

À vous

Get the summariser workflow

Open it in AWFlow, pick the part of the page to read, and run it on any website.

Ouvrir dans AWFlow (s’ouvre dans un nouvel onglet)docs.awflow.io/examples/summarize-page-llm-chain.awf
Scannez pour ouvrir

Call to action. Scan the code or click the link.Opens the Summarize page (LLM chain) docs example in AWFlow's import page.

À vous
Version texte
  1. Get the summariser workflow · Open it in AWFlow, pick the part of the page to read, and run it on any website. · https://docs.awflow.io/examples/summarize-page-llm-chain.awf

In short

  1. Bring the AI to the page
  2. Trigger, read, ask, show
  3. Local models keep it private

Three. Web LLM or Ollama.On-device inference.

Récap
Version texte
  1. In short
  2. Bring the AI to the page
  3. Trigger, read, ask, show
  4. Local models keep it private

Automatisez le web où vous êtes. Gratuit, dans votre navigateur.