---
title: "Add a Page"
description: "Build a React route that calls your action and displays its result."
---

# Add a Page

This is part three of the Getting Started series. In [Add an Action](/docs/getting-started-actions)
you created `analyze-text`. Here you'll call that same action from a route. This
example does not need a new database table. Chat already stores chat history in
SQL; add your own tables when you need to persist domain data.

## Create the route {#add-a-page}

The dev server reads route files when it starts. Create
`app/routes/text-analyses.tsx`, then restart `pnpm dev` if it is already
running. Open the local URL printed by `pnpm dev` and append
`/text-analyses`; the port may change when 8080 is already in use.

```tsx filename="app/routes/text-analyses.tsx"
import { useActionQuery } from "@agent-native/core/client/hooks";

type TextAnalysis = {
  summary: {
    characters: number;
    words: number;
    sentences: number;
    paragraphs: number;
  };
};

export default function TextAnalysesRoute() {
  const { data: analysis, isLoading } = useActionQuery<TextAnalysis>(
    "analyze-text",
    { text: "Hello world. How are you today?" },
  );

  return (
    <main className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
      <header>
        <h1 className="text-2xl font-semibold">Text analyses</h1>
        <p className="text-muted-foreground">The same action, on a page.</p>
      </header>
      <section className="grid gap-3 sm:grid-cols-2">
        {isLoading && <p className="text-muted-foreground">Analyzing...</p>}
        {analysis &&
          Object.entries(analysis.summary).map(([label, value]) => (
            <article key={label} className="rounded-lg border p-4">
              <p className="text-sm capitalize text-muted-foreground">
                {label}
              </p>
              <p className="text-2xl font-semibold">{value}</p>
            </article>
          ))}
      </section>
    </main>
  );
}
```

`useActionQuery` calls the same read-only action the agent uses. The page does
not need a custom API route, a second data layer, or a new SQL table.

Open the printed local URL with `/text-analyses` appended, or ask the agent:

> Navigate to `/text-analyses`.

The route is enough for this tutorial. Add a sidebar entry later if this becomes
a primary workflow. For the full `view-screen`, `navigate`, and application-state
patterns, see [Context Awareness](/docs/context-awareness).

## Continue

You've built a chat app with an action and a page that calls the same source of
truth. Continue with [Key Concepts](/docs/key-concepts) or
[Agent Surfaces](/docs/agent-surfaces).