Page-Aware AI: How Your Agent Can Read and Edit Page Content

Most AI agents are blind. They sit in a corner of your page, completely unaware of what the visitor is looking at. Ask them about the product on screen and they will give you a generic answer from their training data.

hiroi's Page Integration changes that. Your AI agent can see, read, and interact with the actual content on the page. It can highlight specific paragraphs, scroll to relevant sections, and even suggest edits — all in real time, with a visual diff the user can accept or dismiss.

How Page Integration Works

Page Integration connects your agent to specific DOM elements on your page. In the hiroi dashboard, you define fields by pointing to elements using their IDs or CSS selectors. Each field gets:

• A display name the AI uses to reference it naturally ("the story title," "the product description")
• A field type — input, textarea, content-editable, or custom CSS selector
• Permissions — read, write, highlight, scroll-to — so you control exactly what the AI can do

When a visitor asks a question, the AI receives the current content of those fields as context. No embeddings, no separate knowledge base — it reads the live page.

What the AI Can Do

Read Content

The AI can read any configured field and use its content to answer questions contextually.

A visitor on a product page asks: "What materials is this jacket made from?" Instead of a canned FAQ response, the AI reads the product description element, finds the materials section, and answers with the exact specs from the page.

Highlight Text

When the AI references specific content, it can highlight that text directly on the page. The visitor sees a yellow highlight appear on the relevant passage and the page automatically scrolls to bring it into view.

This is powerful for long-form content. A visitor reading a 3,000-word article asks "Where does the author talk about pricing?" — the AI finds the relevant paragraph, highlights it, and scrolls right to it.

Scroll to Position

The AI can scroll the page to any configured element or to specific text within an element. Combined with highlighting, this creates a guided reading experience where the AI acts as a navigator through your content.

Suggest Modifications

This is where it gets interesting. The AI can propose changes to page content with a visual diff interface. A floating panel appears showing:

• The reason for the suggested change
• The current text (red, with strikethrough)
• The suggested text (green)
• Accept and Dismiss buttons

The visitor stays in control. Nothing changes until they explicitly accept the suggestion.

Real Use Cases

Content Editors and CMS Platforms

If you build a writing tool, content editor, or CMS, Page Integration turns your agent into an AI writing agent that actually understands what the user is working on.

• "Make the opening paragraph more engaging"
• "Fix any grammar issues in the second section"
• "Suggest a better headline"

The AI reads the current content, generates the suggestion, and presents it as an inline diff. The writer accepts or dismisses with one click. We use this exact setup on YourStory.social, where the AI agent helps authors refine their stories.

E-Commerce Product Pages

Give the AI read access to your product title, description, price, and specs. Now it can answer questions like:

• "Does this come in blue?"
• "What is the difference between this model and the Pro version?"
• "Is this compatible with my existing setup?"

The answers come from the actual page content, not a separate FAQ database that might be outdated.

Documentation Sites

For developer docs or knowledge bases, Page Integration lets the AI guide readers through complex content. A developer asks "How do I authenticate API requests?" and the AI scrolls to the authentication section, highlights the relevant code block, and explains the steps.

Form Assistance

Configure the AI to read and write form fields. It can help visitors fill out complex forms by asking questions conversationally and populating fields based on the answers. Insurance applications, registration flows, multi-step wizards — all become conversational.

Setting It Up

Configuration happens in the hiroi dashboard under the Page Integration tab:

1. Add a field — provide the element ID or CSS selector
2. Name it — give it a human-readable label the AI will use
3. Set permissions — choose which actions (read, write, highlight, scroll) the AI can perform
4. Test it — use the live preview to verify the AI can access the content

The system prompt automatically includes field information so the AI knows what is available without any manual prompt engineering.

Why This Matters

The gap between "agent on a page" and "AI that understands the page" is enormous. Most agent platforms treat the widget as an isolated application — it could be on any page, on any site, and it would behave identically.

Page-aware AI breaks that pattern. The agent becomes contextual, specific, and genuinely useful. It answers questions about what the visitor is actually looking at, not what it was trained on months ago.

If your content changes daily — product listings, articles, documentation, user-generated content — a page-aware agent stays current automatically. No retraining, no re-uploading documents, no sync pipelines. It reads the page as the visitor sees it.

That is the kind of AI agent people actually want to talk to.