@openai-lite/chatui

@openai-lite/chatui

Official ChatUI host SDK for existing admin consoles.

Users keep opening your product URL. After login, a ChatUI assistant appears on the right. The SDK does not replace your page, composer, or router.

Default ChatUI origin: http://chatui.topsports.lan
You do not pass this unless you are pointing at another ChatUI instance.

Docs: ChatUI 接入指南

Install

npm install @openai-lite/chatui

pnpm add @openai-lite/chatui

yarn add @openai-lite/chatui

Call init once in a login-gated root layout. Do not call it on the login page. Do not call it again on every route change.

Side effects

Installing the package does nothing by itself. Effects start only when you call init.

It does not replace Vue / React, the router, Axios instances, or your CSS framework. Optional vue / react peers are only needed if you import @openai-lite/chatui/vue or @openai-lite/chatui/react.

Vue 3

import { useRoute } from 'vue-router'
import { useChatUI } from '@openai-lite/chatui/vue'

const route = useRoute()

useChatUI({
  appId: 'APP_ID',
  getAccessToken: () => sessionStorage.getItem('access_token') || '',
  getPageContext: () => ({
    pageKind: 'app',
    entity: {
      module: route.name,
      tableId: route.params.tableId || route.name,
      rowId: route.params.id || '',
    },
  }),
  uiHandlers: {
    refreshData: () => loadList(),
  },
})

appId comes from ChatUI 业务系统配置. getAccessToken must return the same token your page uses for business APIs, without a Bearer prefix.

React

import { useParams, useLocation } from 'react-router-dom'
import { useChatUI } from '@openai-lite/chatui/react'

const params = useParams()
const location = useLocation()

useChatUI({
  appId: 'APP_ID',
  getAccessToken: () => sessionStorage.getItem('access_token') || '',
  getPageContext: () => ({
    pageKind: 'app',
    entity: {
      module: params.module || location.pathname,
      tableId: params.tableId,
      rowId: params.id || '',
    },
  }),
  uiHandlers: {
    refreshData: () => loadList(),
  },
})

Vanilla / HTML

Still supported. No npm required:

<script src="http://chatui.topsports.lan/agent-page-sdk.js"></script>
<script>
  AgentPageSDK.init({
    appId: 'APP_ID',
    getAccessToken: () => sessionStorage.getItem('access_token') || '',
  })
</script>

Or with the package:

import { init } from '@openai-lite/chatui'

init({
  appId: 'APP_ID',
  getAccessToken: () => sessionStorage.getItem('access_token') || '',
})

Options

chatuiOrigin is an alias of assistantUrl.

中文

业务页继续走你们自己的地址。登录后的根布局调用一次 init。

• 不要在登录页初始化。
• 路由切换不要重复 init。
• Token 与请求业务接口的那一份相同，不要加 Bearer 。
• 改库走业务 MCP；页面刷新调用现有查询函数。

完整说明见 接入指南。