@assistant-ui/mcp-docs-server 0.1.21 → 0.1.23

package/.docs/raw/docs/runtimes/assistant-transport.mdx

@@ -114,6 +114,28 @@ async def chat_endpoint(request: ChatRequest):
 
 The state snapshots are automatically streamed to the frontend using the operations described in [Streaming Protocol](#streaming-protocol).
 
+> **Cancellation:** `create_run` exposes `controller.is_cancelled` and `controller.cancelled_event`.
+> If the response stream is closed early (for example user cancel or client disconnect),
+> these are set so your backend loop can exit cooperatively.
+> `controller.cancelled_event` is a read-only signal object with `wait()` and `is_set()`.
+> `create_run` gives callbacks a ~50ms cooperative shutdown window before forced task cancellation.
+> Callback exceptions that happen during early-close cleanup are not re-raised to the stream consumer,
+> but are logged with traceback at warning level for debugging.
+> Put critical cleanup in `finally` blocks, since forced cancellation may happen after the grace window.
+>
+> ```python
+> async def run_callback(controller: RunController):
+>     while not controller.is_cancelled:
+>         # Long-running work / model loop
+>         await asyncio.sleep(0.05)
+> ```
+>
+> ```python
+> async def run_callback(controller: RunController):
+>     await controller.cancelled_event.wait()
+>     # cancellation-aware shutdown path
+> ```
+
 ### Backend Reference Implementation
 
 <Tabs items={["Minimal", "Example", "LangGraph"]}>
@@ -314,6 +336,8 @@ The `useAssistantTransportRuntime` hook is used to configure the runtime. It acc
   converter: (state: T, connectionMetadata: ConnectionMetadata) => AssistantTransportState,
   headers?: Record<string, string> | (() => Promise<Record<string, string>>),
   body?: object,
+  prepareSendCommandsRequest?: (body: SendCommandsRequestBody) => Record<string, unknown> | Promise<Record<string, unknown>>,
+  capabilities?: { edit?: boolean },
   onResponse?: (response: Response) => void,
   onFinish?: () => void,
   onError?: (error: Error) => void,
@@ -490,6 +514,85 @@ const runtime = useAssistantTransportRuntime({
 });
 ```
 
+### Transforming the Request Body
+
+Use `prepareSendCommandsRequest` to transform the entire request body before it is sent to the backend. This receives the fully assembled body object and returns the (potentially transformed) body.
+
+```typescript
+const runtime = useAssistantTransportRuntime({
+  // ... other options
+  prepareSendCommandsRequest: (body) => ({
+    ...body,
+    trackingId: crypto.randomUUID(),
+  }),
+});
+```
+
+This is useful for adding tracking IDs, transforming commands, or injecting metadata that depends on the assembled request:
+
+```typescript
+const runtime = useAssistantTransportRuntime({
+  // ... other options
+  prepareSendCommandsRequest: (body) => ({
+    ...body,
+    commands: body.commands.map((cmd) =>
+      cmd.type === "add-message"
+        ? { ...cmd, trackingId: crypto.randomUUID() }
+        : cmd,
+    ),
+  }),
+});
+```
+
+## Editing Messages
+
+By default, editing messages is disabled. To enable it, set `capabilities.edit` to `true`:
+
+```typescript
+const runtime = useAssistantTransportRuntime({
+  // ... other options
+  capabilities: {
+    edit: true,
+  },
+});
+```
+
+`add-message` commands always include `parentId` and `sourceId` fields:
+
+```typescript
+{
+  type: "add-message",
+  message: { role: "user", parts: [...] },
+  parentId: "msg-3",  // The message after which this message should be inserted
+  sourceId: "msg-4",  // The ID of the message being replaced (null for new messages)
+}
+```
+
+### Backend Handling
+
+When the backend receives an `add-message` command with a `parentId`, it should:
+
+1. Truncate all messages after the message with `parentId`
+2. Append the new message
+3. Stream the updated state back to the frontend
+
+```python
+for command in request.commands:
+    if command.type == "add-message":
+        if hasattr(command, "parentId") and command.parentId is not None:
+            # Find the parent message index and truncate
+            parent_idx = next(
+                i for i, m in enumerate(messages) if m.id == command.parentId
+            )
+            messages = messages[:parent_idx + 1]
+        # Append the new message
+        messages.append(command.message)
+```
+
+<Callout type="info">
+  `parentId` and `sourceId` are always included on `add-message` commands. For new messages, `sourceId` will be `null`.
+</Callout>
+
 ## Resuming from a Sync Server
 
 <Callout type="info">

package/.docs/raw/docs/runtimes/custom/external-store.mdx

@@ -1157,6 +1157,29 @@ const ToolUI = makeAssistantToolUI({
 });
 ```
 
+### Binding External Messages Manually
+
+Use `bindExternalStoreMessage` to attach your original message to a `ThreadMessage` or message part object. This is useful when you construct `ThreadMessage` objects yourself (outside of the built-in message converter) and want `getExternalStoreMessages` to work with them.
+
+```tsx
+import {
+  bindExternalStoreMessage,
+  getExternalStoreMessages,
+} from "@assistant-ui/react";
+
+// Attach your original message to a ThreadMessage
+bindExternalStoreMessage(threadMessage, originalMessage);
+
+// Later, retrieve it
+const original = getExternalStoreMessages(threadMessage);
+```
+
+<Callout type="warn">
+  This API is experimental and may change without notice.
+</Callout>
+
+`bindExternalStoreMessage` is a no-op if the target already has a bound message. It mutates the target object in place.
+
 ## Debugging
 
 ### Common Debugging Scenarios
@@ -1503,7 +1526,7 @@ A flexible message format that can be converted to assistant-ui's internal forma
     {
       name: "content",
       type: "string | readonly MessagePart[]",
-      description: "Message content as string or structured message parts",
+      description: "Message content as string or structured message parts. Supports `data-*` prefixed types (e.g. `{ type: \"data-workflow\", data: {...} }`) which are automatically converted to DataMessagePart.",
       required: true,
     },
     {
@@ -1525,7 +1548,7 @@ A flexible message format that can be converted to assistant-ui's internal forma
     {
       name: "attachments",
       type: "readonly CompleteAttachment[]",
-      description: "File attachments (user messages only)",
+      description: "File attachments (user messages only). Attachment `type` accepts custom strings beyond \"image\" | \"document\" | \"file\", and `contentType` is optional.",
     },
     {
       name: "metadata",

package/.docs/raw/docs/runtimes/data-stream.mdx

@@ -342,9 +342,7 @@ const runtime = useDataStreamRuntime({
 
 ## Examples
 
-- **[Basic Data Stream Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-data-stream)** - Simple streaming chat
-- **[Tool Integration Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-data-stream-tools)** - Frontend and backend tools
-- **[Authentication Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-data-stream-auth)** - Secure endpoints
+Explore our [examples repository](https://github.com/assistant-ui/assistant-ui/tree/main/examples) for implementation references.
 
 ## API Reference
 

package/.docs/raw/docs/runtimes/langgraph/index.mdx

@@ -158,19 +158,21 @@ export const getThreadState = async (
 
 export const sendMessage = async (params: {
   threadId: string;
-  messages: LangChainMessage;
+  messages: LangChainMessage[];
   config?: LangGraphSendMessageConfig;
 }) => {
   const client = createClient();
+  const { checkpointId, ...restConfig } = params.config ?? {};
   return client.runs.stream(
     params.threadId,
     process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
     {
-      input: {
-        messages: params.messages,
-      },
-      streamMode: "messages",
-      ...params.config
+      input: params.messages.length > 0
+        ? { messages: params.messages }
+        : null,
+      streamMode: "messages-tuple",
+      ...(checkpointId && { checkpoint_id: checkpointId }),
+      ...restConfig,
     },
   );
 };
@@ -196,7 +198,7 @@ import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
 
 export function MyAssistant() {
   const runtime = useLangGraphRuntime({
-    stream: async (messages, { initialize, config }) => {
+    stream: async (messages, { initialize, ...config }) => {
       const { externalId } = await initialize();
       if (!externalId) throw new Error("Thread not found");
       return sendMessage({
@@ -300,6 +302,44 @@ import { convertLangChainMessages } from "@assistant-ui/react-langgraph";
 const threadMessage = convertLangChainMessages(langChainMessage);
 ```
 
+### Event Handlers
+
+You can listen to streaming events by passing `eventHandlers` to `useLangGraphRuntime`:
+
+```typescript
+const runtime = useLangGraphRuntime({
+  stream: async (messages, { initialize, ...config }) => { /* ... */ },
+  eventHandlers: {
+    onMessageChunk: (chunk, metadata) => {
+      // Fired for each chunk in messages-tuple mode
+      // metadata contains langgraph_step, langgraph_node, ls_model_name, etc.
+    },
+    onValues: (values) => {
+      // Fired when a "values" event is received
+    },
+    onUpdates: (updates) => {
+      // Fired when an "updates" event is received
+    },
+    onMetadata: (metadata) => { /* thread metadata */ },
+    onError: (error) => { /* stream errors */ },
+    onCustomEvent: (type, data) => { /* custom events */ },
+  },
+});
+```
+
+### Message Metadata
+
+When using `streamMode: "messages-tuple"`, each chunk includes metadata from the LangGraph server. Access accumulated metadata per message with the `useLangGraphMessageMetadata` hook:
+
+```typescript
+import { useLangGraphMessageMetadata } from "@assistant-ui/react-langgraph";
+
+function MyComponent() {
+  const metadata = useLangGraphMessageMetadata();
+  // Map<string, LangGraphTupleMetadata> keyed by message ID
+}
+```
+
 ## Thread Management
 
 ### Basic Thread Support
@@ -308,7 +348,7 @@ The `useLangGraphRuntime` hook now includes built-in thread management capabilit
 
 ```typescript
 const runtime = useLangGraphRuntime({
-  stream: async (messages, { initialize, config }) => {
+  stream: async (messages, { initialize, ...config }) => {
     // initialize() creates or loads a thread and returns its IDs
     const { remoteId, externalId } = await initialize();
     // Use externalId (your backend's thread ID) for API calls
@@ -343,7 +383,71 @@ const runtime = useLangGraphRuntime({
 });
 ```
 
-See the [Cloud Persistence guide](/docs/cloud/persistence/langgraph) for detailed setup instructions.
+See the [Cloud Persistence guide](/docs/cloud/langgraph) for detailed setup instructions.
+
+## Message Editing & Regeneration
+
+LangGraph uses server-side checkpoints for state management. To support message editing (branching) and regeneration, you need to provide a `getCheckpointId` callback that resolves the appropriate checkpoint for server-side forking.
+
+```typescript
+const runtime = useLangGraphRuntime({
+  stream: async (messages, { initialize, ...config }) => {
+    const { externalId } = await initialize();
+    if (!externalId) throw new Error("Thread not found");
+    return sendMessage({ threadId: externalId, messages, config });
+  },
+  create: async () => {
+    const { thread_id } = await createThread();
+    return { externalId: thread_id };
+  },
+  load: async (externalId) => {
+    const state = await getThreadState(externalId);
+    return {
+      messages: state.values.messages,
+      interrupts: state.tasks[0]?.interrupts,
+    };
+  },
+  getCheckpointId: async (threadId, parentMessages) => {
+    const client = createClient();
+    // Get the thread state history and find the checkpoint
+    // that matches the parent messages by exact message ID sequence.
+    // If IDs are missing, return null and skip edit/reload for safety.
+    const history = await client.threads.getHistory(threadId);
+    for (const state of history) {
+      const stateMessages = state.values.messages;
+      if (!stateMessages || stateMessages.length !== parentMessages.length) {
+        continue;
+      }
+
+      const hasStableIds =
+        parentMessages.every((message) => typeof message.id === "string") &&
+        stateMessages.every((message) => typeof message.id === "string");
+      if (!hasStableIds) {
+        continue;
+      }
+
+      const isMatch = parentMessages.every(
+        (message, index) => message.id === stateMessages[index]?.id,
+      );
+
+      if (isMatch) {
+        return state.checkpoint.checkpoint_id ?? null;
+      }
+    }
+    return null;
+  },
+});
+```
+
+When `getCheckpointId` is provided:
+- **Edit buttons** appear on user messages, allowing users to edit and resend from that point
+- **Regenerate buttons** appear on assistant messages, allowing users to regenerate the response
+
+The resolved `checkpointId` is passed to your `stream` callback via `config.checkpointId`. Your `sendMessage` helper should map it to the LangGraph SDK's `checkpoint_id` parameter (see the helper function in the setup section above).
+
+<Callout type="info">
+  Without `getCheckpointId`, the edit and regenerate buttons will not appear. This is intentional — simply truncating client-side messages without forking from the correct server-side checkpoint would produce incorrect state.
+</Callout>
 
 ## Interrupt Persistence
 

package/.docs/raw/docs/runtimes/pick-a-runtime.mdx

@@ -130,9 +130,7 @@ Pre-built integrations can always be replaced with a custom `LocalRuntime` or `E
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
 export function MyAssistant() {
-  const runtime = useChatRuntime({
-    api: "/api/chat",
-  });
+  const runtime = useChatRuntime();
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
@@ -189,7 +187,6 @@ Explore our implementation examples:
 - **[External Store Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-external-store)** - `ExternalStoreRuntime` with custom state
 - **[Assistant Cloud Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-cloud)** - Multi-thread with cloud persistence
 - **[LangGraph Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-langgraph)** - Agent workflows
-- **[OpenAI Assistants Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-openai-assistants)** - OpenAI Assistants API
 
 ## Common Pitfalls to Avoid
 

package/.docs/raw/docs/ui/attachment.mdx

@@ -209,9 +209,9 @@ Attachments have the following structure:
 ```typescript
 type Attachment = {
   id: string;
-  type: "image" | "document" | "file";
+  type: "image" | "document" | "file" | (string & {});
   name: string;
-  contentType: string;
+  contentType?: string;
   file?: File;
   status:
     | { type: "running" | "requires-action" | "incomplete"; progress?: number }
@@ -219,6 +219,8 @@ type Attachment = {
 };
 ```
 
+The `type` field accepts custom strings (e.g. `"data-workflow"`) beyond the built-in types. When an unknown type is encountered, the generic `Attachment` component is used as a fallback. The `contentType` field is optional — it can be omitted for non-file attachments where a MIME type is not meaningful.
+
 ## Related Components
 
 - [Thread](/docs/ui/thread) - Main chat interface that displays attachments

package/.docs/raw/docs/ui/message-timing.mdx

@@ -0,0 +1,92 @@
+---
+title: Message Timing
+description: Display streaming performance stats — TTFT, total time, tok/s, and chunk count — as a badge with hover popover.
+---
+
+import { MessageTimingSample } from "@/components/docs/samples/message-timing";
+
+<MessageTimingSample />
+
+<Callout type="warn">
+  This component is experimental. The API and displayed metrics may change in future versions. When used with the Vercel AI SDK, token counts and tok/s are **estimated** client-side and may be inaccurate — see [Accuracy](#accuracy) below.
+</Callout>
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `message-timing`
+
+<InstallCommand shadcn={["message-timing"]} />
+
+This adds a `/components/assistant-ui/message-timing.tsx` file to your project.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Place `MessageTiming` inside `ActionBarPrimitive.Root` in your `thread.tsx`. It will inherit the action bar's auto-hide behaviour and only renders after the stream completes.
+
+```tsx title="/components/assistant-ui/thread.tsx" {2,12}
+import { ActionBarPrimitive } from "@assistant-ui/react";
+import { MessageTiming } from "@/components/assistant-ui/message-timing";
+
+const AssistantActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+    >
+      <ActionBarPrimitive.Copy />
+      <ActionBarPrimitive.Reload />
+      <MessageTiming />
+    </ActionBarPrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## What It Shows
+
+The badge displays `totalStreamTime` inline and reveals a popover on hover with the full breakdown:
+
+| Metric | Description |
+|--------|-------------|
+| **First token** | Time from request start to first text chunk (TTFT) |
+| **Total** | Total wall-clock time from start to stream end |
+| **Speed** | Output tokens per second (hidden for very short messages) |
+| **Chunks** | Number of stream chunks received |
+
+## Accuracy
+
+Timing accuracy depends on how your backend is connected.
+
+### assistant-stream (accurate)
+
+When using `assistant-stream` on the backend, token counts come directly from the model's usage data sent in `step-finish` chunks. The `tokensPerSecond` metric is exact whenever your backend reports `outputTokens`.
+
+### Vercel AI SDK (estimated)
+
+When using the AI SDK integration (`useChatRuntime`), token counts are **estimated** client-side using a 4 characters per token approximation. This can overcount significantly for short messages.
+
+## API Reference
+
+### `MessageTiming` component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | Additional class names on the root element |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Side of the tooltip relative to the badge |
+
+Renders `null` until `totalStreamTime` is available (i.e., while streaming or for user messages).
+
+For the underlying `useMessageTiming()` hook, field definitions, and runtime-specific setup (LocalRuntime, ExternalStore, etc.), see the [Message Timing guide](/docs/guides/message-timing).
+
+## Related
+
+- [Message Timing guide](/docs/guides/message-timing) — `useMessageTiming()` hook, runtime support table, and custom timing UI
+- [Thread](/docs/ui/thread) — The action bar context that `MessageTiming` is typically placed inside

package/.docs/raw/docs/ui/part-grouping.mdx

@@ -517,7 +517,7 @@ import { useAuiState } from "@assistant-ui/react";
 const DynamicGroup: FC<
   PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>
 > = ({ groupKey, indices, children }) => {
-  const parts = useAuiState(({ message }) => message.content);
+  const parts = useAuiState((s) => s.message.content);
   const groupParts = indices.map((i) => parts[i]);
 
   // Analyze group content

package/.docs/raw/docs/ui/reasoning.mdx

@@ -90,11 +90,11 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
   startIndex,
   endIndex,
 }) => {
-  const isReasoningStreaming = useAuiState(({ message }) => {
-    if (message.status?.type !== "running") return false;
-    const lastIndex = message.parts.length - 1;
+  const isReasoningStreaming = useAuiState((s) => {
+    if (s.message.status?.type !== "running") return false;
+    const lastIndex = s.message.parts.length - 1;
     if (lastIndex < 0) return false;
-    const lastType = message.parts[lastIndex]?.type;
+    const lastType = s.message.parts[lastIndex]?.type;
     if (lastType !== "reasoning") return false;
     return lastIndex >= startIndex && lastIndex <= endIndex;
   });

package/.docs/raw/docs/ui/scrollbar.mdx

@@ -7,7 +7,7 @@ import { ScrollbarSample } from "@/components/docs/samples/scrollbar";
 
 <ScrollbarSample />
 
-If you want to show a custom scrollbar UI of the `ThreadPrimitive.Viewport` in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
+If you want to show a custom scrollbar UI of the `ThreadPrimitive.Viewport` in place of the system default, you can integrate `radix-ui`'s Scroll Area.
 An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
 
 <Steps>
@@ -48,7 +48,7 @@ Add the following CSS to your `globals.css`:
 The resulting MyThread component should look like this:
 
 ```tsx {1-2,6,8,12-13,15}
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { ScrollBar } from "@/components/ui/scroll-area";
 
 const MyThread: FC = () => {

package/.docs/raw/docs/ui/syntax-highlighting.mdx

@@ -5,10 +5,10 @@ description: Code block syntax highlighting with react-shiki or react-syntax-hig
 
 import { SyntaxHighlightingSample } from "@/components/docs/samples/syntax-highlighting";
 
-<SyntaxHighlightingSample />
-
 <Callout type="warn">Syntax highlighting is not enabled in markdown by default.</Callout>
 
+<SyntaxHighlightingSample />
+
 <Callout type="info">
   `assistant-ui` provides two options for syntax highlighting: 
   - **react-shiki** (recommended for performance & dynamic language support)
@@ -53,11 +53,61 @@ export const defaultComponents = memoizeMarkdownComponents({
 See [react-shiki documentation](https://github.com/AVGVSTVS96/react-shiki#props) for all available options.
 
 Key options:
-- `theme` - Shiki theme (default: `"github-dark"`)
+- `theme` - Shiki theme or multi-theme object (`{ light, dark, ... }`)
 - `language` - Language for highlighting (default: `"text"`)
+- `defaultColor` - Default color mode (`string | false`, e.g. `light-dark()`)
 - `delay` - Delay between highlights, useful for streaming (default: `0`)
-- `customLanguages` - Custom languages to preload
-- `codeToHastOptions` - Options passed to Shiki's `codeToHast`
+- `customLanguages` - Custom languages to preload for dynamic support
+- `codeToHastOptions` - All other options accepted by Shiki's [`codeToHast`](https://github.com/shikijs/shiki/blob/main/packages/types/src/options.ts#L121)
+
+### Dual/multi theme support
+
+To use multiple themes, pass a theme object:
+
+```tsx title="/components/assistant-ui/shiki-highlighter.tsx"
+<ShikiHighlighter
+  /* ... */
+  theme={{
+    light: "github-light",
+    dark: "github-dark",
+  }}
+  defaultColor="light-dark()"
+  /* ... */
+>
+```
+
+> **Note:** The `shiki-highlighter` component sets `defaultColor="light-dark()"` automatically.
+> Only set this manually if using `ShikiHighlighter` directly.
+
+With `defaultColor="light-dark()"`, theme switching is automatic based on your site's `color-scheme`.
+No custom Shiki CSS overrides are required.
+
+Set `color-scheme` on your app root:
+
+System-based (follows OS/browser preference):
+
+```css title="globals.css"
+:root {
+  color-scheme: light dark;
+}
+```
+
+Class-based theme switching:
+
+```css title="globals.css"
+:root {
+  color-scheme: light;
+}
+:root.dark {
+  color-scheme: dark;
+}
+```
+
+If you need broader support for older browsers, you can still use the manual CSS-variable switching approach from the Shiki dual-theme docs.
+
+For more information:
+- [react-shiki multi-theme/reactive themes](https://github.com/AVGVSTVS96/react-shiki)
+- [Shiki dual themes + `light-dark()`](https://shiki.style/guide/dual-themes)
 
 ### Bundle Optimization
 
@@ -100,51 +150,6 @@ const customHighlighter = await createHighlighterCore({
   For more information, see [react-shiki - bundle options](https://github.com/avgvstvs96/react-shiki#bundle-options).
 </Callout>
 
-### Dual/multi theme support
-
-To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
-
-```tsx title="/components/assistant-ui/shiki-highlighter.tsx"
-<ShikiHighlighter
-  /* ... */
-  theme={{
-    light: "github-light",
-    dark: "github-dark",
-  }}
-  /* ... */
->
-```
-
-To make themes responsive to your site's theme mode, add one of the following CSS snippets to your project:
-
-```css title="shiki.css"
-/* for class based dark mode */
-html.dark .shiki,
-html.dark .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-  /* Optional, if you also want font styles */
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-/* for query based dark mode */
-@media (prefers-color-scheme: dark) {
-  .shiki,
-  .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-  }
-}
-```
-
-For more information, see [Shiki's documentation on dual and multi themes](https://shiki.style/guide/dual-themes).
-
 ---
 
 ## react-syntax-highlighter