# Polyglot: Three-Step Quickstart

> Install, authenticate and a first request as three blocks sharing one `syncKey`. Switch any of them and all three change together; the package name slides from `pip install nova` into the Go import path. Your choice is remembered.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/polyglot-steps-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/polyglot-steps-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/polyglot-steps-demo-light-5540386031bd393d.png
- Registry item: https://keyframeui.com/r/polyglot-steps-demo.json
- Categories: code, developer, ai
- Listed: 2026-10-15, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/polyglot-steps-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/polyglot.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/polyglot#polyglot-steps-demo

## Files

### `registry/demos/polyglot-steps-demo.tsx`

```tsx
"use client";

import { Polyglot, type PolyglotSlot, type PolyglotSnippet } from "@/components/ui/polyglot";

const pkg = { pkg: { value: "nova", label: "Package" } };

type Step = {
  title: string;
  body: string;
  slots: Record<string, PolyglotSlot>;
  snippets: PolyglotSnippet[];
};

const steps: Step[] = [
  {
    title: "Install the SDK",
    body: "One package, no native dependencies.",
    slots: pkg,
    snippets: [
      { label: "Python", lang: "bash", code: "pip install {{pkg}}" },
      { label: "Node.js", lang: "bash", code: "npm install {{pkg}}" },
      { label: "Go", lang: "bash", code: "go get github.com/{{pkg}}-ai/{{pkg}}-go" },
    ],
  },
  {
    title: "Authenticate",
    body: "Create a key in the dashboard. Hover it to check which one you're using.",
    slots: { ...pkg, apiKey: { value: "sk_test_4eC39HqLyjWDarjtT1zdp7dc", secret: true, label: "API key" } },
    snippets: [
      {
        label: "Python",
        lang: "python",
        code: `
from {{pkg}} import Nova

client = Nova(api_key="{{apiKey}}")
`,
      },
      {
        label: "Node.js",
        lang: "js",
        code: `
import Nova from "{{pkg}}";

const client = new Nova({ apiKey: "{{apiKey}}" });
`,
      },
      {
        label: "Go",
        lang: "go",
        code: `
import "github.com/{{pkg}}-ai/{{pkg}}-go"

client := nova.NewClient("{{apiKey}}")
`,
      },
    ],
  },
  {
    title: "Make your first request",
    body: "Change the prompt or the model, then run it.",
    slots: {
      model: { value: "nova-2-mini", options: ["nova-2", "nova-2-mini"], label: "Model" },
      prompt: { value: "Say hello in five words", editable: true, label: "Prompt" },
    },
    snippets: [
      {
        label: "Python",
        lang: "python",
        code: `
reply = client.responses.create(
    model="{{model}}",
    input="{{prompt}}",
)
print(reply.text)
`,
      },
      {
        label: "Node.js",
        lang: "js",
        code: `
const reply = await client.responses.create({
  model: "{{model}}",
  input: "{{prompt}}",
});
console.log(reply.text);
`,
      },
      {
        label: "Go",
        lang: "go",
        code: `
reply, err := client.Responses.Create(ctx, nova.ResponseParams{
\tModel: "{{model}}",
\tInput: "{{prompt}}",
})
if err != nil {
\tlog.Fatal(err)
}
fmt.Println(reply.Text)
`,
      },
    ],
  },
];

export function PolyglotStepsDemo() {
  return (
    <ol className="w-full max-w-2xl">
      {steps.map((step, i) => (
        <li key={step.title} className="relative grid grid-cols-[1.75rem_minmax(0,1fr)] gap-x-4 pb-10 last:pb-0">
          {i < steps.length - 1 ? (
            <span aria-hidden className="absolute top-9 bottom-1 left-[0.875rem] w-px -translate-x-1/2 bg-border" />
          ) : null}
          <span className="flex size-7 items-center justify-center rounded-full border border-border bg-background font-mono text-xs font-medium text-muted-foreground">
            {i + 1}
          </span>
          <div className="min-w-0 pt-0.5">
            <h3 className="text-sm font-medium">{step.title}</h3>
            <p className="mt-1 text-sm text-muted-foreground">{step.body}</p>
            <Polyglot
              className="mt-4"
              syncKey="nova-setup"
              slots={step.slots}
              snippets={step.snippets}
              {...(i === steps.length - 1
                ? {
                    response: "Hello from Nova, friend!",
                    speed: ({ model }: Record<string, string>) => (model === "nova-2-mini" ? 40 : 18),
                    latency: ({ model }: Record<string, string>) => (model === "nova-2-mini" ? 160 : 420),
                  }
                : {})}
            />
          </div>
        </li>
      ))}
    </ol>
  );
}
```