ayjnt

Add a co-located React UI to an existing ayjnt agent. Use when the user asks to "add a UI", "add app.tsx", "co-locate a React component", or "render a page for the <agent> agent". Drops `agents/<route>/app.tsx` next to the existing `agent.ts`, uses the typed `useAgent()` hook ayjnt generates per agent, makes sure `react` + `react-dom` + their types are in `package.json`, and confirms the project's `tsconfig.json` extends the framework path aliases.

Primer on the ayjnt framework — file conventions, what the codegen produces, the CLI surface, and where to find each feature. Use this when the user asks general "how does ayjnt work" / "what is ayjnt" / "how do I get started" questions, when they need to understand the layout of a freshly cloned ayjnt project, or as a default fallback when no more specific ayjnt skill matches. Detects ayjnt projects by the presence of an `agents/` directory or the `ayjnt` dependency in `package.json`.

Add middleware to gate, log, or wrap responses for an ayjnt agent or a subtree of agents. Use when the user asks to "add middleware", "add auth", "rate limit", "log every request", "gate the admin subtree", or "wrap responses". Drops `middleware.ts` at the right folder level (root for everything, a sub-folder for a subtree, a `(group)/` for a non-URL-scoped grouping), uses the Hono-style `Context` + `next()` pattern, and confirms the chain order matches what the user expects.

Diagnose and fix common ayjnt failures. Use when the user reports a specific symptom — "useAgent doesn't work", "compatibility date error", "lockfile divergence", "404 on /<route>", "wrangler refuses to deploy", "basePath gotcha", "agent state is undefined", "renamed an agent and lost storage", or "inter-agent RPC returns [object Object]". Maps each symptom to its root cause and the one-line fix. Most failures map to gotchas with known resolutions; don't speculate when the symptom matches one of these.

Add Browser Rendering tools to an agent with one import. Use when the user asks to "let the agent browse the web", "add browser tools", "search the web", "use Cloudflare Browser Rendering", or "give the LLM access to a browser". One import of `browserTools` from `ayjnt/browser` triggers the framework to wire BROWSER, LOADER, AI, and `nodejs_compat` into wrangler.jsonc — and the helper returns an AI-SDK ToolSet you can pass straight to `generateText`.

Make an agent receive and reply to email. Use when the user asks to "make the agent handle email", "receive email", "reply to email", "add onEmail handler", "email-driven agent", or "support@ inbox to agent". Define `async onEmail(message)` on the agent and ayjnt wires Cloudflare Email Routing, generates the worker's `email()` handler, and adds a `send_email` binding so `replyToEmail` works.

Build a voice agent — streaming speech-to-text + text-to-speech over WebSocket via @cloudflare/voice. Use when the user asks to "make the agent talk", "add voice", "build a voice assistant", "use Workers AI for voice", or "add STT/TTS". Wraps the agent class in `withVoice(Agent)`, plugs in Workers AI STT + TTS providers, and generates a typed `useVoiceAgent` hook that respects ayjnt's URL shape (not the upstream PartySocket prefix).

Pair an agent with a durable Cloudflare Workflow. Use when the user asks to "add a workflow", "run a long-running job", "extend AgentWorkflow", "make order processing durable", "retry with backoff", or "survive worker restarts". Creates `agents/<route>/workflow.ts` next to `agent.ts`; the framework wires the workflow binding, the typed RPC stub, and the GeneratedEnv field. Uses the `withWorkflow<typeof MyWorkflow>()(Agent)` mixin so the agent gets a typed `this.workflow(params)` shortcut with no magic binding strings. NO migrations — workflows are ephemeral execution containers; state lives in the paired Agent's DO.

Call agent methods — from another agent (typed DO RPC via `getAgent<T>`) or from a browser UI / catalog consumers (Cloudflare's `@callable()` decorator + `agent.stub.method()`). Use when the user says "call <agentB> from <agentA>", "inter-agent RPC", "call from the UI", "call from the browser", "agent.stub.method", "agent.call", "@callable decorator", or "advertise this method in the catalog". The framework treats the `@callable()` decorator as the single source of truth for both browser-callability and catalog inclusion. A legacy `/** @callable */` JSDoc tag exists as a fallback for the rare catalog-only case.

Build an MCP (Model Context Protocol) agent — an agent that exposes tools, prompts, or resources for LLM clients like Claude Desktop, Codex, or the @modelcontextprotocol/sdk TypeScript client. Use when the user asks to "build an MCP server", "expose tools to an LLM", "extend McpAgent", "register MCP tools", or "connect Claude Desktop to my agent". Generates `agents/<route>/agent.ts` that extends `McpAgent`, instantiates `McpServer`, and registers tools/resources/prompts via the SDK's helpers. Skips the normal `/<route>/<instance>` URL dispatch — McpAgent.serve() owns the transport.

Add a new agent to an ayjnt project. Use when the user asks to "create an agent", "add an agent at /<route>", "scaffold a new agent", or similar. Drops `agents/<route>/agent.ts` with the correct base class, env, and state shape, makes sure the URL maps the way the user expects, and decides whether to also add `app.tsx`, `docs.md`, middleware, or RPC methods based on what the user said. Triggers in any project with an `agents/` folder and an `ayjnt` dependency.