The Glitched Goblet Logo

The Glitched Goblet

Where Magic Meets Technology

Designing for AI Browsers: When Your User Has a Copilot

November 25, 2025

There is a new invisible user in your product.

They sit beside your human user, read your pages before they do, summarize your content, click your buttons, and sometimes even buy things or cancel subscriptions for them.

That “user” is their browser’s AI.

Chrome, Edge, Opera Neon, Perplexity’s Comet, Dia, and friends are turning the browser into a copilot that reads, explains, and acts on behalf of humans. Gemini in Chrome can already help people understand complex pages, find past sites, and is being positioned for more “agentic” tasks like booking appointments. Microsoft’s Edge Copilot will happily summarize whatever page or PDF you are looking at and answer questions about it. Opera’s Neon and Perplexity’s Comet go a step further: they execute tasks inside pages and automate multi-step workflows.

If you build for the web, your real job now is to design your site so that humans and their copilots both understand it and can use it safely.

What is an “AI browser” in practical terms?

Let’s keep it concrete. Today’s AI browsers and AI-heavy browsers roughly fall into three buckets.

Classic browsers with AI glued in

Gemini in Chrome can summarize complex info, search across tabs, and help users rediscover pages from history. Google is also pushing built-in AI APIs so web apps can run AI tasks locally without shipping their own models.

Copilot in Edge sits in the sidebar. Users can say “summarize this page” or ask specific questions like “who is quoted on this page?” and get answers based on the current tab.

These still feel like normal browsers, but with a very smart “View Source, but in English” that runs constantly.

Agentic browsers

These are built around the idea that the browser itself acts as your assistant Perplexity Comet positions itself as a personal AI assistant that can browse, research, and help with tasks across the web. Opera Neon is explicitly marketed as an “agentic browser” that interprets pages, manages tasks, and uses features like Neon Do to navigate pages and perform actions locally.

These do not just describe your page. They click through it.

New AI-centric environments

The Browser Company stopped investing in new features for Arc to focus on Dia, an AI-first browser that can interpret the entire window, copy lists across tabs, add items to carts, and send emails via text commands in the address bar.

From your site’s perspective, that means:

The “user” following your signup flow might be a human, an AI agent operating the DOM, or both cooperating.

Your frontend has to survive all three.

How AI browsers “see” your site

AI copilots do not see your cool gradients. They see a tree of elements, text, attributes, some metadata, and maybe a history of user actions.

Roughly, they consume the DOM structure and semantics. Things like headings, main, nav, footers and ARIA roles influence how AI summarizers understand page sections, just like screen readers.

Visible text, interactive elements and labels become the main signals for "what actions can I take here?" and "what is this page about?". Elements like buttons, links, and forms inputs. Depending on how you've setup your interactive elements, any fake controls like div with onClick handlers can confuse both AI agents.

Metadata and structured data like title, meta description, canonical URL, and JSON-LD (Schema.org Product, Article, FAQ, etc.) provide machine-readable hints about the page's purpose and content.

If your site is accessible, semantic, and has solid metadata, you are already doing half the work for AI browsers. It is the same work you should have done anyway, now with more payoff.

This shouldn't be a surprise to anyone but I feel like I still need to state it: "Accessibility still matters!" Screen readers and AI copilots both rely on good semantics and clear structure. If your site is a mess for assistive tech, it will also be a mess for AI agents.

Your Design goal

Can an AI explain and operate this page? If someone opened your page and asked their browser, “What is this page for?” or “How do I cancel my subscription?”. Could the AI give a clear answer? Would it be able to understand the services you offer and the actions a user can take?

Make the structure boring and explicit

Use real landmarks instead of div soup

Bad pattern:

<div class="page">
  <div class="top-bar">My SaaS</div>
  <div class="content">
    <div class="left">
      <div class="title">Billing</div>
      <div class="text">Manage your plan.</div>
    </div>
    <div class="right">
      <div class="btn" onclick="cancelPlan()">Click here</div>
    </div>
  </div>
</div>

Good pattern:

<header>
  <h1>My SaaS</h1>
  <nav aria-label="Primary navigation">
    <a href="/dashboard">Dashboard</a>
    <a href="/billing">Billing</a>
    <a href="/support">Support</a>
  </nav>
</header>

<main>
  <section aria-labelledby="billing-heading">
    <h2 id="billing-heading">Billing & subscription</h2>
    <p>View your current plan, invoices, and cancel or downgrade.</p>

    <form action="/api/cancel" method="post">
      <button type="submit">Cancel subscription</button>
    </form>
  </section>
</main>

With this structure, an AI can infer “this page is about billing and subscription” with high confidence. The main action “Cancel subscription” is obvious both visually and structurally. A copilot can answer “how do I cancel?” by pointing at that button.

Give actions honest, descriptive labels

Avoid clever copy like:

<button>Maybe later</button> <!-- a cancel button -->
<button>Let’s talk options</button> <!-- opens a cancellation form -->

Name things like you are explaining them to a tired teammate:

<button type="submit">Cancel subscription</button>
<button type="button">Contact support about billing</button>

This is good for humans, good for screen readers, and very good for AI agents trying to pick the right action.

Feed AI some structured data

Where the content is key to your product, give AI a structured view via JSON-LD.

Example for a product page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Pro Plan",
  "description": "Advanced analytics and priority support for growing teams.",
  "brand": "Glitched Goblet Apps",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "39.00",
    "availability": "https://schema.org/InStock"
  }
}
</script>

If you're not aware of JSON-LD, this helps Search engines generate richer results. It now also helps AI browsers and assistants answer questions like “how much is the Pro plan?” or “what features does this product have?” with fewer hallucinations.

Other highly effective candidates:

  • Article for blog posts / docs
  • FAQPage for FAQ pages
  • HowTo for step-by-step guides

You are not trying to game AI. You are just giving it the same obvious facts you want humans to see, in a format it can parse quickly. Nothing has really changed as far as SEO best practices, but now the payoff is bigger.

Make flows agent friendly

AI agents are already interacting with sites on behalf of users. Comet has drawn heat for making purchases on Amazon automatically, which triggered a cease-and-desist over “bots” transacting without being clearly identified as automated agents. (The Times of India)

That drama is a preview. User agents will get more active, not less. So you should design flows where the happy path is encoded in predictable forms and steps. Basic items like having a form with a clear submit button and clear headings go a long way.

Don't hide side effects behind weird hacks, and make critical actions confirmable and reversible. Avoid "click a random div and we silently sign you up for a newsletter" habits. If something important happens, let it be associated with a real control.

Critical actions are confirmable and reversible. Not even for AI agents, for users too! Confirm destructive actions with clear language (“You are about to delete all workspaces in this account”). Provide an easy “Undo” for non-security-sensitive operations.

You want the AI to be able to help a user cancel, upgrade, or complete checkout, without any hiccups. Making it reliable will help both humans and their copilots.

Anti-patterns that break AI copilots (and users)

These are worth hunting down in your app:

Endless div soup with no headings - If a summarizer cannot tell which block is the main content vs sidebar, your UX is already shaky.

Fake buttons and links - span with onClick and no role, no keyboard accessibility, no semantics. AI and assistive tech both struggle to treat it as an action.

Infinite scroll everything with no anchors - Feeds and timelines make sense. Your legal or pricing information should not be buried 8 screens down inside an endless list.

Critical text in images with no alt text - AI might do OCR, but do not rely on it. Terms, prices, and “call us” info should exist in real text.

Over-clever dark patterns - Trying to hide cancel flows behind 8 cutesy steps is exactly the kind of thing users will outsource to their browser with “Just cancel this for me”.

If an AI cannot easily find the main purpose of the page and the main action, your users probably cannot either.

How to test your site against AI browsers today

You can get a lot of signal in under an hour.

With Edge + Copilot

  1. Open your page in Edge.
  2. Open the Copilot sidebar.
  3. Ask: “Summarize this page,” or “What is the main thing I can do here?” or “How do I cancel my subscription from this page?”

If the answers are vague or wrong, work on semantics, headings, and copy. Copilot’s summarization is explicitly designed to work off page content, so failures here are a clear red flag.

With Chrome + Gemini

Chrome is rolling out Gemini assistance in the browser that can explain complex pages and help people get more out of them.

  • Use any current Gemini-in-Chrome integration you have access to.
  • Ask similar questions as above. Also “What is this page for?” or “How do I sign up?”

Try an agentic browser

I promise this isn't advertising. But to test an agentic browser, you'll need to install one:

  • Perplexity Comet, which frames itself as “browse with intelligence” and can automate tasks. (Perplexity AI)
  • Opera Neon, which runs Neon Do and other local task features that act inside pages. (Opera Neon)

Try asking it to “find and show me the pricing on this site.” or “Help me upgrade my plan.” Pay attention to where the agent gets confused. Those are the spots where your semantics and information architecture need work.

Security and terms: do not ignore the policy fights

The Amazon vs Comet conflict is a warning shot. Amazon claims that Comet’s automated purchasing violated its terms and could degrade the shopping experience. (The Times of India)

That means platforms will try to limit or shape how agents behave. You must be clear about what you allow automated agents to do on your own site, especially for high-risk actions like financial operations. At minimum you should log user agent patterns for suspicious automation. Protect sensitive operations with appropriate auth, rate limiting, and challenges. And document what is allowed in your terms if you expect automation (for example, internal RPA, legitimate scraping, or assistive agents).

The real takeaway

AI browsers are glorified UX linters

AI browsers are not magic. They are just very aggressive consumers of the same things you should already care about.

  • Clean semantic HTML
  • Clear copy and labels
  • Predictable flows
  • Honest navigation and actions
  • Structured data where it matters

If your page is understandable to a tired human, screen reader, and a summarizer, then you are in a good place. The game is not “optimize for AI” in some hacky SEO way. The game is and always has been to:

Make the purpose and actions of every page so obvious that a copilot sitting next to your user can explain and operate it without guessing.

Do that, and you are not just ready for AI browsers. You are building a product that respects your users’ time and attention.