Components
Agent Prompt
A prompt to paste into a coding agent, with a copy button.
Set up this app on Acme. 1. npm i -g acme@latest. If that fails, use `npx acme@latest` in place of `acme`. If an acme command opens a browser sign-in, tell me to finish it there. If that times out or fails, ask me to run acme login, then retry. 2. In the project root: acme init -y --org-id org-summer-dust-12345678 --project-id round-bar-12345678 --branch production --services postgres 3. acme deploy. It provisions the services in acme.ts and pulls their env vars into `.env.local` (or `.env` if it exists). 4. Wire each service into the app's code using those env vars. Consult the installed Acme agent skills for best practices, e.g., what database driver to use given the app architecture and hosting runtime. 5. Prove it works: npm run build must pass, then start the app. Test each wired service end to end. 6. Report what changed, the command output that proves step 5, and anything that failed.
This is the Acme "Create project" prompt from examples/acme. Edit the params to see them update.
Installation
pnpm dlx shadcn@latest add https://copybook.dev/r/agent-prompt.jsonUsage
import { render } from "@copybook/core";
import { AgentPrompt } from "@/components/copybook/agent-prompt";
import { setUpWithAgent } from "@/content/create-project";
export const CreateProjectDone = ({ orgId, projectId }) => (
<AgentPrompt
onCopy={({ id }) => track("prompt_copied", { id })}
rendered={render(setUpWithAgent, { orgId, projectId })}
/>
);If the copied text would contain a real secret, rather than its placeholder, the component shows a warning under the prompt.
Props
| Prop | Type | Description |
|---|---|---|
rendered | Rendered | The rendered prompt. |
title | string | The header label. Defaults to "Agent prompt". |
onCopy | (event: CopyEvent) => void | Called with { id, text } after a copy. |