mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
11265a21fd
Code on hanzo.ai was plain monospace: 285 blocks across 200 pages, one of them hand-inked in four greys. components/code now renders each sample at build with shiki and @hanzo/ui's codeTheme (Dracula dark, GitHub Light light), every colour written as light-dark() so the page's color-scheme picks it, on the theme's own ground. The page ships the coloured spans and no highlighter; e2e/gates/code.spec.ts holds both. A client page that shows code is split into a server page.tsx that owns the sample and a client view.tsx that takes the highlighted node: ProductLanding's code.source, the blockchain pages' codeExamples, the models kit Sample, the guest-key card, realtime, analytics, payments, sdks and the rest. Transcripts, agent prompts and ASCII diagrams are not code and keep their markup. Takes @hanzo/ui 8.27.83 for codeTheme and @hanzo/design 0.5.35 with it, regenerates app/gui.css for the new theme keys, and lowers the raw-colour allowance to 58: the samples' literal inks are gone.
120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import { Code } from '@/components/code'
|
|
import type { Example } from '@/components/products/CodeExamplesSection'
|
|
import SdksPage from './view'
|
|
|
|
// 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: "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: "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: "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: "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: "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: "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)} />
|
|
}
|