@stainless-api/docs 0.1.0-beta.78 → 0.1.0-beta.79

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.79
+
+### Minor Changes
+
+- 32b2c88: add simple request fields to request builder
+- 6fd3625: Introduce experimentalRequestBuilder to hydrate within code snippets
+- 98166fd: Adds CLI docs
+
+### Patch Changes
+
+- 7a79858: more aggressively suppress dev-server waterfalls through ai-chat
+- Updated dependencies [32b2c88]
+- Updated dependencies [6fd3625]
+- Updated dependencies [98166fd]
+  - @stainless-api/docs-ui@0.1.0-beta.59
+  - @stainless-api/docs-search@0.1.0-beta.12
+
 ## 0.1.0-beta.78
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.78",
+  "version": "0.1.0-beta.79",
   "publishConfig": {
     "access": "public"
   },
@@ -58,8 +58,8 @@
     "vite-plugin-prebundle-workers": "^0.2.0",
     "web-worker": "^1.5.0",
     "yaml": "^2.8.2",
-    "@stainless-api/docs-search": "0.1.0-beta.11",
-    "@stainless-api/docs-ui": "0.1.0-beta.58",
+    "@stainless-api/docs-search": "0.1.0-beta.12",
+    "@stainless-api/docs-ui": "0.1.0-beta.59",
     "@stainless-api/ui-primitives": "0.1.0-beta.43"
   },
   "devDependencies": {
@@ -75,7 +75,7 @@
     "vite": "^6.4.1",
     "zod": "^4.3.5",
     "@stainless/eslint-config": "0.1.0-beta.1",
-    "@stainless/sdk-json": "^0.1.0-beta.2"
+    "@stainless/sdk-json": "^0.1.0-beta.3"
   },
   "scripts": {
     "vendor-deps": "tsx scripts/vendor_deps.ts",

package/plugin/assets/languages/cli.svg

@@ -0,0 +1,14 @@
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      width="24"
+      height="24"
+      fill="nopne"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M3.25 3A2.25 2.25 0 0 0 1 5.25v9.5A2.25 2.25 0 0 0 3.25 17h13.5A2.25 2.25 0 0 0 19 14.75v-9.5A2.25 2.25 0 0 0 16.75 3zm.943 8.752a.75.75 0 0 1 .055-1.06L6.128 9l-1.88-1.693a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 0 1-1.06-.055M9.75 10.25a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5z"
+        clip-rule="evenodd"
+        fill="#a2a1a1"
+      />
+    </svg>

package/plugin/components/RequestBuilder/ParamEditor.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { Button } from '@stainless-api/ui-primitives';
+import type { Param } from './spec-helpers';
+import { InfoIcon } from 'lucide-react';
+import { Input } from '@stainless-api/docs-ui/components';
+
+function setHighlight(stainlessPath: string, highlighted: boolean) {
+  const ele = document.getElementById(stainlessPath);
+  if (!ele) return;
+  ele.classList.toggle('stldocs-property-highlighted', highlighted);
+  if (highlighted) {
+    if (location.hash) {
+      const prevScroll = document.documentElement.scrollTop;
+      location.hash = '';
+      document.documentElement.scrollTop = prevScroll;
+    }
+    if (document.body.clientWidth >= 1280) {
+      ele.scrollIntoView({
+        behavior: 'smooth',
+      });
+    }
+  }
+}
+
+function htmlToText(html: string) {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content.textContent;
+}
+
+export function ParamEditor({ param }: { param: Param }) {
+  const type = useMemo(() => htmlToText(param.type), [param.type]);
+
+  return (
+    <label className="request-builder-param">
+      <Button
+        className="request-builder-param-info-button"
+        variant="ghost"
+        href={`#${encodeURIComponent(param.stainlessPath)}`}
+      >
+        <Button.Icon icon={InfoIcon} size={16} />
+      </Button>
+
+      <span className="request-builder-param-label">{param.key}</span>
+      <span className="request-builder-param-colon">:</span>
+
+      <Input
+        className="request-builder-param-value"
+        onFocus={() => setHighlight(param.stainlessPath, true)}
+        onBlur={() => setHighlight(param.stainlessPath, false)}
+        placeholder={type}
+      />
+    </label>
+  );
+}

package/plugin/components/RequestBuilder/SnippetStainlessIsland.tsx

@@ -0,0 +1,107 @@
+import { useState, useMemo, useEffect, useId, useSyncExternalStore, Activity, Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '@stainless-api/ui-primitives';
+import { PlayIcon, RotateCcw } from 'lucide-react';
+import { SnippetStainlessIslandPropsSchema } from './props';
+import { ParamEditor } from './ParamEditor';
+import './styles.css';
+
+function useRequiredChild<T extends Element = Element>(
+  parent: Element | null,
+  selector: string,
+): React.RefObject<T> {
+  const elementRef = useMemo(() => {
+    const el = parent?.querySelector<T>(selector);
+    return el ? { current: el } : null;
+  }, [parent, selector]);
+  if (!elementRef) throw new Error(`Required child not found: ${selector}`);
+  return elementRef;
+}
+
+function useSetVisibility(elementRef: React.RefObject<HTMLElement>, visible: boolean) {
+  useEffect(() => {
+    elementRef.current.style.display = visible ? '' : 'none';
+  }, [elementRef, visible]);
+}
+
+export default function SnippetStainlessIsland({ parent }: { parent: HTMLElement }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const trigger = useRequiredChild<HTMLButtonElement>(parent, '.try-it-footer .try-it-button');
+  const codeContainer = useRequiredChild<HTMLElement>(parent, '.stldocs-snippet-code');
+  const exampleContainer = useRequiredChild<HTMLElement>(parent, '.stldocs-snippet-multi-response');
+  useSetVisibility(codeContainer, !expanded);
+  useSetVisibility(exampleContainer, !expanded);
+  useSetVisibility(trigger, !expanded);
+  // Attach click handler to trigger
+  useEffect(() => {
+    if (!trigger.current) return;
+    const ac = new AbortController();
+    trigger.current.addEventListener('click', () => setExpanded(true), { signal: ac.signal });
+    return () => ac.abort();
+  });
+
+  const requestBuilderContainer = useRequiredChild<HTMLElement>(parent, '.request-builder-container');
+  const requestBuilderFooter = useRequiredChild<HTMLElement>(parent, '.request-builder-footer');
+  const requestBuilderResponse = useRequiredChild<HTMLElement>(parent, '.request-builder-response');
+  const requestBuilderProps = useRequiredChild<HTMLTemplateElement>(parent, '.request-builder-props').current;
+  const serializedProps = useSyncExternalStore(
+    (cb) => {
+      const mutationObserver = new MutationObserver(() => cb());
+      mutationObserver.observe(requestBuilderProps, { childList: true });
+      return () => mutationObserver.disconnect();
+    },
+    () => requestBuilderProps.content.textContent,
+  );
+  const deserializedProps = SnippetStainlessIslandPropsSchema.parse(JSON.parse(serializedProps));
+  const groupedParams = Map.groupBy(deserializedProps.params, (p) => p.location);
+
+  const formId = `request-builder-form-${useId()}`;
+
+  return (
+    <>
+      {createPortal(
+        <Activity mode={expanded ? 'visible' : 'hidden'}>
+          <form
+            onSubmit={(e) => {
+              alert('TODO: Submit button clicked');
+              e.preventDefault();
+            }}
+            id={formId}
+          >
+            {[...groupedParams.entries()].map(([location, params]) => (
+              <Fragment key={location}>
+                <h4>{location} parameters</h4>
+                {params.map((e) => (
+                  <ParamEditor param={e} key={e.location + e.key} />
+                ))}
+              </Fragment>
+            ))}
+          </form>
+        </Activity>,
+        requestBuilderContainer.current,
+      )}
+
+      {createPortal(
+        <Activity mode={expanded ? 'visible' : 'hidden'}>
+          <Button variant="ghost" border={true} onClick={() => setExpanded(false)}>
+            <Button.Icon icon={RotateCcw} />
+          </Button>
+
+          <Button variant="success" className="send-button" type="submit" form={formId}>
+            <Button.Label>Send</Button.Label>
+            <Button.Icon icon={PlayIcon} />
+          </Button>
+        </Activity>,
+        requestBuilderFooter.current,
+      )}
+
+      {createPortal(
+        <Activity mode={expanded ? 'visible' : 'hidden'}>
+          <div>{/* TODO */}</div>
+        </Activity>,
+        requestBuilderResponse.current,
+      )}
+    </>
+  );
+}

package/plugin/components/RequestBuilder/index.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import * as SDKJSON from '@stainless/sdk-json';
+import { useSpec } from '@stainless-api/docs-ui/contexts';
+import { extractParams } from './spec-helpers';
+import type { SnippetStainlessIslandProps } from './props';
+
+/** Load and process the spec on the server side to avoid inflating client bundle */
+export function RequestBuilder({
+  className,
+  children,
+  method,
+}: {
+  className: string;
+  children: ReactNode;
+  method: SDKJSON.Method;
+}) {
+  const spec = useSpec();
+  if (!spec) throw new Error('Spec is required for RequestBuilder');
+  const params = spec && extractParams(spec, method);
+  const [httpMethod, path] = method.endpoint.split(' ') as [string, string];
+
+  return (
+    <stl-island component="SnippetStainlessIsland" className={className}>
+      {/* Pass state down to the client component. TODO: we need a better solution for this */}
+      <template className="request-builder-props">
+        {JSON.stringify({ method: httpMethod, path, params } satisfies SnippetStainlessIslandProps)}
+      </template>
+      {children}
+    </stl-island>
+  );
+}

package/plugin/components/RequestBuilder/props.ts

@@ -0,0 +1,9 @@
+import z from 'zod';
+import { ParamSchema } from './spec-helpers';
+
+export const SnippetStainlessIslandPropsSchema = z.object({
+  method: z.string(),
+  path: z.string(),
+  params: z.array(ParamSchema),
+});
+export type SnippetStainlessIslandProps = z.infer<typeof SnippetStainlessIslandPropsSchema>;

package/plugin/components/RequestBuilder/spec-helpers.ts

@@ -0,0 +1,50 @@
+import type * as SDKJSON from '@stainless/sdk-json';
+import { printer } from '@stainless-api/docs-ui/markdown';
+import z from 'zod';
+
+export const ParamSchema = z.object({
+  stainlessPath: z.string(),
+  location: z.string(),
+  key: z.string(),
+  type: z.string(),
+});
+
+export type Param = z.infer<typeof ParamSchema>;
+
+export function extractParams(spec: SDKJSON.Spec | undefined, method: SDKJSON.Method): Param[] {
+  const httpDecls = spec?.decls?.http;
+  if (!httpDecls) throw new Error('expected http language to be present in SDKJSON');
+  const decl = httpDecls?.[method.stainlessPath];
+  if (decl?.kind !== 'HttpDeclFunction') {
+    throw new Error(
+      'expected HttpDeclFunction at stainlessPath "' + method.stainlessPath + '", got ' + decl?.kind,
+    );
+  }
+  const bodyTypes = Object.keys(decl.bodyParamsChildren ?? {});
+  if (bodyTypes.length > 0 && !bodyTypes.includes('application/json')) {
+    throw new Error('TODO: support non-json body params');
+  }
+  const bodyParams = decl.bodyParamsChildren?.['application/json'];
+  const params = [
+    ...Object.entries(decl.paramsChildren ?? {}).map(([location, children]) => ({ location, children })),
+    ...(bodyParams ? [{ location: 'body', children: bodyParams }] : []),
+  ]
+    .filter((e) => e.children.length)
+    .flatMap(({ location, children }) =>
+      children.map((child) => {
+        const resolved = httpDecls[child];
+        if (resolved?.kind !== 'HttpDeclProperty') {
+          throw new Error(
+            'expected HttpDeclProperty at stainlessPath "' + child + '", got ' + resolved?.kind,
+          );
+        }
+        return {
+          stainlessPath: resolved.stainlessPath,
+          location,
+          key: resolved.key,
+          type: (resolved.optional ? 'optional ' : '') + printer.type('http', resolved.type),
+        };
+      }),
+    );
+  return params;
+}

package/plugin/components/RequestBuilder/styles.css

@@ -0,0 +1,67 @@
+.request-builder-container form {
+  display: grid;
+
+  /* prettier-ignore */
+  grid-template-columns: /*info button*/max-content /*label*/max-content /*colon*/max-content /*input*/1fr;
+  font-family: var(--stl-typography-font);
+  font-size: var(--stl-typography-text-body-sm);
+  color: var(--stl-color-foreground);
+
+  & > * {
+    padding-inline-start: 12px;
+    padding-inline-end: 8px;
+  }
+
+  & > h4 {
+    grid-column: 1 / -1;
+    text-transform: capitalize;
+    font-size: var(--stl-typography-scale-sm);
+    margin-top: 0;
+    margin-bottom: 0.25em;
+    color: var(--stl-color-foreground-muted);
+    padding-top: 0.75rem;
+
+    &:not(:first-child) {
+      border-top: 1px solid var(--stl-color-border);
+    }
+  }
+
+  .request-builder-param {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    align-items: center;
+    column-gap: 0.5rem;
+    padding-block: 0.35rem;
+
+    .request-builder-param-info-button {
+      color: var(--stl-color-foreground-muted);
+      margin-inline: -4px;
+      padding: 0;
+    }
+    .request-builder-param-label {
+      font-family: var(--stl-typography-font-mono);
+    }
+    .request-builder-param-colon {
+      font-family: var(--stl-typography-font-mono);
+      color: var(--stl-color-foreground-muted);
+    }
+    /* TODO: new input component that is better stylable */
+    .request-builder-param-value {
+      input {
+        margin: 6px 8px;
+        font-size: inherit;
+      }
+    }
+
+    &:has(+ h4),
+    &:last-child {
+      padding-bottom: 0.75rem;
+    }
+  }
+}
+
+.request-builder-footer .stl-ui-button--ghost .stl-ui-button__icon {
+  color: var(--stl-color-foreground);
+  opacity: var(--stl-opacity-level-040);
+}

package/plugin/components/SnippetCode.tsx

@@ -1,7 +1,7 @@
-import type {
-  SnippetCodeProps,
-  SnippetContainerProps,
-  SnippetRequestContainerProps,
+import {
+  type SnippetCodeProps,
+  type SnippetContainerProps,
+  SnippetResponse as DocsUiSnippetResponse,
 } from '@stainless-api/docs-ui/components';
 import { useHighlight, useLanguage } from '@stainless-api/docs-ui/contexts';
 import style from '@stainless-api/docs-ui/style';
@@ -9,10 +9,13 @@ import * as cheerio from 'cheerio/slim';
 import {
   EXPERIMENTAL_COLLAPSIBLE_SNIPPETS,
   EXPERIMENTAL_PLAYGROUNDS,
+  EXPERIMENTAL_REQUEST_BUILDER,
 } from 'virtual:stl-starlight-virtual-module';
 import clsx from 'clsx';
 import { Button } from '@stainless-api/ui-primitives';
-import { CopyIcon } from 'lucide-react';
+import { CopyIcon, PlayIcon } from 'lucide-react';
+import React from 'react';
+import { RequestBuilder } from './RequestBuilder';
 
 function PlaygroundIcon() {
   return (
@@ -149,38 +152,18 @@ function useIsCollapsible({ signature }: { signature?: string }): boolean {
   return Boolean(EXPERIMENTAL_COLLAPSIBLE_SNIPPETS && signature && language);
 }
 
-export function SnippetRequestContainer({ children, signature }: SnippetRequestContainerProps) {
+export function SnippetContainer({ children, signature, method }: SnippetContainerProps) {
   const isCollapsible = useIsCollapsible({ signature });
-
-  return (
-    <div className="stl-snippet-request-container">
-      {children}
-      {signature && isCollapsible && (
-        <Button
-          className={'stl-snippet-expand-button'}
-          id="stl-snippet-expand-button"
-          size="sm"
-          variant="outline"
-        >
-          Show more
-        </Button>
-      )}
-    </div>
+  const className = clsx(
+    style.Snippet,
+    isCollapsible ? 'stl-snippet-collapsible' : 'stl-snippet-non-collapsible',
   );
-}
-
-export function SnippetContainer({ children, signature }: SnippetContainerProps) {
-  const isCollapsible = useIsCollapsible({ signature });
-
-  return (
-    <div
-      className={clsx(
-        style.Snippet,
-        isCollapsible ? 'stl-snippet-collapsible' : 'stl-snippet-non-collapsible',
-      )}
-    >
+  return EXPERIMENTAL_REQUEST_BUILDER ? (
+    <RequestBuilder className={className} method={method}>
       {children}
-    </div>
+    </RequestBuilder>
+  ) : (
+    <div className={className}>{children}</div>
   );
 }
 
@@ -218,11 +201,52 @@ export function SnippetCode({ content, signature, language: forcedLanguage }: Sn
   }
 
   return (
-    <div
-      className={clsx(style.SnippetCode, isCollapsible && 'stl-snippet-code-is-collapsed')}
-      data-snippet-expanded-offset={offset}
-      data-stldocs-copy-content
-      dangerouslySetInnerHTML={{ __html: highlighted }}
-    />
+    <>
+      <div
+        className={clsx(style.SnippetCode, isCollapsible && 'stl-snippet-code-is-collapsed')}
+        data-snippet-expanded-offset={offset}
+        data-stldocs-copy-content
+        dangerouslySetInnerHTML={{ __html: highlighted }}
+      />
+      {signature && isCollapsible && (
+        <Button
+          className={'stl-snippet-expand-button'}
+          id="stl-snippet-expand-button"
+          size="sm"
+          variant="outline"
+        >
+          Show more
+        </Button>
+      )}
+      {EXPERIMENTAL_REQUEST_BUILDER && (
+        <div className="request-builder-container" style={{ display: 'contents' }}></div>
+      )}
+    </>
+  );
+}
+
+export function SnippetFooter() {
+  if (!EXPERIMENTAL_REQUEST_BUILDER) return null;
+  return (
+    <div className={clsx(style.SnippetFooter, 'try-it-footer')}>
+      {EXPERIMENTAL_REQUEST_BUILDER && (
+        <div className="request-builder-footer" style={{ display: 'contents' }}></div>
+      )}
+      <Button variant="accent" className="try-it-button">
+        <Button.Label>Try it</Button.Label>
+        <Button.Icon icon={PlayIcon} />
+      </Button>
+    </div>
+  );
+}
+
+export function SnippetResponse({ ...props }: React.ComponentProps<typeof DocsUiSnippetResponse>) {
+  return (
+    <>
+      <DocsUiSnippetResponse {...props} />
+      {EXPERIMENTAL_REQUEST_BUILDER && (
+        <div className="request-builder-response" style={{ display: 'contents' }} />
+      )}
+    </>
   );
 }

package/plugin/components/StainlessIslands.tsx

@@ -0,0 +1,126 @@
+/**
+ * Technical overview:
+ * - `StainlessIslands.ts` is an Astro Client Island wherein we register a HTML custom element called `stl-island`
+ *     - When a `<stl-island component="MyComponent">` is added to the DOM, we:
+ *         1. receive a callback from the browser
+ *         2. dynamic-import `MyComponent`
+ *         3. create an instance of `MyComponent`, to which we pass the **`stl-island` DOM node** as a prop named `parent`
+ *         4. register the (`stlIslandDomNode` → `ReactNode`) pair in a global map named `roots`
+ *     - The actual Astro client island is a simple React component that renders all of the ReactNodes from the global `roots` map
+ *         - it uses a `useSyncExternalStore` to be notified of changes to the global `roots` map by registering a callback
+ *     - Each “stainless island” (instantiated by the custom element handler and rendered by the Astro client island) is responsible for using the `parent` prop it receives to identify one or more **portal targets** into which it can render its contents.
+ *         - the react parent of all Stainless Islands is the global `<StainlessIslands client:load />` singleton, but the _DOM parent_ is the various portal targets of all of the stainless islands
+ */
+
+import { useSyncExternalStore, ReactNode } from 'react';
+
+type StlIslandComponent = ({ parent }: { parent: HTMLElement }) => ReactNode;
+
+/**
+ * Register new Stainless Islands in this map.
+ * The component should be the default export and should be able to be dynamic-imported.
+ * The component should accept a single prop: `parent: HTMLElement`, which is the DOM node of the `<stl-island>` element.
+ * The component can create portals to render into the DOM subtree of the `parent`.
+ */
+const componentsMap: Record<string, () => Promise<{ default: StlIslandComponent }>> = {
+  SnippetStainlessIsland: () => import('./RequestBuilder/SnippetStainlessIsland'),
+};
+
+interface State {
+  roots: Map<HTMLElement, ReactNode>;
+  onRootsChange?: (() => void) | undefined;
+}
+
+// keep state in import.meta.hot.data so that our record of our react roots is not lost across HMR
+const state: State = import.meta.hot?.data?.state ?? {
+  roots: new Map(),
+};
+
+if (import.meta.hot?.data) {
+  import.meta.hot.data.state = state;
+}
+
+let key = 0;
+
+/**
+ * Custom element mounts and unmounts components and gives them a reference to the parent
+ * so they can render in portals.
+ */
+class StlIsland extends (globalThis?.HTMLElement ?? Object) {
+  connectedCallback(this: StlIsland) {
+    const componentName = this.getAttribute('component');
+    if (!componentName) {
+      console.error('[stl-island] missing required attribute "component"');
+      return;
+    }
+
+    if (!componentsMap[componentName]) {
+      console.error(`[stl-island] unknown component "${componentName}"`);
+      return;
+    }
+
+    componentsMap[componentName]().then(
+      ({ default: Component }) => {
+        state.roots = new Map(state.roots).set(this, <Component parent={this} key={key++} />);
+        state.onRootsChange?.();
+      },
+      (e) => {
+        console.error(`[stl-island] failed to load component "${componentName}":`, e);
+      },
+    );
+  }
+  connectedMoveCallback() {
+    // empty so we don't get disconnected/reconnected if the dom element gets moved
+  }
+  disconnectedCallback() {
+    state.roots = new Map(state.roots);
+    state.roots.delete(this);
+    state.onRootsChange?.();
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('stl-island')) {
+  customElements.define('stl-island', StlIsland);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'stl-island': StlIsland;
+  }
+}
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      // client-loaded
+      'stl-island': React.DetailedHTMLProps<React.HTMLAttributes<StlIsland>, StlIsland> & {
+        component: keyof typeof componentsMap;
+      };
+    }
+  }
+}
+
+/** Renders all StainlessIslands that have been registered in the global `state.roots` map */
+function StainlessIslandsInner() {
+  const roots = useSyncExternalStore<Map<HTMLElement, ReactNode> | null>(
+    (onChange) => {
+      state.onRootsChange = onChange;
+      return () => {
+        state.onRootsChange = undefined;
+      };
+    },
+    () => {
+      return state.roots;
+    },
+    () => null,
+  );
+  if (!roots) return null;
+  return [...roots.values()];
+}
+
+export function StainlessIslands() {
+  // Astro tries to call this function outside of react to detect if it's
+  // an Astro JSX or React JSX component, which causes warnings if we use hooks,
+  // so we use a wrapper component to avoid the hook calls.
+  return <StainlessIslandsInner />;
+}

package/plugin/index.ts

@@ -313,6 +313,7 @@ async function stlStarlightAstroIntegration(
                         PROPERTY_SETTINGS: pluginConfig.propertySettings,
                         ENABLE_CONTEXT_MENU: pluginConfig.contextMenu,
                         EXPERIMENTAL_PLAYGROUNDS: !!pluginConfig.experimentalPlaygrounds,
+                        EXPERIMENTAL_REQUEST_BUILDER: pluginConfig.experimentalRequestBuilder,
                         STAINLESS_PROJECT: version.stainlessProject,
                       } satisfies Omit<typeof StlStarlightVirtualModule, 'MIDDLEWARE'>),
                       vmMiddlewareExport,

package/plugin/languages.ts

@@ -8,6 +8,7 @@ import JavaIcon from './assets/languages/java.svg';
 import GoIcon from './assets/languages/go.svg';
 import CurlIcon from './assets/languages/curl.svg';
 import CSharpIcon from './assets/languages/csharp.svg';
+import CLIIcon from './assets/languages/cli.svg';
 
 export const Languages: Record<
   DocsLanguage,
@@ -31,6 +32,7 @@ export const Languages: Record<
   terraform: { name: 'Terraform', icon: TerraformIcon, alt: 'Terraform logo' },
   ruby: { name: 'Ruby', icon: RubyIcon, alt: 'Ruby logo' },
   csharp: { name: 'C#', icon: CSharpIcon, alt: 'C# logo' },
+  cli: { name: 'CLI Tool', icon: CLIIcon, alt: 'CLI logo' },
   php: { name: 'PHP', icon: CSharpIcon, alt: 'PHP logo' }, // TODO update PHP icon
 };