assistant-ui Integration

When an assistant-ui app already renders text through @assistant-ui/react-streamdown, use @slexkit/assistant-ui to replace the slex language block inside text parts. Threads, composer, message parts, runtime, and tool UI stay with assistant-ui.

The runnable demo below is a static assistant-ui transcript. It verifies rendering inside assistant-ui's message-part context without connecting a model, API key, or ToolHost flow.

bun run --filter @slexkit/assistant-ui build
bun examples/dev-server.mjs assistant-ui

The source lives in examples/assistant-ui. The page uses useExternalStoreRuntime and AssistantRuntimeProvider for the thread, then renders text parts through SlexKitAssistantStreamdownText.

Open the integration guide · View runnable source

Install the wrapper and peers:

npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown @slexkit/assistant-ui @assistant-ui/react @assistant-ui/react-streamdown streamdown react react-dom

Import styles once:

import "@slexkit/theme-shadcn/style.css";
import "@slexkit/assistant-ui/style.css";

Use it in the assistant message:

import { MessagePrimitive } from "@assistant-ui/react";
import { SlexKitAssistantStreamdownText } from "@slexkit/assistant-ui";

export function AssistantMessage() {
  return (
    <MessagePrimitive.Root>
      <MessagePrimitive.Parts>
        {({ part }) =>
          part.type === "text" ? (
            <SlexKitAssistantStreamdownText
              artifactId="message-1"
              runtime="secure"
              secureFrame={{ runtimeUrl: "/slexkit.runtime.js" }}
            />
          ) : null
        }
      </MessagePrimitive.Parts>
    </MessagePrimitive.Root>
  );
}

Example model output:

<div class="slex-prerender-placeholder" data-slex-source="bmFtZXNwYWNlOiAiYXNzaXN0YW50X3N0YXR1cyIsCiAgZzoge30sCiAgbGF5b3V0OiB7CiAgICAidGV4dDpzdGF0dXMiOiB7IHRleHQ6ICJSZW5kZXJlZCBpbnNpZGUgYXNzaXN0YW50LXVpLiIgfQogIH0KfQ=="><pre><code class="language-slex">namespace: &quot;assistant_status&quot;,
  g: {},
  layout: {
    &quot;text:status&quot;: { text: &quot;Rendered inside assistant-ui.&quot; }
  }
}</code></pre></div>

Scope

ToolHost/tool-call rendering is a separate integration layer. This adapter is only the Markdown fence runtime for assistant-ui text message parts.

For an existing custom StreamdownTextPrimitive, merge only the SlexKit language override with createSlexKitAssistantStreamdownComponents().