# Polyglot: Chat Quickstart

> An AI API's quickstart in cURL, Python and TypeScript, with the response beside the code (`layout="split"`). Switch tabs and the key, model and prompt glide to their new lines. Click the prompt to rewrite it, pick a model, hover the key, then Run: the smaller model answers sooner and streams faster.

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

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/polyglot-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/polyglot-demo-light-db3398785b5cca86.png
- Registry item: https://keyframeui.com/r/polyglot-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-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-demo

## Files

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

```tsx
"use client";

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

const snippets = [
  {
    label: "cURL",
    lang: "bash",
    code: `
curl https://api.nova.ai/v1/responses \\
  -H "Authorization: Bearer {{apiKey}}" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "{{model}}",
    "input": "{{prompt}}"
  }'
`,
  },
  {
    label: "Python",
    lang: "python",
    code: `
from nova import Nova

client = Nova(api_key="{{apiKey}}")

reply = client.responses.create(
    model="{{model}}",
    input="{{prompt}}",
)
print(reply.text)
`,
  },
  {
    label: "TypeScript",
    lang: "ts",
    code: `
import Nova from "nova";

const client = new Nova({ apiKey: "{{apiKey}}" });

const reply = await client.responses.create({
  model: "{{model}}",
  input: "{{prompt}}",
});
console.log(reply.text);
`,
  },
];

// A canned reply that still follows what the visitor typed.
function reply({ prompt, model }: PolyglotValues) {
  const text = prompt.trim();
  const lower = text.toLowerCase();
  const mini = model === "nova-2-mini";
  if (lower.includes("haiku")) {
    const topic = /about\s+(.+)$/i.exec(text)?.[1]?.replace(/[.?!]+$/, "") ?? "the network";
    if (/latency/i.test(topic)) {
      return mini
        ? "Light leaves the server,\nforty milliseconds pass —\nhello, from the edge."
        : "Packets cross the dark,\na pause the length of a breath —\nthe answer arrives.";
    }
    const subject = topic.charAt(0).toUpperCase() + topic.slice(1);
    return `${subject}, quiet and quick,\nfolded into one small packet —\nand then, all at once.`;
  }
  if (lower.includes("joke")) {
    return "Why did the request go to therapy?\nIt had too many unresolved promises.";
  }
  if (!text) return "It looks like the prompt is empty. Ask me anything.";
  return mini
    ? `Short answer to “${text}”: start small, measure, and iterate.`
    : `Here's a first pass at “${text}”.\n\nStart with the smallest version that works, measure it against what good looks like, then iterate. Most of the effort goes into deciding what to measure before the first line is written.`;
}

export function PolyglotDemo() {
  return (
    <Polyglot
      className="max-w-5xl"
      layout="split"
      lineNumbers
      syncKey="nova-chat"
      slots={{
        model: { value: "nova-2", options: ["nova-2", "nova-2-mini"], label: "Model" },
        prompt: { value: "Write a haiku about latency", editable: true, label: "Prompt" },
        apiKey: { value: "sk_live_51HxQ2nova7Kd93", secret: true, label: "API key" },
      }}
      snippets={snippets}
      response={reply}
      // The smaller model answers sooner and streams faster.
      speed={({ model }) => (model === "nova-2-mini" ? 110 : 42)}
      latency={({ model }) => (model === "nova-2-mini" ? 160 : 420)}
    />
  );
}
```