Components
Code Variants
One snippet in several frameworks or setups, as tabs.
Connect dialog
The Acme "Connect to your branch" dialog: a tab per service, each with an .env and an acme.ts + cli setup. Both setups come from a single snippet with service and setup dimensions.
# Add this to your .env file
DATABASE_URL="postgresql://user:<password>@ep-example.us-east-2.acme.dev/app"Try it out
The AI Gateway model page. The model is a param, and the scenario and framework are dimensions.
import { generateText } from "ai";
import { acme } from "@acme/ai-sdk-provider";
const { text } = await generateText({
model: acme("claude-haiku-5-5"),
prompt: "Explain serverless Postgres.",
});
console.log(text);Installation
pnpm dlx shadcn@latest add https://copybook.dev/r/code-variants.jsonUsage
Render each variant you show on the server, then pass them in:
import { listVariants, render } from "@copybook/core";
import { CodeVariants } from "@/components/copybook/code-variants";
import { tryIt } from "@/content/ai-gateway";
export const TryIt = ({ endpoint, model }) => (
<CodeVariants
items={listVariants(tryIt)
.filter((variant) => variant.when.scenario === "chat")
.map((variant) => ({
key: variant.key,
label: variant.label,
rendered: render(tryIt, { endpoint, model }, { variant: variant.key }),
}))}
/>
);Props
| Prop | Type | Description |
|---|---|---|
items | { key, label, rendered }[] | One tab each, in order. |
defaultKey | string | The tab that starts selected. |
onCopy | (event: CopyEvent) => void | Called with { id, variant, text } after a copy. |