feat: add OpenUI integration

Author: vishxrad

.yarnrc.yml

@@ -1,3 +1,9 @@
 nmHoistingLimits: workspaces
 nodeLinker: node-modules
 checksumBehavior: update
+
+# OpenUI only uses Zustand APIs retained in v5, and its integration tests run
+# against Jan's Zustand 5. Keep this narrow filter until upstream widens ^4.5.5.
+logFilters:
+  - pattern: "zustand is listed by your project with version 5.0.3*"
+    level: discard

web-app/package.json

@@ -24,6 +24,9 @@
     "@dnd-kit/sortable": "10.0.0",
     "@janhq/core": "workspace:*",
     "@janhq/interfaces": "0.0.2",
+    "@openuidev/react-headless": "^0.8.2",
+    "@openuidev/react-lang": "^0.2.6",
+    "@openuidev/react-ui": "^0.11.8",
     "@radix-ui/react-accordion": "1.2.11",
     "@radix-ui/react-avatar": "1.1.10",
     "@radix-ui/react-collapsible": "^1.1.12",

web-app/public/images/openui.svg

@@ -29,6 +29,7 @@ export const localStorageKey = {
   agentMode: 'agent-mode',
   latestJanModel: 'latest-jan-model',
   defaultEmbeddingModel: 'default-embedding-model',
+  openUI: 'openui-settings',
   pausedDownloads: 'paused-downloads',
 }
 

web-app/src/constants/localStorage.ts

@@ -16,6 +16,7 @@ export const route = {
     extensions: '/settings/extensions',
     local_api_server: '/settings/local-api-server',
     mcp_servers: '/settings/mcp-servers',
+    openui: '/settings/openui',
     https_proxy: '/settings/https-proxy',
     hardware: '/settings/hardware',
     assistant: '/settings/assistant',

web-app/src/constants/routes.ts

@@ -74,6 +74,10 @@ import {
   NEW_THREAD_ATTACHMENT_KEY,
   useChatAttachments,
 } from '@/hooks/useChatAttachments'
+import {
+  OPENUI_CHAT_ACTION_EVENT,
+  isOpenUIChatActionEvent,
+} from '@/lib/openui-actions'
 
 import {
   Attachment,
@@ -466,6 +470,11 @@ const ChatInput = memo(function ChatInput({
       // processing is complete.
     }
   }
+  const handleSendMessageRef = useRef(handleSendMessage)
+
+  useEffect(() => {
+    handleSendMessageRef.current = handleSendMessage
+  })
 
   useEffect(() => {
     const handleFocusIn = () => {
@@ -1539,6 +1548,24 @@ const ChatInput = memo(function ChatInput({
 
   const isStreaming = chatStatus === 'submitted' || chatStatus === 'streaming'
 
+  useEffect(() => {
+    const handleOpenUIAction = (event: Event) => {
+      if (!isOpenUIChatActionEvent(event)) return
+
+      const nextPrompt = event.detail.prompt.trim()
+      if (!nextPrompt) return
+
+      event.preventDefault()
+      handleSendMessageRef.current(nextPrompt)
+    }
+
+    window.addEventListener(OPENUI_CHAT_ACTION_EVENT, handleOpenUIAction)
+
+    return () => {
+      window.removeEventListener(OPENUI_CHAT_ACTION_EVENT, handleOpenUIAction)
+    }
+  }, [])
+
   return (
     <div className="relative">
       <div className="relative">

web-app/src/containers/ChatInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { memo, useState, useCallback, useEffect } from 'react'
 import type { UIMessage, ChatStatus } from 'ai'
-import { RenderMarkdown } from './RenderMarkdown'
+import { OpenUIResponse } from './OpenUIResponse'
 import { cn } from '@/lib/utils'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -276,7 +276,7 @@ export const MessageItem = memo(
             </div>
           ) : (
             <>
-              <RenderMarkdown
+              <OpenUIResponse
                 content={
                   grounding && !isStreaming
                     ? injectCitationMarkers(