inkeep · sarah-inkeep · Sep 17, 2025
diff --git a/agents-docs/_snippets/react-ui-components/custom-ikp-message.mdx b/agents-docs/_snippets/react-ui-components/custom-ikp-message.mdx
@@ -0,0 +1,46 @@
+### Custom IkpMessage Component
+
+You can customize the IkpMessage component to fit your needs.
+
+This is a simple example of a custom IkpMessage component.
+
+```tsx
+import { InkeepEmbeddedChat } from '@inkeep/cxkit-react-oss';
+import type { ComponentsConfig } from '@inkeep/cxkit-react-oss/types';
+
+type IkpMessageProps = ComponentsConfig<Record<string, unknown>>['IkpMessage'];
+
+export const IkpMessage: IkpMessageProps = (props) => {
+  const { message, renderMarkdown } = props;
+  // user message
+  if (message.role === 'user') {
+    return (
+      <div className="flex justify-end mb-4">
+        <div className="max-w-3xl bg-gray-100 dark:bg-muted text-foreground rounded-3xl rounded-br-xs px-4 py-2">
+          <p className="text-sm">
+            {message.parts
+              .filter((part) => part.type === 'text')
+              .map((part) => part.text)
+              .join('')}
+          </p>
+        </div>
+      </div>
+    );
+  } else {
+    // agent message
+    return (
+      <div className="flex justify-start mb-4">
+        <p className="text-sm">
+          {renderMarkdown(
+            message.parts
+              .filter((part) => part.type === 'text')
+              .map((part) => part.text)
+              .join('')
+          )}
+        </p>
+      </div>
+    );
+  }
+};
+
+```
diff --git a/agents-ui/src/App.tsx b/agents-ui/src/App.tsx
@@ -1,5 +1,6 @@
 import './App.css';
 import { InkeepEmbeddedChat } from '@inkeep/cxkit-react-oss';
+import { IkpMessage } from './IkpMessage';
 
 function App() {
   return (
@@ -11,6 +12,9 @@ function App() {
         aiChatSettings={{
           graphUrl: 'http://localhost:3003/api/chat',
           apiKey: 'YOUR_API_KEY',
+          components: {
+            IkpMessage,
+          },
         }}
       />
     </div>

diff --git a/agents-ui/src/IkpMessage.tsx b/agents-ui/src/IkpMessage.tsx
@@ -0,0 +1,71 @@
+import './App.css';
+
+import type { ComponentsConfig, Message } from '@inkeep/cxkit-react-oss/types';
+
+type IkpMessageProps = ComponentsConfig<Record<string, unknown>>['IkpMessage'];
+
+export const UserMessage = ({ message }: { message: Message }) => {
+  return (
+    <div className="flex justify-end mb-4">
+      <div className="max-w-3xl bg-gray-100 dark:bg-muted text-foreground rounded-3xl rounded-br-xs px-4 py-2">
+        <p className="text-sm">
+          {message.parts
+            .filter((part) => part.type === 'text')
+            .map((part) => part.text)
+            .join('')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const AssistantMessage = ({
+  message,
+  renderMarkdown,
+}: {
+  message: Message;
+  renderMarkdown: (text: string) => React.ReactNode;
+}) => {
+  const combinedText = message.parts
+    .filter((part) => part.type === 'text')
+    .map((part) => part.text || '')
+    .join('');
+
+  return (
+    <>
+      {message.parts.map((part, index) => {
+        if (part.type === 'data-operation') {
+          return <DataOperation key={index} messagePart={part} />;
+        } else if (part.type === 'data-artifact') {
+          return <DataArtifact key={index} messagePart={part} />;
+        } else {
+          return null;
+        }
+      })}
+      {combinedText && renderMarkdown(combinedText)}
+    </>
+  );
+};
+
+const DataOperation = ({ messagePart }: { messagePart: Message['parts'][number] }) => {
+  return <div className="flex justify-start mb-4">Thinking...</div>;
+};
+
+const DataArtifact = ({ messagePart }: { messagePart: Message['parts'][number] }) => {
+  const { data } = messagePart;
+  return (
+    <div className="flex justify-start mb-4">
+      this is a data artifact:
+      <p className="text-sm">{data.name}</p>
+    </div>
+  );
+};
+
+export const IkpMessage: IkpMessageProps = (props) => {
+  const { message, renderMarkdown } = props;
+  if (message.role === 'user') {
+    return <UserMessage message={message} />;
+  } else {
+    return <AssistantMessage message={message} renderMarkdown={renderMarkdown} />;
+  }
+};