使用教程
创作者教程
创作者成长
React
API
使用教程
创作者教程
创作者成长
React
API

接入

安装

NPM包

npm install @mujian/js-sdk

浏览器(UMD)

index.html
<body>
  <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.37/dist/umd/index.js"></script>
</body>

使用方式

JavaScript 版

ESM 方式

import { MujianSDK } from '@mujian/js-sdk';

const mujian = MujianSdk.getInstance();

mujian.init().then(() => {
    console.log('init success');
    mujianSdk.ai.chat.project.getInfo().then((res) => {
        console.log('getProjectInfo success', res);
    });

    mujianSdk.ai.chat.settings.persona.getActive().then((res) => {
        console.log('getPersonaInfo success', res);
    });
});

UMD 方式

index.html
<body>
  <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.37/dist/umd/index.js"></script>
</body>
assets/js/chat.js
// 初始化。初始化幕间官方SDK
const mujianSdk = new window.MujianUMD.MujianSdk();

(async () => {
  await mujianSdk.init().then(async () => {
    await renderAllMessages(); // 渲染所有消息
  });
})();

React 版

详见：https://docs.mujian.ai/react/index.html

API (纯JS)

使用方式和 JavaScript 版 相同

API (React Hooks)

App.js
import { useChat } from '@mujian/js-sdk/react';
import { MujianProvider } from '@mujian/js-sdk/react';

function Chat() {
 const { messages, append, regenerate, continueGenerate, stop } = useChat();
  return <div>
    {messages.map((message) => (
      <div key={message.id}>{message.content}</div>
    ))}
    <button onClick={() => append('Hello')}>Append</button>
  </div>;
}

function App() {
  return (
    <MujianProvider loadingComponent={<div>Loading...</div>}>
      <Chat />
    </MujianProvider>
  );
}
export default App;

React 组件库

我们提供了一些开箱即用的、没有样式的标准组件，如消息列表、消息气泡、markdown渲染等。未来还将进行扩容。

我们的官方聊天应用也是基于这套SDK和组件库开发的。所以创作者可以使用到官方同款组件和能力。

幕间 Mujian 文档站