---
title: "Command & Navigation Kit"
description: "Command menu, deep links, standard routes, and app shell navigation patterns."
---
# Command & Navigation Kit
The Command & Navigation Kit makes apps feel consistent under keyboard, sidebar,
URL, and agent control. It covers the command menu, deep links, standard app
routes, `navigate` actions, `view-screen`, and shell conventions.
Type a command or search...Esc
Navigate
Open Q3 Forecast
Go to Settings: Connections
G S
Actions
Share current resource
Ask agent about this page
"
}
/>
## Pieces {#pieces}
| Piece | Purpose |
| -------------------------- | --------------------------------------------------------------------------- |
| `` | Reusable command palette with docs, changelog, actions, and agent fallback. |
| `useCommandMenuShortcut()` | Standard keyboard shortcut wiring. |
| `buildDeepLink()` | Server helper for action results that open the app focused on a resource. |
| `createNavigateAction()` | Generic agent-callable navigation action factory. |
| `createViewScreenAction()` | Generic current-screen action factory. |
| Route helpers | Standard settings, team, resource, and open-route builders. |
| App shell patterns | Persistent sidebar/header layout and route conventions. |
## API {#api}
Client code imports the command menu and route helpers from the client kit:
```tsx
import {
CommandMenu,
useCommandMenuShortcut,
} from "@agent-native/toolkit/app/shared";
import {
buildResourceRoute,
buildSettingsRoute,
} from "@agent-native/core/navigation";
const settingsUrl = buildSettingsRoute("integrations", "builder");
const documentUrl = buildResourceRoute("documents", documentId);
```
Action code uses the server-safe kit:
```ts
import {
buildDeepLink,
createNavigateAction,
createViewScreenAction,
} from "@agent-native/core/command-navigation";
export const navigate = createNavigateAction();
export const viewScreen = createViewScreenAction({
extraStateKeys: ["selected-resource"],
});
return {
link: {
label: "Open dashboard",
url: buildDeepLink({
app: "analytics",
view: "dashboard",
params: { dashboardId },
}),
},
};
```
For `/_agent-native/open`, apps can provide a typed route map instead of
hand-parsing query strings:
```ts
import { createStandardOpenPathResolver } from "@agent-native/core/navigation";
export const resolveOpenPath = createStandardOpenPathResolver({
dashboard: ({ dashboardId }) => `/dashboards/${dashboardId}`,
settings: "/settings",
});
```
## Route Standard {#route-standard}
Use a small predictable route set:
| Route | Purpose |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `/` | Primary app surface. |
| `/settings/:page/:sub` | Settings pages such as `/settings/model` or `/settings/integrations/builder` ([Settings Kit](/docs/toolkit-settings)). |
| `/team` | Legacy link that redirects to Settings › Organization. |
| Resource routes | `/documents/:id`, `/dashboards/:id`, or equivalent focused resource pages. |
### Settings links {#settings-links}
`buildSettingsRoute(page, sub?, { anchor? })` builds every Settings link from a
page id: `buildSettingsRoute("app", "recordings")` is `/settings/app/recordings`,
and `buildSettingsRoute("model", null, { anchor: "limits" })` adds `#limits`.
Don't hand-write `/settings/...` strings.
Earlier links keep working through one redirect table in
`packages/core/src/navigation/settings-redirects.ts`: tab ids (`agent`, `keys`,
`team`), nested ids (`agent:resources:memory`), section hashes (`#llm`,
`#secrets:OPENAI_API_KEY`), and `agent-panel:open-settings` sections each map
to a page. To move an old link, change its row in `TAB_REDIRECTS` or
`SECTION_REDIRECTS` and add a case to `settings-redirects.spec.ts`.
⌘, (Ctrl+, on Windows and Linux) opens Settings from anywhere in an app, and
the command menu has a **Settings** command. `AppProviders` binds the shortcut,
so apps don't. From code, `openSettingsPage(page?)` opens a page from anywhere,
including outside the router. The agent uses the built-in `open-settings-page`
tool, and `` names the Settings page the user has open.
## UX Standard {#ux-standard}
- Command menu entries should map to real app routes or actions.
- Deep links carry pointers, not secret payloads.
- The agent reads `view-screen` before acting on the current page.
- The app shell should not remount when users navigate between app routes.
## What's next
- [**Routing**](/docs/client-routing) — the file-route conventions the route standard
builds on.
- [**Context Awareness**](/docs/context-awareness) — how `view-screen` and
navigation state stay in sync.
- [**External Agents**](/docs/external-agents) — deep links and
`/_agent-native/open` for hosts outside the app.