Code Demo

A ready-made tabbed code sample for calling an OpenAI-compatible API (Python, Node.js, cURL).

A ready-made, tabbed code sample showing how to call an OpenAI-compatible API from Python, Node.js, and cURL. It is a self-contained showcase block built on CodeBlock (with tab switching and copy-to-clipboard) — useful for an API landing page or quickstart.

Import

tsx

1import { CodeDemo } from "@yuhuanowo/yunui/patterns";

Example

The snippets are built in, but every value in them that belongs to your service is a prop. The defaults point at https://api.example.com/v1 so the component renders sensibly before you configure it.

CodeDemo

1import openai
2 
3client = openai.OpenAI(
4    base_url="https://api.example.com/v1",
5    api_key="your_api_key"
6)
7 
8response = client.chat.completions.create(
9    model="deepseek-r1",
10    messages=[{"role": "user", "content": "Hello!"}]
11)
12 
13print(response.choices[0].message.content)

Pointing it at your gateway

Custom gateway

1import openai
2 
3client = openai.OpenAI(
4    base_url="https://api.acme.dev/v1",
5    api_key="sk-..."
6)
7 
8response = client.chat.completions.create(
9    model="acme-large",
10    messages=[{"role": "user", "content": "Summarise this."}]
11)
12 
13print(response.choices[0].message.content)

Props

Prop	Type	Default	Description
apiKeyPlaceholder	string	your_api_key	Placeholder shown where the reader's key goes.
baseUrl	string	https://api.example.com/v1	The OpenAI-compatible base URL the snippets point at.
className	string	—
labels	{ python?: string; javascript?: string; curl?: string \| undefined; } \| undefined	—	Tab labels. Defaults are language names, but they stay overridable.
model	string	deepseek-r1	Model id used in the example request.
prompt	string	Hello!	Message body sent in the example request.

Import

Example

Pointing it at your gateway

Props

On this page