- Add stocks table (server/db) with list/get/add/update/delete actions, scoped per user, backing both the chat agent and the /stocks UI via useActionQuery/useActionMutation - Add mobile-first /stocks page (shadcn table/cards, watchlist, search) and wire it into the sidebar, navigation state, and view-screen context - Install the platform's Claude Agent SDK harness (server/plugins, server/routes/api/claude-agent) so the app agent runs on the platform's own Claude subscription instead of the Builder.io gateway; fix the vendored turn.post.ts route to resolve the session and wrap it in runWithRequestContext, since custom /api/ routes aren't auto-wrapped in request context the way /_agent-native/actions/* are - Add shadcn table/badge/dialog/select components (Tabler icons, not lucide)
6.1 KiB
Chat — Agent Guide
Chat is the minimal chat-first agent-native app template. Keep chat as the primary surface, add actions for real capabilities, and add screens only when a workflow needs durable UI around the conversation.
Core Rules
- Store large file/blob payloads in configured file/blob storage, not SQL: no
base64,
data:URLs, images, video/audio, PDFs, ZIPs, screenshots, thumbnails, or replay chunks in app tables,application_state,settings, orresources; persist URLs, ids, or handles instead. - Never hardcode API keys, tokens, webhook URLs, signing secrets, private Builder/internal data, customer data, or credential-looking literals. Use secrets/OAuth/runtime configuration and obvious placeholders in examples.
- Follow the root framework contract: data in SQL, actions first, application state for navigation/selection, and shared agent chat for AI work.
- Scale effort to the task. A small, well-specified change is a short read, the
edit, and the app's existing checks (
pnpm typecheck, formatter, existing tests) — not a codebase survey, unrequested tests, or browser automation. - Use actions for app operations and keep frontend/API parity.
- Do not add
/api/*routes for app data. If you are about to create a file underserver/routes/api/, or middleware to guard one, stop and write adefineActioninstead. The only exceptions are uploads, streaming, inbound webhooks, OAuth callbacks, public unauthenticated URLs, and non-JSON responses — not auth, settings, search, or CRUD. - Treat the chat as the default UI. When the user asks for a capability, prefer adding or improving the action surface first, then add a page, table, form, or widget only when the user needs to inspect, compare, approve, or share durable objects.
- If the user wants to plug in their own agent backend, keep the app shell and
thread UI intact and adapt the chat through the framework's
AgentChatRuntimeconnector helpers instead of forking the transcript/composer UI. - Keep the action surface small and orthogonal: every action is a tool in the
model's context window, so prefer one CRUD-style
update(patch of fields) over many per-field actions, reach for an existing generic query / escape hatch (provider-api-*, devdb-query) before minting a new read action, mark UI-only or programmatic actionsagentTool: falseto hide them from the model (distinct fromtoolCallable: false, which only gates the extension iframe), and delete or hide actions the UI no longer uses. See theactionsskill. - Keep database code provider-agnostic and additive.
- Use
view-screenor application state when the active page/selection is unclear. - For new features, update UI, actions, skills/instructions, and application state when applicable.
What This App Does
A minimal stock listing app. Each user keeps a personal list of stock tickers
(symbol, company name, exchange, sector, price, change percent, market cap,
watchlisted) at the /stocks page. Chat remains the primary surface for
asking the agent to add, look up, or edit listings; /stocks is the durable
UI for browsing, searching, and managing the list at a glance.
Actions
| Action | Method | Description |
|---|---|---|
list-stocks |
GET | List the current user's stock listings. Supports search, exchange, watchlistedOnly. |
get-stock |
GET | Get one listing by id or symbol. |
add-stock |
POST | Add a new listing (symbol, companyName required; fails if symbol already listed). |
update-stock |
PUT | Patch a listing by id — price, change percent, sector, watchlisted ("true"/"false"), etc. |
delete-stock |
DELETE | Delete a listing by id. |
hello |
GET | Starter example action. |
navigate |
agent-only | Navigate the UI to a view/path (adds view: "stocks" for /stocks). |
view-screen |
agent-only | Read current navigation state; when the user is on /stocks, also returns the full stock listing snapshot. |
Stocks are scoped per ownerEmail (the authenticated user). Data lives in
the stocks table in Postgres (DATABASE_URL) in this deployment, or SQLite
at data/app.db for local dev without a DATABASE_URL — see
server/db/schema.ts and server/plugins/db.ts.
Application State
navigationshould describe the current view and selected entity ids. The default chat view ischatat/; the stock listing view isstocksat/stocks.navigatemay be used to move the UI when the app supports it.view-screenis the first tool to call when the user's visible context matters.
Framework Docs Lookup
- Before implementing or explaining non-trivial Agent Native behavior, use the
agent-native-docsskill and the built-indocs-searchaction/tool to read the version-matched framework docs bundled with@agent-native/core. - Use the built-in
source-searchaction/tool, or searchnode_modules/@agent-native/core/corpus, when you need current core or first-party template implementation examples. - Prefer those installed docs over memory or public docs when package APIs, generated-app conventions, workspaces, actions, or agent surfaces are involved.
- Before building common workspace or agent UI, read
agent-native-toolkitto inventory existing public kits and installed package seams. - Read
customizing-agent-nativebefore overriding the chat shell or shared UI. Keep Core thread/runtime behavior and use the supported ladder: configure → compose → eject the smallest presentation unit → propose a shared seam. Preview before--applyand commitagent-native.ejections.json.
Skills
Read the relevant root skill before implementation: adding-a-feature,
actions, agent-native-docs, agent-native-toolkit,
customizing-agent-native, storing-data,
real-time-sync, security, delegate-to-agent, frontend-design, shadcn-ui, and
self-modifying-code.