Browser agent surface

Built to be driven, not just read.

TrendsAGI works with Browser Harness, browser-use, Playwright and any agent that drives Chrome over CDP. The page exposes stable data-agent names, a deterministic agent mode and a readiness marker, so an agent can navigate by contract instead of guessing at layout.

Open agent mode Agent manifest Markdown version

Agent mode changes presentation only. Permissions, sign-in and limits stay the same.

Three ways for an agent to work here.

Use the narrowest interface that fits the agent. Tools in the page are more reliable than pixels; a documented DOM contract is more reliable than a selector guessed from a screenshot.

Browser-native tools

In Chrome 149+ the app registers read-only TrendsAGI tools with WebMCP. The browser's own agent calls them directly, with your session.

How WebMCP works

Browser harness

Browser Harness, browser-use and other CDP agents drive the real page. The data-agent contract and readiness markers below make that predictable.

Jump to selectors

Server-side agents

Agents outside a browser use the hosted MCP server or the REST API, with OAuth or an API key and their own rate limits.

Open the MCP server guide

Wait for ready, not for time.

Append ?agent=1 to any TrendsAGI URL. The page stops decorative motion, exposes its route and sets a readiness marker once the view is interactive. Client-side navigation updates the route and readiness attributes again.

The same markers exist on both hosts, so one wait condition works across the public site and the app. The choice is remembered per origin and tab, and email/password sign-in carries it across to app.trendsagi.com. If you open the app directly, append ?agent=1 yourself.

An accessibility tree is still the first thing to read. These attributes are for the actions and landmarks a tree does not name precisely.

html[data-agent-mode="true"]: Agent mode is active.
body[data-agent-site]: trendsagi-public on trendsagi.com, trendsagi-app on app.trendsagi.com.
body[data-agent-route]: The current path. Updated after every client-side navigation.
body[data-agent-ready="true"]: The shell is hydrated and interactive. A lazy route may still show its own loading status.
[data-agent-shell]: The active app shell on app.trendsagi.com.

await page.waitForSelector('body[data-agent-ready="true"]');
await page.click('[data-agent="login-email"]');

The selector contract.

Names are stable across releases. Responsive variants of the same control share one name, so an agent should prefer the visible match. Every name is also listed in /agent-manifest.json, so an agent can refresh its map without re-reading this page.

trendsagi.com

Public

Every public page

data-agent	Element	Purpose
site-header	nav	Primary site navigation.
home-link	a	Returns to the home page.
header-login	a	Opens the sign-in form.
header-signup	a	Opens account registration.
header-dashboard	a	Opens the app when the browser already has a session.
mobile-menu-toggle	button	Opens the navigation drawer below 1200px.
mobile-menu	div	The open navigation drawer.
site-footer	footer	Footer navigation, including Browser agents.
footer-browser-agents	a	Opens this guide.
nav-research	a	Primary navigation: Research.
nav-use-cases	a	Primary navigation: Use Cases.
nav-tools	a	Primary navigation: Tools.
nav-subscription	a	Primary navigation: Pricing.
nav-api-docs	a	Primary navigation: API Docs.
nav-security	a	Primary navigation: Security.
cookie-banner	aside	Analytics consent banner, when consent is unset.
cookie-deny	button	Keeps optional analytics off.
cookie-accept	button	Turns optional analytics on.

Home and pricing

data-agent	Element	Purpose
hero-start-free	a	Primary signup call to action in the hero.
hero-strategy-call	a	Books a strategy call, in a new tab.
hero-api-docs	a	Opens the API documentation.
plans	section	The pricing section on the home or subscription page.
billing-monthly	button	Shows monthly prices.
billing-yearly	button	Shows yearly prices.
plan-developer-cta	button	Starts the free Developer plan.
plan-advantage-cta	button	Starts the Advantage plan.
plan-scale-cta	button	Starts the Scale plan.
agent-api-cta	a	Opens the agent API documentation.
agent-harness-cta	a	Opens this browser-agent guide from the home page.

Sign in and registration

data-agent	Element	Purpose
login-form	form	Email and password sign-in.
login-email	input	Account email address.
login-password	input	Account password.
login-remember	input	Remember-me checkbox.
login-submit	button	Submits the sign-in form.
login-error	div	Form-level sign-in error, role=alert.
login-google	div	Google Identity button container, when configured.
login-microsoft	button	Starts Microsoft single sign-on.
login-forgot	a	Opens password recovery.
login-register	a	Switches to registration.
register-form	form	Account registration.
register-first-name	input	First name.
register-last-name	input	Last name.
register-email	input	Account email address.
register-password	input	New password, at least 8 characters.
register-confirm-password	input	Password confirmation.
register-terms	input	Terms and privacy agreement checkbox.
register-submit	button	Creates the account.
register-error	div	Form-level registration error, role=alert.
register-login	a	Switches to sign-in.

Contact

data-agent	Element	Purpose
contact-form	form	Contact form.
contact-name	input	Sender's name.
contact-email	input	Sender's email address.
contact-message	textarea	Message body.
contact-submit	button	Sends the message.

This guide

data-agent	Element	Purpose
browser-agent-guide	div	This page.
agent-mode-link	a	Opens the current page with agent mode on.
manifest-link	a	Opens the machine-readable manifest.

app.trendsagi.com

Signed in

App shell

data-agent	Element	Purpose
app-root	div	Top-level app container, with the active shell as data-agent-shell.
app-nav	nav	Signed-in navigation.
app-home	a	Returns to the dashboard when signed in.
app-search	button	Opens the command palette.
app-notifications	button	Opens recent notifications.
app-notifications-panel	section	The open notifications panel.
app-account	button	Opens the account menu.
app-logout	button	Signs out.
app-mobile-menu-toggle	button	Opens the navigation drawer below 1280px.
app-mobile-menu	aside	The open navigation drawer.
app-login	a	Opens the public sign-in page.
app-signup	a	Opens public registration.

data-agent	Element	Purpose
app-nav-dashboard	a	Dashboard.
app-nav-trends	a	Live trends.
app-nav-watchlists	a	Watchlists.
app-nav-insights	a	AI insights.
app-nav-integrations	a	Connected ad platforms.
app-nav-more	button	Opens the workspace menu.
app-more-menu	div	The open workspace menu.

Command palette

data-agent	Element	Purpose
app-command-palette	section	Keyboard-driven navigation dialog.
app-command-input	input	Command search field.
app-command-close	button	Closes the palette.

Workspace pages

data-agent	Element	Purpose
app-dashboard	div	Signal desk overview.
app-trends	div	Trend discovery page.
app-trends-search	input	Filters trends by phrase.
app-trends-category	select	Filters trends by category.
app-trends-timeframe	select	Filters trends by time window.
app-watchlists	div	Watchlist coverage page.
app-watchlist-add	button	Opens the add-watchlist form.
app-watchlist-modal	div	The add-watchlist dialog.
app-watchlist-form	form	The add-watchlist form.
app-watchlist-keyword	input	Keyword or phrase to track.
app-watchlist-threshold	input	Volume threshold for the alert.
app-watchlist-submit	button	Adds the watchlist stream.
app-watchlist-close	button	Closes the dialog without adding.
app-export	div	Data export page.
app-export-run	button	Starts the selected export.

data-agent	Element	Purpose
app-cookie-banner	section	Analytics consent panel, when consent is unset.
app-cookie-deny	button	Keeps optional analytics off.
app-cookie-accept	button	Turns optional analytics on.

Task recipes.

Each recipe starts at a canonical URL, names the steps in order and states what success looks like. The same list is in the manifest.

read-public

Read public trend intelligence

https://trendsagi.com/trending

Open the trending page, or /blog for editorial reports.
Read the page h1 and the article links; no account or consent choice is required to read them.
Follow a report to /blog/trends/<slug> for its measured velocity and evidence.

Success: A report page with a dated headline and its measurement notes is visible.

compare-plans

Compare plans and prices

https://trendsagi.com/subscription

Open /subscription. Prices follow the visitor's detected currency.
Use data-agent="billing-monthly" or data-agent="billing-yearly" to switch the cycle.
Read each plan card, or call the public get_trendsagi_plans WebMCP tool when the browser supports it.

Success: Plan names, prices and included capacity are visible without signing in.

create-account

Create an account

https://trendsagi.com/register

Wait for data-agent-ready="true" on the body.
Fill register-first-name, register-last-name, register-email, register-password and register-confirm-password.
Tick register-terms, then press register-submit.
Registration ends on /confirm-email; the account is usable after the email is confirmed.

Success: The confirm-email page names the address that was registered.

sign-in

Sign in to the app

https://trendsagi.com/login

Use email and password with login-email, login-password and login-submit. This is the deterministic path.
Wait for the redirect to app.trendsagi.com and for body[data-agent-ready="true"].
Read body[data-agent-route] to confirm the landing route, usually /dashboard or /onboarding.

Success: The signed-in app shell is visible and app-nav is present.

find-trend

Find a rising trend

https://app.trendsagi.com/trends

Open /trends and wait for the app to be ready.
Type a phrase into app-trends-search, or choose a category with app-trends-category.
Read the result rows and follow a row's link for the trend's insight page.

Success: The trend table shows filtered rows with measured volume and velocity.

add-watchlist

Add a watchlist stream

https://app.trendsagi.com/watchlists

Open /watchlists and press app-watchlist-add.
Enter a phrase in app-watchlist-keyword, or switch the dialog to Category and choose one.
Set the alert threshold with app-watchlist-threshold, then press app-watchlist-submit.
Wait for the dialog to close and the new stream to appear in the coverage list.

Success: The new stream appears in the watchlist coverage list with its alert condition.

export

Read or download an export

https://app.trendsagi.com/export

Open /export and choose a report type.
Press app-export-run, or open a saved configuration and run it.
Wait for the export run to reach a completed state before downloading it.

Success: A completed export run exposes a download link or the configured destination.

webmcp

Use the browser's own tool interface

https://trendsagi.com/webmcp

In Chrome 149+ or another WebMCP browser, sign in at app.trendsagi.com.
The page registers read-only TrendsAGI tools with document.modelContext.
Call the tool directly instead of driving the DOM; see /webmcp for the list.

Success: The browser lists TrendsAGI tools and returns structured trend data.

What agent mode does not do.

Agent mode (?agent=1) disables decorative motion. It does not bypass authentication, permissions, paywalls or rate limits.
Public pages are readable without an account. Dashboard, watchlist, insight and export routes require a signed-in session.
Email and password is the deterministic sign-in path. Google and Microsoft sign-in hand control to the identity provider, which may add its own challenge.
One account per operator. Do not create accounts, start trials or run exports in bulk.
Read the Terms of Service and the API limits that apply to the account you use.
The stable selectors are for navigation and reading. They are not a licence to automate actions a person could not take in the same session.

Harness brief.

Paste this into Browser Harness, browser-use or your own agent before the task. It points at the manifest, so the agent can resolve the rest without a screenshot.

Open https://trendsagi.com/?agent=1 and wait for body[data-agent-ready="true"].
Use the data-agent attributes listed at https://trendsagi.com/browser-agents instead of guessing
selectors. For a signed-in task, sign in at https://trendsagi.com/login with email and password,
then open https://app.trendsagi.com/?agent=1 and wait for body[data-agent-site="trendsagi-app"]
and body[data-agent-ready="true"]. Read https://trendsagi.com/agent-manifest.json for the selector
map and task recipes.

Using the browser's built-in agent instead? WebMCP is the shorter path: the tools are already registered in the page.

Start with the manifest.

One request, every stable selector, flow and constraint.

/agent-manifest.json Ask a question