Skip to content

Latest commit

 

History

History
132 lines (93 loc) · 3.15 KB

quick_ assistant_start_cn.md

File metadata and controls

132 lines (93 loc) · 3.15 KB

是什么

Assistant 是一个带有浮动气泡和可拖动的聊天助手组件。
image

点击小猫后会展开聊天抽屉

image

快速接入

Token 获取

来到 https://petercat.ai/ 进入工作台点击登陆

image

点击空间添加答疑机器人

输入你的项目地址,可快速生成机器人

image

token 可在这里获取

image

代码引入

npm install @petercatai/assistant
import { Assistant } from '@petercatai/assistant';
import '@petercatai/assistant/style';

const YourPetercataiAssistant = () => {
  return <Assistant token="your token" apiDomain="https://api.petercat.ai" />;
};

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      {/* ... */}
      <YourPetercataiAssistant />
    </>
  );
}

Next.js 接入

需要禁用服务端渲染

import dynamic from 'next/dynamic';
import '@petercatai/assistant/style';

const Assistant = dynamic(() => import('@petercatai/assistant').then(mod => mod.Assistant), { ssr: false });

// PeterCat AI Assistant: https://petercat.ai/
export const PeterCat = () => {
  return <Assistant token="your token" apiDomain="https://api.petercat.ai" />;
};

更详细的入参请参考文档

petercat/assistant/src/Assistant/index.md at main · petercat-ai/petercat

其他

UMD 接入

PeterCat 同时支持 UMD 的接入方式

  1. external 和 UMD 加载资源
// example for umi project
// .umirc.ts
export default {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    antd: 'antd',
    dayjs: 'dayjs',
    'lottie-web': 'lottie',
  },
};

Note

Why external ?

更小、提高 cache 率 -> 更快的用户体验

下面是一个引入的参考例子

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@petercatai/assistant/dist/umd/assistant.min.css"></link>
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/antd/dist/antd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lottie-web/build/player/lottie.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@petercatai/assistant/dist/umd/assistant.min.js"></script>
</head>
  1. 加载 PeterCat Assistant
<body>
  ...
   <script>
     PetercatLUI.initAssistant({
       apiDomain: 'https://api.petercat.ai',
       token: 'your-token'
     });
  </script>
</body>

就是这样！现在您可以在您的项目中享受助手组件了。