diff --git a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
index 1c1be781d..e67622a2d 100644
--- a/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
+++ b/examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx
@@ -23,8 +23,17 @@ import {
   webSocketEventPromptDialogId,
 } from './WebSocketEventPromptDialog';
 
+import {
+  isServerSideClientEnabled,
+  ServerSideClientPromptDialog,
+  serverSideClientPromptDialogId,
+} from './ServerSideClientPromptDialog';
+
 const actionsMenuDialogId = 'app-actions-menu';
 
+// Read once at module scope — the flag comes from the URL and does not change within a session.
+const serverSideClientEnabled = isServerSideClientEnabled();
+
 const ActionsMenuButton = ({
   iconOnly,
   isOpen,
@@ -79,6 +88,9 @@ export const ActionsMenu = ({ iconOnly = true }: { iconOnly?: boolean }) => {
   const { dialog: webSocketEventDialog } = useDialogOnNearestManager({
     id: webSocketEventPromptDialogId,
   });
+  const { dialog: serverSideClientDialog } = useDialogOnNearestManager({
+    id: serverSideClientPromptDialogId,
+  });
   const menuIsOpen = useDialogIsOpen(actionsMenuDialogId, dialogManager?.id);
 
   return (
@@ -103,10 +115,16 @@ export const ActionsMenu = ({ iconOnly = true }: { iconOnly?: boolean }) => {
         <TriggerNotificationAction onTrigger={notificationDialog.open} />
         <TriggerAttachmentAction onTrigger={attachmentDialog.open} />
         <TriggerWebSocketEventAction onTrigger={webSocketEventDialog.open} />
+        {serverSideClientEnabled && (
+          <TriggerServerSideClientAction onTrigger={serverSideClientDialog.open} />
+        )}
       </ContextMenu>
       <NotificationPromptDialog referenceElement={menuButtonElement} />
       <AttachmentPromptDialog referenceElement={menuButtonElement} />
       <WebSocketEventPromptDialog referenceElement={menuButtonElement} />
+      {serverSideClientEnabled && (
+        <ServerSideClientPromptDialog referenceElement={menuButtonElement} />
+      )}
     </div>
   );
 };
@@ -152,3 +170,17 @@ function TriggerWebSocketEventAction({ onTrigger }: { onTrigger: () => void }) {
     />
   );
 }
+
+function TriggerServerSideClientAction({ onTrigger }: { onTrigger: () => void }) {
+  const { closeMenu } = useContextMenuContext();
+
+  return (
+    <ContextMenuButton
+      label='Server-side Client'
+      onClick={() => {
+        closeMenu();
+        onTrigger();
+      }}
+    />
+  );
+}
diff --git a/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/ServerSideClientPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/ServerSideClientPromptDialog.tsx
new file mode 100644
index 000000000..9d5205aa7
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/ServerSideClientPromptDialog.tsx
@@ -0,0 +1,525 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Notification, StreamChat } from 'stream-chat';
+import {
+  NotificationList,
+  Prompt,
+  useChatContext,
+  useDialogIsOpen,
+  useDialogOnNearestManager,
+  useNotificationApi,
+} from 'stream-chat-react';
+
+import { DraggableDialog } from '../DraggableDialog';
+import { SearchableSelect, type SearchableSelectOption } from '../../SearchableSelect';
+import { createServerSideClient, verifyServerSideClient } from './serverSideClient';
+import {
+  type ChannelMemberSummary,
+  fetchChannelMembers,
+  findMethod,
+  formatPayloadTemplate,
+  getMethodsForEntity,
+  MEMBER_USER_ID_KEY,
+  serverSideEntities,
+  type ServerSideEntity,
+} from './serverSideMethods';
+
+export const serverSideClientPromptDialogId = 'app-server-side-client-prompt-dialog';
+
+const serverSideClientEmitter = 'vite-preview/ServerSideClientPromptDialog';
+
+const isServerSideClientNotification = (notification: Notification) =>
+  notification.origin?.emitter === serverSideClientEmitter;
+
+const toMessage = (error: unknown) =>
+  error instanceof Error ? error.message : String(error);
+
+const Field = ({
+  children,
+  hint,
+  label,
+}: {
+  children: React.ReactNode;
+  hint?: string;
+  label: string;
+}) => (
+  <div className='app__server-client-dialog__field'>
+    <span className='app__server-client-dialog__field-label'>{label}</span>
+    {children}
+    {hint && <p className='app__server-client-dialog__note'>{hint}</p>}
+  </div>
+);
+
+const StepHeading = ({ index, title }: { index: number; title: string }) => (
+  <div className='app__server-client-dialog__step-heading'>
+    <span className='app__server-client-dialog__step-index'>{index}</span>
+    <span>{title}</span>
+  </div>
+);
+
+const entityOptions: SearchableSelectOption<ServerSideEntity>[] = serverSideEntities.map(
+  ({ label, value }) => ({ label, value }),
+);
+
+export const ServerSideClientPromptDialog = ({
+  referenceElement,
+}: {
+  referenceElement: HTMLElement | null;
+}) => {
+  const { client: appClient } = useChatContext();
+  const { addNotification } = useNotificationApi();
+  const { dialog, dialogManager } = useDialogOnNearestManager({
+    id: serverSideClientPromptDialogId,
+  });
+  const dialogIsOpen = useDialogIsOpen(serverSideClientPromptDialogId, dialogManager?.id);
+
+  const [secret, setSecret] = useState('');
+  const [entity, setEntity] = useState<ServerSideEntity>('channel');
+  const [cid, setCid] = useState('');
+  const [methodId, setMethodId] = useState('');
+  const [payload, setPayload] = useState('');
+
+  const [isRunning, setIsRunning] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
+  const [secretCheck, setSecretCheck] = useState<string | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+  const [runError, setRunError] = useState<string | null>(null);
+
+  const [fetchedMembers, setFetchedMembers] = useState<ChannelMemberSummary[]>([]);
+  const [isFetchingMembers, setIsFetchingMembers] = useState(false);
+  const [memberError, setMemberError] = useState<string | null>(null);
+
+  // A server-side client is stateless — no WS, no session — so it is just a token-signing wrapper
+  // around REST calls. Cached per secret purely to avoid re-signing on every Run.
+  const clientCacheRef = useRef<{ client: StreamChat; secret: string } | null>(null);
+
+  const methods = useMemo(() => getMethodsForEntity(entity), [entity]);
+  const selectedMethod = useMemo(() => findMethod(methodId), [methodId]);
+  const methodOptions = useMemo<SearchableSelectOption<string>[]>(
+    () => methods.map((method) => ({ label: method.label, value: method.id })),
+    [methods],
+  );
+
+  // Channels the client has loaded. Recomputed each time the dialog opens rather than subscribed
+  // to — `activeChannels` is a plain record with no change notification, and a debugging dialog
+  // does not need it live. `allowCustomValue` covers anything not in the list.
+  const channelOptions = useMemo<SearchableSelectOption<string>[]>(() => {
+    if (!dialogIsOpen) return [];
+
+    return Object.values(appClient.activeChannels)
+      .map((activeChannel) => activeChannel.cid)
+      .filter((activeChannelCid): activeChannelCid is string => !!activeChannelCid)
+      .sort((left, right) => left.localeCompare(right))
+      .map((activeChannelCid) => ({
+        label: activeChannelCid,
+        value: activeChannelCid,
+      }));
+  }, [appClient, dialogIsOpen]);
+
+  const localMembers = useMemo<ChannelMemberSummary[]>(() => {
+    if (!dialogIsOpen || !cid) return [];
+
+    const members = appClient.activeChannels[cid]?.state?.members ?? {};
+
+    return Object.values(members)
+      .map((member) => ({
+        name: member.user?.name,
+        userId: member.user_id ?? member.user?.id ?? '',
+      }))
+      .filter((member) => !!member.userId);
+  }, [appClient, cid, dialogIsOpen]);
+
+  const memberOptions = useMemo<SearchableSelectOption<string>[]>(() => {
+    // Server results win on collision — they are the authoritative copy.
+    const byUserId = new Map<string, ChannelMemberSummary>();
+    [...localMembers, ...fetchedMembers].forEach((member) => {
+      byUserId.set(member.userId, member);
+    });
+
+    return [...byUserId.values()]
+      .map(({ name, userId }) => ({
+        label: name ? `${name} — ${userId}` : userId,
+        value: userId,
+      }))
+      .sort((left, right) => left.label.localeCompare(right.label));
+  }, [fetchedMembers, localMembers]);
+
+  // The payload is the single source of truth for `user_id`, so the picker reads its value back
+  // out of the JSON. A hand-edited id shows up as the selection, and the two cannot drift apart.
+  const payloadUserId = useMemo(() => {
+    try {
+      const parsed = JSON.parse(payload) as Record<string, unknown>;
+      const value = parsed?.[MEMBER_USER_ID_KEY];
+
+      return typeof value === 'string' ? value : '';
+    } catch {
+      return '';
+    }
+  }, [payload]);
+
+  const resetState = useCallback(() => {
+    setSecret('');
+    setEntity('channel');
+    setCid('');
+    setMethodId('');
+    setPayload('');
+    setIsRunning(false);
+    setIsChecking(false);
+    setSecretCheck(null);
+    setResult(null);
+    setRunError(null);
+    setFetchedMembers([]);
+    setIsFetchingMembers(false);
+    setMemberError(null);
+    clientCacheRef.current = null;
+  }, []);
+
+  // Drops the secret and the cached privileged client as soon as the dialog closes.
+  useEffect(() => {
+    if (dialogIsOpen) return;
+    resetState();
+  }, [dialogIsOpen, resetState]);
+
+  // A new secret invalidates the cached client and any previous check result.
+  useEffect(() => {
+    clientCacheRef.current = null;
+    setSecretCheck(null);
+  }, [secret]);
+
+  // Server-fetched members belong to one CID; changing channel makes them wrong.
+  useEffect(() => {
+    setFetchedMembers([]);
+    setMemberError(null);
+  }, [cid]);
+
+  // Selecting a different entity invalidates the method and its payload template.
+  useEffect(() => {
+    setMethodId('');
+    setPayload('');
+    setResult(null);
+    setRunError(null);
+  }, [entity]);
+
+  const getServerClient = useCallback(async () => {
+    const trimmedSecret = secret.trim();
+
+    if (!trimmedSecret) throw new Error('Enter the API secret first.');
+
+    if (clientCacheRef.current?.secret === trimmedSecret) {
+      return clientCacheRef.current.client;
+    }
+
+    const client = await createServerSideClient({
+      apiKey: appClient.key,
+      secret: trimmedSecret,
+    });
+    clientCacheRef.current = { client, secret: trimmedSecret };
+
+    return client;
+  }, [appClient.key, secret]);
+
+  // Optional convenience: confirms the secret is right before you bother composing a payload.
+  const checkSecret = useCallback(async () => {
+    setIsChecking(true);
+    setSecretCheck(null);
+    try {
+      await verifyServerSideClient(await getServerClient());
+      setSecretCheck('Secret accepted.');
+    } catch (error) {
+      setSecretCheck(toMessage(error));
+    } finally {
+      setIsChecking(false);
+    }
+  }, [getServerClient]);
+
+  const loadMembers = useCallback(async () => {
+    setIsFetchingMembers(true);
+    setMemberError(null);
+    try {
+      const members = await fetchChannelMembers({
+        cid: cid.trim(),
+        client: await getServerClient(),
+      });
+      setFetchedMembers(members);
+
+      if (!members.length) setMemberError('That channel reported no members.');
+    } catch (error) {
+      setMemberError(toMessage(error));
+    } finally {
+      setIsFetchingMembers(false);
+    }
+  }, [cid, getServerClient]);
+
+  // Writes the picked id into the payload rather than holding it in separate state. Overwrites any
+  // existing `user_id` — picking a member is the more deliberate action of the two.
+  const selectMember = useCallback((userId: string) => {
+    setPayload((current) => {
+      try {
+        const parsed = JSON.parse(current) as Record<string, unknown>;
+
+        return `${JSON.stringify({ ...parsed, [MEMBER_USER_ID_KEY]: userId }, null, 2)}\n`;
+      } catch {
+        // Mid-edit invalid JSON — leave the textarea untouched rather than destroying work.
+        setMemberError(
+          'The payload is not valid JSON right now, so `user_id` was left alone.',
+        );
+        return current;
+      }
+    });
+  }, []);
+
+  const selectMethod = useCallback((nextMethodId: string) => {
+    setMethodId(nextMethodId);
+    setResult(null);
+    setRunError(null);
+
+    const method = findMethod(nextMethodId);
+    setPayload(method ? formatPayloadTemplate(method.payloadTemplate) : '');
+  }, []);
+
+  const resetPayload = useCallback(() => {
+    if (!selectedMethod) return;
+    setPayload(formatPayloadTemplate(selectedMethod.payloadTemplate));
+    setResult(null);
+    setRunError(null);
+  }, [selectedMethod]);
+
+  const run = useCallback(async () => {
+    if (!selectedMethod) return;
+
+    setIsRunning(true);
+    setResult(null);
+    setRunError(null);
+
+    try {
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(payload);
+      } catch (error) {
+        throw new Error(`Payload is not valid JSON — ${toMessage(error)}`);
+      }
+
+      const response = await selectedMethod.invoke({
+        cid: entity === 'channel' ? cid.trim() : undefined,
+        client: await getServerClient(),
+        payload: parsed,
+      });
+
+      setResult(JSON.stringify(response, null, 2));
+      addNotification({
+        duration: 4000,
+        emitter: serverSideClientEmitter,
+        incident: {
+          domain: 'api',
+          entity: selectedMethod.entity,
+          operation: selectedMethod.id,
+          status: 'success',
+        },
+        message: `${selectedMethod.id} succeeded`,
+        severity: 'success',
+        targetPanels: ['modal'],
+      });
+    } catch (error) {
+      const message = toMessage(error);
+      setRunError(message);
+      addNotification({
+        // Stays until dismissed — a failure message is worth reading.
+        duration: 0,
+        emitter: serverSideClientEmitter,
+        error: error instanceof Error ? error : new Error(message),
+        incident: {
+          domain: 'api',
+          entity: selectedMethod.entity,
+          operation: selectedMethod.id,
+          status: 'failed',
+        },
+        message: `${selectedMethod.id} failed — ${message}`,
+        severity: 'error',
+        targetPanels: ['modal'],
+      });
+    } finally {
+      setIsRunning(false);
+    }
+  }, [addNotification, cid, entity, getServerClient, payload, selectedMethod]);
+
+  const hasSecret = !!secret.trim();
+  const needsCid = entity === 'channel';
+  const canRun =
+    hasSecret && !!selectedMethod && !isRunning && (!needsCid || !!cid.trim());
+
+  return (
+    <DraggableDialog
+      dialogClassName='app__server-client-dialog'
+      dialogId={serverSideClientPromptDialogId}
+      dialogIsOpen={dialogIsOpen}
+      dialogManagerId={dialogManager?.id}
+      dragHandleClassName='app__server-client-dialog__drag-handle'
+      onClose={dialog.close}
+      promptClassName='app__server-client-dialog__prompt'
+      referenceElement={referenceElement}
+      shellClassName='app__server-client-dialog__shell'
+      title='Server-side Client'
+    >
+      <Prompt.Body className='app__server-client-dialog__body'>
+        <div className='app__server-client-dialog__body-scroll'>
+          <p className='app__server-client-dialog__warning'>
+            An API secret grants full admin access to the app. This dialog is a local
+            debugging aid — the secret stays in memory for as long as it is open and is
+            never persisted. Never put a secret in a production bundle.
+          </p>
+
+          <section className='app__server-client-dialog__step'>
+            <StepHeading index={1} title='API secret' />
+            <Field label={`Secret for app ${appClient.key}`}>
+              {/* Deliberately `type="text"` masked with `-webkit-text-security`, not a real
+                  password field: 1Password decorates any `type="password"` input and its injected
+                  UI steals focus on the first keystroke, which closes undocked Chrome DevTools.
+                  The value is still never persisted. */}
+              <input
+                autoComplete='off'
+                className='app__server-client-dialog__text-input app__server-client-dialog__secret-input'
+                data-1p-ignore
+                data-bwignore
+                data-form-type='other'
+                data-lpignore='true'
+                onChange={(event) => setSecret(event.target.value)}
+                placeholder='Your Stream app secret'
+                spellCheck={false}
+                type='text'
+                value={secret}
+              />
+            </Field>
+            <div className='app__server-client-dialog__inline-actions'>
+              <Prompt.FooterControlsButtonSecondary
+                disabled={!hasSecret || isChecking}
+                onClick={checkSecret}
+              >
+                {isChecking ? 'Checking…' : 'Check secret'}
+              </Prompt.FooterControlsButtonSecondary>
+              {secretCheck && (
+                <span className='app__server-client-dialog__note'>{secretCheck}</span>
+              )}
+            </div>
+            <p className='app__server-client-dialog__note'>
+              No connection is opened — a server-side client is stateless. The secret only
+              signs a <code>{'{ "server": true }'}</code> JWT attached to each REST call.
+              &ldquo;Check secret&rdquo; is optional; it just calls{' '}
+              <code>getAppSettings</code> so a wrong secret shows up here rather than on
+              Run.
+            </p>
+          </section>
+
+          <section className='app__server-client-dialog__step'>
+            <StepHeading index={2} title='Entity' />
+            <Field label='Entity type'>
+              <SearchableSelect
+                onChange={setEntity}
+                options={entityOptions}
+                searchPlaceholder='Search entities'
+                value={entity}
+              />
+            </Field>
+            {needsCid && (
+              <Field
+                hint='Lists the channels this client has loaded. Type any other CID to target a channel that is not in the list.'
+                label='Channel CID'
+              >
+                <SearchableSelect
+                  allowCustomValue
+                  emptyLabel='Select a channel…'
+                  onChange={setCid}
+                  options={channelOptions}
+                  searchPlaceholder='Search channels or type a CID'
+                  value={cid}
+                />
+              </Field>
+            )}
+          </section>
+
+          <section className='app__server-client-dialog__step'>
+            <StepHeading index={3} title='Method' />
+            <Field
+              hint={selectedMethod?.description}
+              label={`Method (${methods.length} available)`}
+            >
+              <SearchableSelect
+                emptyLabel={methods.length ? 'Select a method…' : 'No methods registered'}
+                onChange={selectMethod}
+                options={methodOptions}
+                searchPlaceholder='Search methods'
+                value={methodId}
+              />
+            </Field>
+          </section>
+
+          <section className='app__server-client-dialog__step'>
+            <StepHeading index={4} title='Payload' />
+            {selectedMethod?.targetsMember && (
+              <Field
+                hint={`Writes \`${MEMBER_USER_ID_KEY}\` into the payload below. Lists members of the selected channel that this app has already loaded — fetch the rest with the button, or type a raw user id.`}
+                label='Member'
+              >
+                <SearchableSelect
+                  allowCustomValue
+                  emptyLabel='Select a member…'
+                  onChange={selectMember}
+                  options={memberOptions}
+                  searchPlaceholder='Search members or type a user id'
+                  value={payloadUserId}
+                />
+                <div className='app__server-client-dialog__inline-actions'>
+                  <Prompt.FooterControlsButtonSecondary
+                    disabled={!hasSecret || !cid.trim() || isFetchingMembers}
+                    onClick={loadMembers}
+                  >
+                    {isFetchingMembers ? 'Fetching…' : 'Fetch members'}
+                  </Prompt.FooterControlsButtonSecondary>
+                  <span className='app__server-client-dialog__note'>
+                    {memberOptions.length
+                      ? `${memberOptions.length} member${memberOptions.length === 1 ? '' : 's'} listed`
+                      : 'No members loaded yet'}
+                  </span>
+                </div>
+                {memberError && (
+                  <p className='app__server-client-dialog__error'>{memberError}</p>
+                )}
+              </Field>
+            )}
+            <textarea
+              className='app__server-client-dialog__textarea'
+              disabled={!selectedMethod}
+              onChange={(event) => setPayload(event.target.value)}
+              rows={10}
+              spellCheck={false}
+              value={payload}
+            />
+            {runError && <p className='app__server-client-dialog__error'>{runError}</p>}
+            {result && <pre className='app__server-client-dialog__result'>{result}</pre>}
+          </section>
+        </div>
+      </Prompt.Body>
+      <Prompt.Footer className='app__server-client-dialog__footer'>
+        <Prompt.FooterControls className='app__server-client-dialog__footer-controls'>
+          <Prompt.FooterControlsButtonSecondary
+            disabled={!selectedMethod}
+            onClick={resetPayload}
+          >
+            Reset payload
+          </Prompt.FooterControlsButtonSecondary>
+          <Prompt.FooterControlsButtonSecondary onClick={dialog.close}>
+            Close
+          </Prompt.FooterControlsButtonSecondary>
+          <Prompt.FooterControlsButtonPrimary disabled={!canRun} onClick={run}>
+            {isRunning ? 'Running…' : 'Run'}
+          </Prompt.FooterControlsButtonPrimary>
+        </Prompt.FooterControls>
+      </Prompt.Footer>
+      {/* Run outcomes surface inside this dialog rather than over the channel. Scoped by emitter:
+          the `panel='modal'` pre-filter did not match even with a `target:modal` tag, and filtering
+          on our own emitter is the more precise contract anyway. Emitting with
+          `targetPanels: ['modal']` is what keeps the channel's own list from showing them. */}
+      <div className='app__server-client-dialog__notifications'>
+        <NotificationList filter={isServerSideClientNotification} />
+      </div>
+    </DraggableDialog>
+  );
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/index.ts b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/index.ts
new file mode 100644
index 000000000..eb198453c
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/index.ts
@@ -0,0 +1,4 @@
+export * from './ServerSideClientPromptDialog';
+export * from './serverSideClient';
+export * from './serverSideMethods';
+export * from './serverSideClientFlag';
diff --git a/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideClient.ts b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideClient.ts
new file mode 100644
index 000000000..da480dd06
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideClient.ts
@@ -0,0 +1,97 @@
+import { StreamChat } from 'stream-chat';
+
+/**
+ * Creates a *server-side* StreamChat client inside the browser.
+ *
+ * ⚠️  This is a debugging aid for the demo app only, gated behind a feature flag. An API secret
+ * grants full admin access to the whole app; it must never ship in a real client bundle. The
+ * secret entered here is held in component state for the lifetime of the dialog and is never
+ * persisted to localStorage, the URL, or anywhere else.
+ *
+ * Two obstacles, both worked around without patching the SDK:
+ *
+ * 1. `package.json#browser` maps `jsonwebtoken` to `false`, so the SDK cannot mint a server token
+ *    in a browser bundle. The `{ "server": true }` HS256 token is signed with Web Crypto instead
+ *    and injected into `tokenManager`, which is what `_getToken()` reads for the `Authorization`
+ *    header.
+ *
+ * 2. The client constructor takes `(key, options)` only — there is no secret parameter — and
+ *    `client.channel(...)` throws without a connected user. So callers must not build `Channel`
+ *    objects; they issue requests through `client.api.sendRequest` instead (see serverSideMethods).
+ *
+ * `crypto.subtle` requires a secure context — fine on localhost and https.
+ */
+
+const textEncoder = new TextEncoder();
+
+const base64Url = (bytes: Uint8Array) => {
+  let binary = '';
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+};
+
+const encodeSegment = (value: object) =>
+  base64Url(textEncoder.encode(JSON.stringify(value)));
+
+/**
+ * HS256 JWT with the payload the Stream API expects from a server-side caller — exactly
+ * `{"server":true}`, matching the SDK's own `JWTServerToken`.
+ */
+export const createServerToken = async (secret: string) => {
+  if (!globalThis.crypto?.subtle) {
+    throw new Error(
+      'Web Crypto is unavailable — a secure context (https or localhost) is required to sign the server token.',
+    );
+  }
+
+  const signingInput = `${encodeSegment({ alg: 'HS256', typ: 'JWT' })}.${encodeSegment({
+    server: true,
+  })}`;
+
+  const key = await globalThis.crypto.subtle.importKey(
+    'raw',
+    textEncoder.encode(secret),
+    { hash: 'SHA-256', name: 'HMAC' },
+    false,
+    ['sign'],
+  );
+  const signature = await globalThis.crypto.subtle.sign(
+    'HMAC',
+    key,
+    textEncoder.encode(signingInput),
+  );
+
+  return `${signingInput}.${base64Url(new Uint8Array(signature))}`;
+};
+
+export const createServerSideClient = async ({
+  apiKey,
+  secret,
+}: {
+  apiKey: string;
+  secret: string;
+}) => {
+  const token = await createServerToken(secret);
+
+  // Not `getInstance` — that would hand back (and mutate) the app's user-authenticated singleton.
+  const client = new StreamChat(apiKey, { allowServerSideConnect: true });
+
+  client.tokenManager.secret = secret;
+  client.tokenManager.token = token;
+  client.tokenManager.type = 'static';
+
+  return client;
+};
+
+/**
+ * Cheap round-trip that fails fast on a wrong secret, so the dialog reports a bad credential
+ * before a payload is composed. `getAppSettings` is server-side only, which makes it a precise
+ * check that the token really is accepted as a server token — a bad secret comes back as
+ * `Token signature is invalid`.
+ */
+export const verifyServerSideClient = async (client: StreamChat) => {
+  await client.getAppSettings();
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideClientFlag.ts b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideClientFlag.ts
new file mode 100644
index 000000000..fb0d1bcf7
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideClientFlag.ts
@@ -0,0 +1,20 @@
+/**
+ * Feature flag for the server-side client dialog.
+ *
+ * Off by default and opted into per session with `?server_side_client=1` — the same URL-param
+ * convention the demo uses for its other variants (`message_ui`, `reactions`, …). The dialog can
+ * hold an API secret, so it should never appear unless somebody deliberately asked for it.
+ */
+export const SERVER_SIDE_CLIENT_URL_PARAM = 'server_side_client';
+
+const ENABLED_VALUES = new Set(['1', 'true', 'on', 'yes']);
+
+export const isServerSideClientEnabled = () => {
+  if (typeof window === 'undefined') return false;
+
+  const value = new URLSearchParams(window.location.search).get(
+    SERVER_SIDE_CLIENT_URL_PARAM,
+  );
+
+  return value !== null && ENABLED_VALUES.has(value.toLowerCase());
+};
diff --git a/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideMethods.ts b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideMethods.ts
new file mode 100644
index 000000000..e1d37d7bd
--- /dev/null
+++ b/examples/vite/src/AppSettings/ActionsMenu/ServerSideClientPromptDialog/serverSideMethods.ts
@@ -0,0 +1,163 @@
+import type { StreamChat } from 'stream-chat';
+
+/**
+ * Registry of server-side entities and the methods this dialog can invoke on them.
+ *
+ * Only `channel.updateMemberPartial` is wired up so far — the use case is setting another
+ * member's channel-specific data, which a browser client cannot do.
+ *
+ * Everything goes through `client.api.sendRequest` rather than the generated helpers, for two
+ * reasons: `client.channel(...)` throws without a connected user, and the generated
+ * `updateMemberPartial` sends no `user_id`, so it can only ever write the caller's own
+ * membership. `sendRequest` is the same primitive the generated APIs use internally and it
+ * accepts query params, which is where `user_id` belongs.
+ *
+ * To add a method: append an entry below. `entity`, `payloadTemplate` and `invoke` are all it
+ * needs — the dialog derives its selects from this list.
+ */
+
+export type ServerSideEntity = 'channel' | 'client';
+
+export type ServerSideMethodContext = {
+  /** Present only for entity `channel`. Full `type:id` cid. */
+  cid?: string;
+  client: StreamChat;
+  payload: unknown;
+};
+
+export type ServerSideMethodDescriptor = {
+  description: string;
+  entity: ServerSideEntity;
+  id: string;
+  invoke: (context: ServerSideMethodContext) => Promise<unknown>;
+  label: string;
+  /** Pretty-printed into the payload textarea when the method is selected. */
+  payloadTemplate: unknown;
+  /**
+   * The method addresses a single channel member through a `user_id` payload key. The dialog
+   * offers a member picker that writes that key, so the id does not have to be looked up by hand.
+   */
+  targetsMember?: boolean;
+};
+
+/** Payload key the member picker writes into. */
+export const MEMBER_USER_ID_KEY = 'user_id';
+
+export const serverSideEntities: {
+  description: string;
+  label: string;
+  value: ServerSideEntity;
+}[] = [
+  {
+    description: 'Operates on a single channel. Requires a CID.',
+    label: 'Channel',
+    value: 'channel',
+  },
+  {
+    description: 'App-wide operations. No methods registered yet.',
+    label: 'Client',
+    value: 'client',
+  },
+];
+
+const parseCid = (cid: string | undefined) => {
+  const [type, ...rest] = (cid ?? '').split(':');
+  const id = rest.join(':');
+
+  if (!type || !id) {
+    throw new Error(
+      `Invalid CID "${cid ?? ''}". Expected the form "type:id", e.g. "messaging:general".`,
+    );
+  }
+
+  return { id, type };
+};
+
+const asRecord = (payload: unknown) => {
+  if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
+    throw new Error('The payload must be a JSON object.');
+  }
+
+  return payload as Record<string, unknown>;
+};
+
+export type ChannelMemberSummary = {
+  name?: string;
+  userId: string;
+};
+
+/**
+ * Server-side member lookup for a CID the local client has not loaded — the only way to resolve
+ * ids for an arbitrary channel. Channels the app already has are read straight off
+ * `channel.state.members` instead, which needs no secret and no request.
+ */
+export const fetchChannelMembers = async ({
+  cid,
+  client,
+  limit = 100,
+}: {
+  cid: string | undefined;
+  client: StreamChat;
+  limit?: number;
+}): Promise<ChannelMemberSummary[]> => {
+  const { id, type } = parseCid(cid);
+  const { body } = await client.api.sendRequest<{
+    members: { name?: string; user?: { id?: string; name?: string }; user_id?: string }[];
+  }>('GET', '/api/v2/chat/members', undefined, {
+    payload: JSON.stringify({ filter_conditions: {}, id, limit, type }),
+  });
+
+  return (body.members ?? [])
+    .map((member) => ({
+      name: member.user?.name,
+      userId: member.user_id ?? member.user?.id ?? '',
+    }))
+    .filter((member) => !!member.userId);
+};
+
+export const serverSideMethods: ServerSideMethodDescriptor[] = [
+  {
+    description:
+      'Partial-updates a channel member. `user_id` selects whose membership is written — that parameter is the whole reason this needs a server-side client, and the generated SDK method omits it. Custom member fields go at the top level of `set`; `custom` itself is reserved and will be rejected.',
+    entity: 'channel',
+    id: 'channel.updateMemberPartial',
+    invoke: async ({ cid, client, payload }) => {
+      const { id, type } = parseCid(cid);
+      const { user_id: userId, ...updates } = asRecord(payload);
+
+      if (typeof userId !== 'string' || !userId) {
+        throw new Error('The payload needs a non-empty string `user_id`.');
+      }
+
+      if (!('set' in updates) && !('unset' in updates)) {
+        throw new Error('The payload needs a `set` object and/or an `unset` array.');
+      }
+
+      const { body } = await client.api.sendRequest(
+        'PATCH',
+        '/api/v2/chat/channels/{type}/{id}/member',
+        { id, type },
+        { user_id: userId },
+        updates,
+        'application/json',
+      );
+
+      return body;
+    },
+    label: 'updateMemberPartial — write another member’s data',
+    payloadTemplate: {
+      set: { nickname: 'sharpshooter' },
+      user_id: '',
+    },
+    targetsMember: true,
+  },
+];
+
+export const getMethodsForEntity = (entity: ServerSideEntity) =>
+  serverSideMethods.filter((method) => method.entity === entity);
+
+export const findMethod = (id: string) =>
+  serverSideMethods.find((method) => method.id === id);
+
+export const formatPayloadTemplate = (template: unknown) =>
+  `${JSON.stringify(template, null, 2)}\n`;
diff --git a/examples/vite/src/AppSettings/AppSettings.scss b/examples/vite/src/AppSettings/AppSettings.scss
index b12c156a3..e37608492 100644
--- a/examples/vite/src/AppSettings/AppSettings.scss
+++ b/examples/vite/src/AppSettings/AppSettings.scss
@@ -1178,4 +1178,195 @@
       box-shadow: none;
     }
   }
+
+  // Server-side client dialog — same shell/drag conventions as the other prompt dialogs.
+  .app__server-client-dialog {
+    min-width: min(560px, calc(100vw - 32px));
+    max-width: min(560px, calc(100vw - 32px));
+  }
+
+  .app__server-client-dialog__prompt {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, calc(100vw - 32px));
+    max-height: min(680px, calc(100vh - 32px));
+    overflow: hidden;
+    // Positioned ancestor for the dialog's own NotificationList, which is absolutely positioned.
+    position: relative;
+  }
+
+  .app__server-client-dialog__drag-handle {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .app__server-client-dialog__drag-handle:active {
+    cursor: grabbing;
+  }
+
+  .app__server-client-dialog__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    padding-top: 4px;
+  }
+
+  .app__server-client-dialog__body-scroll {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    margin-inline-end: calc(var(--str-chat__spacing-xl) * -1);
+    min-height: 0;
+    overflow-y: auto;
+    padding-inline-end: var(--str-chat__spacing-xl);
+    scrollbar-color: var(--str-chat__border-core-default) transparent;
+    scrollbar-width: thin;
+  }
+
+  .app__server-client-dialog__warning {
+    margin: 0;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    background: var(--str-chat__surface-color);
+    color: var(--str-chat__text-secondary);
+    font-size: 13px;
+    line-height: 1.4;
+    padding: 8px 10px;
+  }
+
+  .app__server-client-dialog__step {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .app__server-client-dialog__step-heading {
+    align-items: center;
+    color: var(--str-chat__text-primary);
+    display: flex;
+    font-size: 14px;
+    font-weight: 600;
+    gap: 8px;
+  }
+
+  .app__server-client-dialog__step-index {
+    align-items: center;
+    background: var(--str-chat__surface-color);
+    border-radius: 999px;
+    display: inline-flex;
+    font-size: 12px;
+    height: 20px;
+    justify-content: center;
+    width: 20px;
+  }
+
+  .app__server-client-dialog__field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+  }
+
+  .app__server-client-dialog__field-label {
+    color: var(--str-chat__text-secondary);
+    font-size: 13px;
+  }
+
+  .app__server-client-dialog__text-input {
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    padding: 0 12px;
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
+    font: inherit;
+  }
+
+  // The secret field is a `type="text"` input on purpose — see the comment at its call site.
+  // This is what masks it. `text-security` is the unprefixed form (Firefox 119+).
+  .app__server-client-dialog__secret-input {
+    -webkit-text-security: disc;
+    text-security: disc;
+  }
+
+  .app__server-client-dialog__text-input:focus-visible,
+  .app__server-client-dialog__textarea:focus-visible {
+    outline: 2px solid var(--str-chat__border-utility-selected);
+    outline-offset: 1px;
+  }
+
+  .app__server-client-dialog__inline-actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .app__server-client-dialog__textarea,
+  .app__server-client-dialog__result {
+    width: 100%;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    padding: 10px 12px;
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      monospace;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  .app__server-client-dialog__textarea {
+    min-height: 200px;
+    resize: vertical;
+  }
+
+  .app__server-client-dialog__result {
+    margin: 0;
+    max-height: 200px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .app__server-client-dialog__note {
+    margin: 0;
+    color: var(--str-chat__text-secondary);
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  .app__server-client-dialog__error {
+    margin: 0;
+    color: var(--text-error);
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  .app__server-client-dialog__footer {
+    flex-shrink: 0;
+  }
+
+  .app__server-client-dialog__footer-controls {
+    margin-inline-start: 0;
+  }
+
+  // Positioned anchor for the dialog's own NotificationList (which is `position: absolute`).
+  .app__server-client-dialog__notifications {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .app__server-client-dialog__notifications .str-chat__notification {
+    pointer-events: auto;
+  }
 }
diff --git a/examples/vite/src/AppSettings/SearchableSelect.tsx b/examples/vite/src/AppSettings/SearchableSelect.tsx
index 816ad5a7b..5e1714e57 100644
--- a/examples/vite/src/AppSettings/SearchableSelect.tsx
+++ b/examples/vite/src/AppSettings/SearchableSelect.tsx
@@ -60,6 +60,7 @@ const SearchableSelectOptionItem = <T extends string>({
 };
 
 const SearchableSelectDropdownItems = <T extends string>({
+  allowCustomValue,
   onSearchChange,
   onSelect,
   options,
@@ -67,6 +68,7 @@ const SearchableSelectDropdownItems = <T extends string>({
   searchQuery,
   selectedValue,
 }: {
+  allowCustomValue: boolean;
   onSearchChange: (value: string) => void;
   onSelect: (value: T) => void;
   options: SearchableSelectOption<T>[];
@@ -74,10 +76,21 @@ const SearchableSelectDropdownItems = <T extends string>({
   searchQuery: string;
   selectedValue: T;
 }) => {
-  const normalizedQuery = searchQuery.trim().toLowerCase();
+  const trimmedQuery = searchQuery.trim();
+  const normalizedQuery = trimmedQuery.toLowerCase();
   const filteredOptions = options.filter((option) =>
     option.label.toLowerCase().includes(normalizedQuery),
   );
+  // Lets the caller target something the option list does not know about. Offered only when the
+  // query cannot be satisfied from the list, or already looks fully qualified (`type:id`), so it
+  // does not clutter ordinary searches that do match.
+  const customOption =
+    allowCustomValue &&
+    trimmedQuery &&
+    (trimmedQuery.includes(':') || filteredOptions.length === 0) &&
+    !options.some((option) => option.value === trimmedQuery)
+      ? ({ label: `Use "${trimmedQuery}"`, value: trimmedQuery as T } as const)
+      : null;
 
   return (
     <>
@@ -95,6 +108,13 @@ const SearchableSelectDropdownItems = <T extends string>({
           value={searchQuery}
         />
       </div>
+      {customOption && (
+        <SearchableSelectOptionItem
+          onSelect={onSelect}
+          option={customOption}
+          selected={selectedValue === customOption.value}
+        />
+      )}
       {filteredOptions.map((option) => (
         <SearchableSelectOptionItem
           key={option.value}
@@ -103,7 +123,7 @@ const SearchableSelectDropdownItems = <T extends string>({
           selected={selectedValue === option.value}
         />
       ))}
-      {filteredOptions.length === 0 && (
+      {filteredOptions.length === 0 && !customOption && (
         <div className='app__searchable-select__dropdown-empty'>No matching options</div>
       )}
     </>
@@ -111,19 +131,33 @@ const SearchableSelectDropdownItems = <T extends string>({
 };
 
 export const SearchableSelect = <T extends string>({
+  allowCustomValue = false,
+  emptyLabel,
   onChange,
   options,
   searchPlaceholder,
   value,
 }: {
+  /** Offer the raw search query as a selectable option when it matches nothing. */
+  allowCustomValue?: boolean;
+  /** Trigger text when `value` matches no option. Defaults to the existing first-option fallback. */
+  emptyLabel?: string;
   onChange: (value: T) => void;
   options: SearchableSelectOption<T>[];
   searchPlaceholder: string;
   value: T;
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
-  const selectedOption =
-    options.find((option) => option.value === value) ?? options[0] ?? null;
+  const selectedOption = options.find((option) => option.value === value) ?? null;
+  // With a free-text value the trigger must show what was typed even though it is not an option.
+  // Falls back to the first option only when neither new prop is in play, preserving the previous
+  // behaviour for existing callers.
+  const triggerLabel =
+    selectedOption?.label ??
+    (allowCustomValue && value ? value : undefined) ??
+    emptyLabel ??
+    options[0]?.label ??
+    '';
 
   const TriggerComponent = useMemo(
     () =>
@@ -140,16 +174,14 @@ export const SearchableSelect = <T extends string>({
             ref={(element) => assignReferenceRef(referenceRef, element)}
             type='button'
           >
-            <span className='app__searchable-select__trigger-value'>
-              {selectedOption?.label ?? ''}
-            </span>
+            <span className='app__searchable-select__trigger-value'>{triggerLabel}</span>
             <span aria-hidden='true' className='app__searchable-select__trigger-icon'>
               <IconChevronDown />
             </span>
           </button>
         );
       },
-    [selectedOption],
+    [triggerLabel],
   );
 
   return (
@@ -163,6 +195,7 @@ export const SearchableSelect = <T extends string>({
       TriggerComponent={TriggerComponent}
     >
       <SearchableSelectDropdownItems
+        allowCustomValue={allowCustomValue}
         onSearchChange={setSearchQuery}
         onSelect={onChange}
         options={options}