OpenCode

A console built around quiet neutral surfaces, compact controls, blue accents, and precise usage charts. Reconstructed from OpenCode Console's Activity page.

The example follows your light or dark theme. Hover the announcement, inspect the charts, or shuffle the getting-started cards. The guide, workspace switcher, and search are interactive. All account and usage data below is fictional.

App shell

A wide Activity workspace with a connection guide, usage charts and a compact context rail.

Connect OpenCode

Once connected you can access everything available in Console. Not installed yet?Download OpenCode

Install OpenCode Desktop
Skip this if you already have it
Download for macOS
Connect this workspace
In the app, choose Connect provider → OpenCode Console. Your browser opens; approve the sign-in and pick Default.
Choose a model
Pick a model from the model selector, or run /models in the prompt.

Install OpenCode
curl -fsSL https://opencode.ai/v2/install | bash
Connect this workspace
Start opencode, run /connect, choose OpenCode Console, and approve the connection in your browser.
Choose a model
Run /models to see the models this workspace can use.

Sign in from the command line
For scripts, CI or an existing install. Not installed yet? Use the Terminal tab first.
opencode auth login opencode
Choose a model
Run /models in the terminal or Desktop app, to see available models.

Create an API key
Create a service account for your app or CI, then add a key to it. The key is shown once and only works in this workspace.

Make a request

Console serves OpenAI, Anthropic and Gemini-compatible APIs. Swap the base URL in your existing client.

curl -X POST "https://opencode.ai/inference/openai/v1/chat/completions" \
  -H "Authorization: Bearer $OPENCODE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "model": "kimi-k2.6", "messages": [{ "role": "user", "content": "Say hi" }] }'

import OpenAI from "openai"

const client = new OpenAI({
  baseURL: "https://opencode.ai/inference/openai/v1",
  apiKey: process.env.OPENCODE_API_KEY, // Your API key
})

const res = await client.chat.completions.create({
  model: "kimi-k2.6",
  messages: [{ role: "user", content: "Say hi" }],
})

from openai import OpenAI
import os

client = OpenAI(
    base_url="https://opencode.ai/inference/openai/v1",
    api_key=os.environ["OPENCODE_API_KEY"],  # Your API key
)

res = client.chat.completions.create(
    model="kimi-k2.6",
    messages=[{"role": "user", "content": "Say hi"}],
)

See all models with GET https://opencode.ai/inference/v1/models · Inference API docs

16%

Go usage · Renews Nov 18 · On pace for 32%

Limits

When your Go usage resets

RollingResets in 3h 37m5% used

WeeklyResets in 6d 15h5% used

MonthlyResets in 15d 23h16% used

Models

Most used this period

Extra usage

Off · Requests pause at a limit

Available credit$0.00

Keep working past a limit

Interactive example · Fictional workspace and usage data

Palette

The neutral ladder carries the layout; blue marks focus and announcements, while green and amber distinguish actual usage from its forecast. Each pair below shows the theme’s light and dark values, independent of the current page mode.

Surfaces

Outer canvas--oc-deep

Light · #FAFAFADark · #080808

Canvas--oc-base

Light · #FFFFFFDark · #161616

Card / popup--oc-surface

Light · #FAFAFADark · #242424

Inset / code--oc-layer2

Light · #F2F2F2Dark · #2E2E2E

Raised surface--oc-layer3

Light · #EEEEEEDark · #3A3A3A

Control track--oc-layer4

Light · #DBDBDBDark · #5C5C5C

Text

Primary ink--oc-ink

Light · #161616Dark · #FAFAFA

Secondary ink--oc-secondary

Light · #5C5C5CDark · #AEAEAE

Faint / metadata--oc-faint

Light · #808080Dark · #808080

Signals

Accent--oc-accent

Light · #3B5CF6Dark · #A2BCFF

Keyboard focus--oc-focus

Light · #7698FDDark · #7698FD

Success / usage--oc-success

Light · #198B43Dark · #6BD586

Warning / forecast--oc-warning

Light · #CB9F34Dark · #F2CF76

Danger / errors--oc-danger

Light · #B82D35Dark · #F17471

Edges and interaction overlays

Border--oc-border

Light · Black 10%Dark · White 10%

Muted border--oc-border-muted

Light · Black 8%Dark · White 8%

Hover overlay--hover

Light · Black 4%Dark · White 6%

Pressed overlay--active

Light · Black 8%Dark · White 10%

Type

Inter carries the console with 440 regular and 530 emphasis. The hierarchy comes from a small set of sizes and quieter ink, rather than a different face for each section. Code declares IBM Plex Mono with a monospace fallback; this theme does not download an additional code font.

21 / 28 · 530 · KPI

15%

15 / 20 · 530 · section heading

Connect OpenCode

13 / 20 · 440 · body

Once connected you can access everything available in Console.

13 / 20 · 530 · emphasis

Choose a model

11 / 16 · 440 · chart metadata

Actual usage · Projected usage · Plan limit

13 / 20 · 400 · codeopencode auth login opencode

Surfaces and elevation

Canvas, cards, and code blocks each take one step up the ladder. Neutral actions use a fine shadow edge and a short shadow instead of an additional border. Menus gain a floating shadow; large content cards keep a quiet hairline.

Canvas · --oc-base

Card · --oc-surface

One surface above the canvas.

Inset · --oc-layer2

Floating surface

Same card color, separate elevation.

Hairline edge + two short shadows

Controls and density

These specimens use the published BoringUI Button. The neutral adapter supplies the source’s fill and complete shadow on one surface; ghost and icon actions keep their built-in press and focus behavior.

Try a control to see its local response.

Console geometry
Surface	Height	Corners / spacing
Small icon actions	20px	4px radius · 16px icon
Compact actions / Activity tabs	24px	4px radius
Icon actions	24px	6px radius
Regular / large icon actions	28px	6px radius
Neutral form actions	32px	6px radius · 15px horizontal padding
Underline navigation	48px	28px inner label · 11px horizontal padding
Ordinary cards / code blocks	Content-sized	6px radius · 16px content inset
Onboarding card	157px	12px radius · 16px content inset

Motion and interaction

Keep one surface through a disclosure. The announcement retains its full card and changes the clip, with a blur crossfade between the pill and detail. Hover, keyboard focus, touch, and Escape share the same state.
Move cards, not just labels. Onboarding retains keyed layers while the outgoing card recedes or moves down and the next card advances. Interrupted travel resumes from the current presentation values.
Preserve working state. Collapsing the guide retains its selected platform, installation method, and SDK language. Hidden content leaves the keyboard path.
Honor reduced motion. Remove travel and blur; keep a short opacity change where it helps explain the state. No extra decorative motion belongs on static documentation.
Make focus visible. Keep the theme-aware focus ring, a single focus treatment per control, and one horizontal icon-and-label row through loading and compact sizes.

Apply the theme

Load this example’s theme stylesheet, then wrap a console surface in .opencode-theme to scope these tokens, typography, and semantic BoringUI color mappings. Portalled menus and dialogs need that scope on their content too, since they render outside the wrapped subtree.

import "@/app/themes/opencode/theme.css";

<div className="opencode-theme">
  {/* Compose published BoringUI controls here. */}
</div>

The class alone does not install a theme or its controls; keep the stylesheet and the published components together. The scoped blue is --oc-accent, while semantic --accent stays neutral. A primary action pairs an ink fill with reverse foreground text. For a whole application, choose OpenCode in the theme skin selector. Its root skin uses data-boring-theme="opencode". The “Make them yours” palette and font settings apply across the site; density and shape remain independent choices. The console example adds source-specific geometry through its local adapters rather than changing every BoringUI control.

OpenCode

App shell

Install OpenCode Desktop

Connect this workspace

Choose a model

Install OpenCode

Connect this workspace

Choose a model

Sign in from the command line

Choose a model

Create an API key

Make a request

16%

Limits

Models

Extra usage

Palette

Surfaces

Text

Signals

Edges and interaction overlays

Type

Surfaces and elevation

Controls and density

Motion and interaction

Apply the theme