Polyglot: Three-Step Quickstart

"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>
  );
}