Files
zeekayandGitHub e20dc71ad8 i18n: /s* to /z*, the app's rooms and settings read their copy through t (#69)
The product pages from /s3 to /zap, /university and its course data,
/trust, /security, /sdks, /support, /tasks, /startups, /sms-opt-in, the
buying specialist, Zen, Kai's guide, Studio, the settings pages, and the
shared sales, solutions, zap and ui pieces. Client code draws with t(),
server components with <T>, copy held as data is marked with phrase()
and drawn through t() where it lands. A link or a figure inside a
sentence is a value, so a translator reorders the whole sentence.

Rebased on main: every page main moved onto Fold or Steps keeps main's
layout, with its words wrapped (label, title, lede, points). Steps now
draws a step's body through t, as it already drew the title. Settings
keeps main's usage panel, refresh, rewards wallet and sign-in wallet
rows, each label wrapped.

Left English: the skills page's install line (a command and two URLs),
and the solution eyebrow and sibling heading built from a kind label.

Claude-Session: https://claude.ai/code/session_015XYKLjZtDTJEnMo4eK3AFH
2026-10-29 23:51:44 -07:00

121 lines
3.5 KiB
TypeScript

import { Code } from '@/components/code'
import type { Example } from '@/components/products/CodeExamplesSection'
import SdksPage from './view'
import { phrase } from '@hanzo/i18n'
// The gateway answers both SDK shapes, verified live against api.hanzo.ai:
// POST /v1/chat/completions (OpenAI, Bearer) and POST /v1/messages (Anthropic,
// x-api-key). Model ids are real entries from GET /v1/models.
const openaiExamples = [
{
language: "python",
label: "Python",
description: phrase("Point the official OpenAI SDK at the Hanzo gateway."),
code: `from openai import OpenAI
client = OpenAI(
base_url="https://api.hanzo.ai/v1",
api_key="hk-...", # your Hanzo API key
)
resp = client.chat.completions.create(
model="zen5", # any model on the gateway
messages=[{"role": "user", "content": "Hello!"}],
)
print(resp.choices[0].message.content)`,
},
{
language: "typescript",
label: "TypeScript",
description: phrase("The OpenAI JS SDK — just change baseURL."),
code: `import OpenAI from "openai";
const client = new OpenAI({
baseURL: "https://api.hanzo.ai/v1",
apiKey: "hk-...",
});
const resp = await client.chat.completions.create({
model: "zen5",
messages: [{ role: "user", content: "Hello!" }],
});
console.log(resp.choices[0].message.content);`,
},
{
language: "curl",
label: "cURL",
description: phrase("OpenAI-style: Authorization: Bearer."),
code: `curl https://api.hanzo.ai/v1/chat/completions \\
-H "Authorization: Bearer $HANZO_API_KEY" \\
-H "Content-Type: application/json" \\
-d '{
"model": "zen5",
"messages": [{"role": "user", "content": "Hello!"}]
}'`,
},
]
const anthropicExamples = [
{
language: "python",
label: "Python",
description: phrase("Point the official Anthropic SDK at the Hanzo gateway."),
code: `from anthropic import Anthropic
client = Anthropic(
base_url="https://api.hanzo.ai",
api_key="hk-...", # sent as the x-api-key header
)
msg = client.messages.create(
model="zen5",
max_tokens=1024,
messages=[{"role": "user", "content": "Hello!"}],
)
print(msg.content[0].text)`,
},
{
language: "typescript",
label: "TypeScript",
description: phrase("The Anthropic JS SDK — just change baseURL."),
code: `import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic({
baseURL: "https://api.hanzo.ai",
apiKey: "hk-...",
});
const msg = await client.messages.create({
model: "zen5",
max_tokens: 1024,
messages: [{ role: "user", content: "Hello!" }],
});
console.log(msg.content[0].text);`,
},
{
language: "curl",
label: "cURL",
description: phrase("Anthropic-style: /v1/messages, x-api-key header."),
code: `curl https://api.hanzo.ai/v1/messages \\
-H "x-api-key: $HANZO_API_KEY" \\
-H "anthropic-version: 2023-06-01" \\
-H "Content-Type: application/json" \\
-d '{
"model": "zen5",
"max_tokens": 1024,
"messages": [{"role": "user", "content": "Hello!"}]
}'`,
},
]
/** The grammar each tab's language is written in. */
const GRAMMAR: Record<string, string> = { python: 'python', typescript: 'typescript', curl: 'bash' }
const highlight = (examples: Omit<Example, 'sample'>[]): Example[] =>
examples.map((e) => ({ ...e, sample: <Code lang={GRAMMAR[e.language]} code={e.code} /> }))
/** The page, with every sample highlighted where it is built (components/code). */
export default function Page() {
return <SdksPage openai={highlight(openaiExamples)} anthropic={highlight(anthropicExamples)} />
}