Split Developer Hero with Interactive Code Terminal

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

"use client";

import * as React from "react";
import { SplitDeveloperHero, type CodeTab } from "@/components/ui/split-developer-hero-with-interactive-code-terminal";



/* ------------------------------------------------------------------ */
/* Demo data                                                           */
/* ------------------------------------------------------------------ */

const CODE_TABS: CodeTab[] = [
  {
    label: "cURL",
    language: "bash",
    code: `curl https://api.nimbus.dev/v1/completions \\
  -H "Authorization: Bearer $NIMBUS_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "nimbus-4",
    "prompt": "Summarize this release note",
    "stream": true
  }'`,
  },
  {
    label: "TypeScript",
    language: "typescript",
    code: `import { Nimbus } from "@nimbus/sdk";

const client = new Nimbus({ apiKey: process.env.NIMBUS_API_KEY });

// Stream a completion token by token
const stream = await client.completions.create({
  model: "nimbus-4",
  prompt: "Summarize this release note",
  stream: true,
});

for await (const chunk of stream) {
  process.stdout.write(chunk.text);
}`,
  },
  {
    label: "Python",
    language: "python",
    code: `import os
from nimbus import Nimbus

client = Nimbus(api_key=os.environ["NIMBUS_API_KEY"])

# Stream a completion token by token
stream = client.completions.create(
    model="nimbus-4",
    prompt="Summarize this release note",
    stream=True,
)

for chunk in stream:
    print(chunk.text, end="")`,
  },
];



/* ------------------------------------------------------------------ */
/* Demo                                                                */
/* ------------------------------------------------------------------ */

export default function DemoOne() {
  return (
    <SplitDeveloperHero
      badge="New: streaming responses are live"
      title="Ship AI features in minutes, not months."
      description="One API for text, vision and embeddings. Predictable pricing, sub-second latency and SDKs that feel like part of your codebase."
      primaryAction={{ label: "Get your API key", href: "#get-started" }}
      secondaryAction={{ label: "Read the docs", href: "#docs" }}
      codeTabs={CODE_TABS}
    />
  );
}