Skip to content

Add a Custom language option to OpenAPI code samples#4310

Open
zenoachtig wants to merge 4 commits into
mainfrom
claude/exciting-brahmagupta-7cd6fa
Open

Add a Custom language option to OpenAPI code samples#4310
zenoachtig wants to merge 4 commits into
mainfrom
claude/exciting-brahmagupta-7cd6fa

Conversation

@zenoachtig

@zenoachtig zenoachtig commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Overview

  • Adds a Custom language option to the language dropdown of OpenAPI code-sample blocks. Selecting it opens the GitBook Assistant pre-filled as a draft (not sent) — with the current request staged as a reference and the prompt "Rewrite this in the following language: " — so readers can get the request in any language they want.
  • The Custom option shows the primary Assistant logo, a Custom language label, and a Rewrite with {assistantName} subtitle, set apart from the built-in languages by a separator.
  • Every other option (HTTP, cURL, JavaScript, Python, and custom x-codeSamples languages) now shows a language icon in the dropdown.

Implementation notes

  • @gitbook/react-openapi renders the dropdown but can't import the app's AI code, so the assistant is bridged in through a new OpenAPICodeSampleAssistant React context ({ label, icon, onRewrite }). The Custom option only appears when that context is provided.
    • OpenAPISelect gains an action/onAction concept so an item can trigger a side effect without changing the persisted selection (the dropdown stays on the previously selected language).
    • Per-language icons come from a new optional getCodeSampleIcon on the render context; the currently displayed code is read from the panel at click time.
    • Adds 3 translation keys across all 9 locales.
  • gitbook: a new setDraft controller method + inputDraft state lets the chat input be pre-filled without sending (this didn't exist before). OpenAPICodeSampleAIProvider supplies the assistant logo/name and the addReference + setDraft + open action, mounted once in SpaceLayout (covers both the site and the embed). getOpenAPIContext maps languages to icons.

Demo

Verified locally against GitBook's own API reference (assistant enabled):

  • The dropdown shows HTTP / cURL / JavaScript / Python — each with a language icon — then a separator and Custom language with the assistant logo and the Rewrite with GitBook Assistant subtitle.
CleanShot 2026-06-12 at 18 21 26@2x
  • Clicking Custom language opens the assistant with the code staged as a </> HTTP reference chip and the input pre-filled with "Rewrite this in the following language: "not sent (no message posted), with the code-sample selector still on the previously selected language.
CleanShot 2026-06-12 at 18 21 36@2x CleanShot 2026-06-12 at 18 21 56@2x

Validated with bun run typecheck, bun run build, Biome, and the react-openapi unit suite (196 passing).

— Authored by Claude

OpenAPI code-sample blocks now show a language icon next to every option and add a "Custom language" entry that opens the assistant pre-filled (as a draft, not sent) with the current request staged as a reference and the prompt "Rewrite this in the following language: ", letting readers rewrite the request in any language.

- react-openapi: new OpenAPICodeSampleAssistant context the host app fills in; the selector renders per-language icons and the Custom action item (OpenAPISelect gains an action/onAction concept so it fires without changing the selection). Adds getCodeSampleIcon to the render context and 3 translation keys across all locales.
- gitbook: new setDraft controller method + inputDraft state so the chat input can be pre-filled without sending; OpenAPICodeSampleAIProvider bridges the GitBook assistant (logo, name, reference + draft action) into react-openapi, mounted once in SpaceLayout (covers site and embed); maps languages to icons.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jun 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ac15ae7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@gitbook/react-openapi Minor
gitbook Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@argos-ci

argos-ci Bot commented Jun 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
customers-v2-cloudflare (Inspect) ✅ No changes detected - Jun 25, 2026, 2:08 PM
customers-v2-vercel (Inspect) ✅ No changes detected - Jun 25, 2026, 2:08 PM
v2-cloudflare (Inspect) ✅ No changes detected - Jun 25, 2026, 2:15 PM
v2-vercel (Inspect) ⚠️ Changes detected (Review) 4 changed Jun 25, 2026, 2:15 PM
Apply the language/assistant icon spacing via a margin on the icon nodes instead of adding gaps to the shared .openapi-select-item / SelectValue rules. This keeps other OpenAPI selectors (media-type, response examples) visually unchanged, instead of shifting e.g. the response status code + label spacing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…agupta-7cd6fa

# Conflicts:
#	packages/react-openapi/src/OpenAPICodeSampleSelector.tsx
#	packages/react-openapi/src/context.ts
…agupta-7cd6fa

# Conflicts:
#	packages/gitbook/src/components/DocumentView/OpenAPI/style.css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant