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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant