一、关于Claude

1.什么是Claude？

Claude是一款人工智能谈天机器人。它能够像朋友相同和你天然地互动谈天。和Claude谈天体会很像跟人谈天，你能够评论任何话题，问各种各样的问题。Claude会尽量了解你说的每一句话，并给出适宜的回复。相比之下，Chat GPT是一个开源的对话模型，主要用于生成对话的回复内容。和Chat GPT谈天感觉更像在和一个主动回复机器谈天，它给出的回复不太特性化，也不会真正了解语义。而Claude是一个完好的人工智能对话体系，专注于供给更赋有特性的交流交互体会。

2.Claude和Chat GPT的区别

了解力：Claude具有较强的语言了解能力，能了解上下文和句子意思，提取要害信息。Chat GPT主要依靠统计学习，对语义了解较为薄弱。
常识量：Claude有一个较为广泛的常识图谱，包含常识、词汇等，以协助了解语言和答复问题。Chat GPT主要依靠预训练的语言模型，常识面相对有限。
特性化：Claude的回复愈加特性化，能够根据谈天内容和上下文作出恰当的回应和发问。Chat GPT的回复比较固定和非特性化,缺乏连贯性。
交互体会：和Claude的对话更像人与人的天然交流，有问有答，能够交换多个轮次。而Chat GPT更类似主动问答，一问一答，交互体会稍显生硬。

总之，尽管两者都是人工智能对话技能产品，但Claude在了解力、常识量、特性化和交互体会等方面都优于Chat GPT，能够供给愈加近似人的交流互动体会。但无论哪一种技能,人机交互还需求持续前进和进步。

二、接入Claude前的预备

1.注册Slack

Slack是一个作业效率管理渠道，让每个人都能够运用无代码主动化和 AI 功能，还能够无缝衔接查找和常识同享，并确保团队保持联系和参加。在世界各地，Slack 不仅遭到公司的信赖，一起也是人们偏好运用的渠道。目前市面上运用Claude的办法都是经过Slack接入。

注册地址：slack.com/get-started…

留意：注册时尽量运用谷歌邮箱，这样后续操作的成功率高，不会因为各种各样的问题导致无法运用Claude。

2.创立作业区

注册成功之后咱们首先需求创立一个作业区，作业区是一个独立的协作环境，每个作业区有自己的渠道(Channels)、成员、权限设置等，不同作业区之间互相隔离，成员和资源不同享。

然后填写“作业区称号”，点击“下一步”

输入名字，上传照片（选填），持续点击“下一步”

接着，输入频道称号，持续点击“下一步”

增加成功后便会呈现如下界面：

3.增加Claude运用到作业区（此过程需求魔法）

点击左边菜单【阅读Slack】下的【运用】，如下图：

在运用列表中查找Claude，并点击“增加”

点击“了解更多”，并授权增加Claude到Slack

说明：呈现以上界面说明当前ip被封闭了，需求运用魔法上网（署理区域建议挑选US），并运用全局署理或切换无痕阅读等办法。

切换正确的区域之后点击 “Add to Slask”将会呈现以下界面，然后点击“答应”按钮

4.开通高档功能

回到作业区主界面，在左边中会主动呈现Claude运用，此刻跟Claude谈天会发现它是不会回复任何音讯的

然后点击左边菜单【更多】-【Slack Connect】

接着点击“创立频道”，如下图：

留意：若呈现以下界面，没有“开端免费试用”的按钮，建议从头创立一个作业区（从第二步开端从头来一遍）

正常界面如下图，点击“开端免费试用”按钮，这儿不需求输入任何的信用卡等的信息

创立一个频道，随便输入一个称号，然后点击“下一步”

完结后会在左边菜单中呈现刚才新建的频道，如下图：

接下来，咱们为这个频道增加Claude运用

然后，挑选刚刚创立的频道

完结之后，在左边菜单中，挑选咱们刚刚创立的频道，@Claude 发送任意音讯，初次@会触发一个申请，点一下“Agree”即可

完结以上操作后，就相当于具有了一个跟ChatGPT相同聪明的人工智能AI帮手。一起也能够在Slack内经过@Claude的办法跟他进行对话，如下图：

5.获取Token和授权

进入Slack API官网，地址：api.slack.com/，然后在顶部右上角的“Your apps ”处点击“Create your first app”，如下图：

然后进入界面后，点击“Create an App”，接着挑选“From scratch”

然后输入“App Name”，挑选前面创立的作业空间，再点击“Create App”

创立成功之后，在左边的菜单中找到【OAuth & Permissions】，然后在页面中心往下滑找到【User Token Scopes】，点击”Add an OAuth Scopes”按钮，顺次查找增加以下权限：

channels:history
channels:read
channels:write
groups:history
groups:read
groups:write
chat:write
im:history
im:write
mpim:history
mpim:write

一共11个权限，增加完结之后。回到顶部【OAuth Tokens for Your Workspace】栏，点击【Install to Workspace】，然后承认授权即可

至此，便拿到了App的Token，将其复制出来（后边有用）

接着，回到作业区，点击左边菜单中的【Claude】，获取Claude ID，如下图：

三、在Laf中接入Claude

登录Laf云开发渠道laf.dev/ ，在运用列表中挑选一个运用后点击【开发】按钮，进入 Laf 运用开发 IDE

1. 增加NPM依靠

点击左下角【NPM依靠】处的“+”按钮，在弹框中查找“claude-api-slack”，选中第一个后再点击“保存并重启”，等候3秒左右依靠会增加完结

2. 增加函数

点击左上角【函数列表】处的“+”按钮，在弹框中输入函数名（比如：claude-func），其他默认，完结后点击“承认”按钮，等候3秒左右函数会增加完结

3.云函数完好代码

云函数“claude-func”的完好代码如下：

import cloud from '@lafjs/cloud'
export default async function (ctx: FunctionContext) {
  // 接纳一个question，和一个可选的上下文id：conversationId
  const { question, conversationId } = ctx.body;
  //参数校验
  if (!question) {
    return resultData(-1, '参数question不能为空！');
  }
  return await askCluadeAPi(question, conversationId);
}
async function askCluadeAPi(question, conversationId) {
  // slack运用的token
  const token = 'xxx-xxxxxx';
  // claude的ID
  const bot = 'xxx';
  // 留意，这儿是频道称号，不是频道id，开头不用加#
  const chatId = 'channel_name';
  try {
    // 初始化claude
    const { Authenticator } = await import('claude-api-slack');
    // 经过缓存保存客户端，能够防止每次发问都是在新会话
    let claudeClient = cloud.shared.get('claudeClient');
    if (!claudeClient) {
      claudeClient = new Authenticator(token, bot);
      cloud.shared.set('claudeClient', claudeClient);
    }
    // 创立频道并返回房间ID：channel
    const channel = await claudeClient.newChannel(chatId);
    let result;
    if (conversationId) {
      result = await claudeClient.sendMessage({
        text: question,
        channel,
        conversationId,
        onMessage: (originalMessage) => {
          console.log("loading", originalMessage);
        }
      });
    } else {
      result = await claudeClient.sendMessage({
        text: question,
        channel,
        onMessage: (originalMessage) => {
          // console.log("loading", originalMessage)
          console.log("loading", originalMessage);
        }
      });
    }
    console.log("success", result);
    let data = {
      answer: result.text,
      conversationId: result.conversationId
    };
    return resultData(0, '成功！', data);
  }
  catch (e) {
    console.log('呈现异常', e.message);
    return resultData(-1, '呈现异常：' + e.message);
  }
}
//返回结果数据
async function resultData(code = -1, msg = '', data = null) {
  return { code, msg, data }
}

点击发布后运用Apipost调用结果如下：

四、前端整合

前端技能栈：vue + element plus

1.创立vue项目

这儿运用vue脚手架创立项目，运转以下命令来创立一个新项目：

vue create hello-world

2.安装element plus依靠并引进

建议运用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus

# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

官网：element-plus.gitee.io/zh-CN/guide…

安装完结后在main.js中引进组件


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引进element-plus
import ElementPlus from 'element-plus'
import * as ElIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
for (const name in ElIcons) {
    app.component(name, ElIcons[name]);
}
app.use(ElementPlus, { locale })
app.use(store)
app.use(router)
app.mount('#app')

3.代码完成

修正“vue.config.js”文件中的装备，其中“target”为Laf接口拜访前缀

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
      proxy: {
          '/api': {
              target: 'https://gghfpp.laf.dev',
              changeOrigin: true,
              ws: false,
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

接着，完结页面布局和逻辑业务完成，以“home.vue”为例，完好代码如下：

<template>
  <div class="page">
    <el-container>
      <el-header ref="elHeader">
        <p>欢迎体会Claude AI~</p>
      </el-header>
      <el-main :style="{ height: scrollerHeight + 'px' }">
        <el-scrollbar class="msg-list" ref="elScrollbar">
          <div ref="divScroll">
            <el-row v-for="(item, key) in msgList" :key="key" class="msg-item">
              <el-col>
                <div :class="item.type == 2 ? 'time t1' : 'time t2'">{{ item.time }}</div>
                <div class="content">
                  <img v-if="item.type == 1" class="img_1" src="../assets/images/ic_claude.png" />
                  <el-card :style="{ 'margin-left': (item.type == 2 ? 'auto' : '0') }">
                    <div class="txt" v-html="item.content"></div>
                  </el-card>
                  <img v-if="item.type == 2" class="img_2" src="../assets/images/me.png" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-scrollbar>
      </el-main>
      <el-footer ref="elFooter">
        <el-input v-model="queryInfo.prompt" placeholder="请输入音讯..." clearable size="large" :disabled="isDisabled">
          <template #append>
            <el-button type="primary" :disabled="isDisabled" @click="sendMessage()">
              <el-icon>
                <Position />
              </el-icon>发送
            </el-button>
          </template>
        </el-input>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import topBar from '@/components/topBar.vue'
var _this;
export default {
  name: 'home',
  components: {
    topBar
  },
  data() {
    return {
      // 容器高度初始化为0
      scrollerHeight: 0,
      // 查询参数信息
      queryInfo: {
        conversationId: null,
        prompt: null,
        question: null
      },
      // 信息调集
      msgList: [],
      msgIndex: 0,
      isDisabled: false
    }
  },
  created() {
    _this = this;
    _this.queryInfo.conversationId = Math.ceil(Math.random() * 1000000000000);
  },
  mounted: function () {
    _this.calculateHeight();
    // 当阅读器窗口巨细发生变化时，从头核算容器高度
    window.addEventListener('resize', () => {
      _this.calculateHeight();
    });
  },
  methods: {
    // 核算容器高度
    calculateHeight() {
      // 获取顶部元素
      let elHeader = _this.$refs.elHeader;
      // 获取底部元素
      let elFooter = _this.$refs.elFooter;
      if (elHeader && elFooter) {
        _this.scrollerHeight = document.documentElement.clientHeight - elHeader.$el.offsetHeight - elFooter.$el.offsetHeight - 1;
      }
    },
    //发送音讯
    sendMessage() {
      const _prompt = _this.queryInfo.prompt;
      if (!_prompt) {
        _this.$message.toast({
          message: '请输入音讯！'
        });
        return;
      }
      _this.queryInfo.question = _prompt;
      _this.queryInfo.prompt = '';
      _this.insertMsg(2, _prompt);
      _this.isDisabled = true;
      //延迟0.5秒履行
      setTimeout(function () {
        _this.insertMsg(1, '机器人正在考虑中...');
      }, 500);
      //开端计时
      let seconds = 0;
      let timer = setInterval(function () {
        seconds++;
        _this.msgList[_this.msgList.length - 1].content = '机器人正在考虑中...' + seconds + ' 秒';
      }, 1000);
      _this.sendRequest(timer);
    },
    //建议恳求
    sendRequest(timer) {
      _this.$requests
        .post("/api/claude-func", _this.queryInfo)
        .then((res) => {
          _this.isDisabled = false;
          //封闭计时
          clearInterval(timer);
          console.log('恳求结果', res);
          if (res != null) {
            // _this.$message.toast({
            //   message: res.msg,
            //   type: "success",
            // });
            if (res.data) {
              let answer = res.data.answer.replaceAll(',', '，').replaceAll(':', '：').replaceAll('!', '！').replaceAll(/\n\n/g, '<br>').replaceAll(/\n/g, '<br>');
              // _this.insertMsg(1, answer);
              _this.msgList[_this.msgList.length - 1].content = '';
              //完成打字机作用
              let index = 0;
              let _timer = setInterval(function () {
                if (answer.length < index) {
                  clearInterval(_timer);
                }
                let str;
                //遇到<br>时主动换行
                if ((index + 4) <= answer.length && answer.substr(index, 4) == '<br>') {
                  str = answer.substr(index, 4);
                  index = index + 4;
                }
                else {
                  str = answer.substr(index, 1);
                  index++;
                }
                _this.msgList[_this.msgList.length - 1].content += str;
                //完成主动翻滚
                _this.autoScroll();
              }, 100);
            }
          }
        });
    },
    // 刺进会话
    insertMsg(type, content) {
      _this.msgIndex = _this.msgIndex + 1;
      _this.msgList.push({
        id: _this.msgIndex,
        type: type || 0,//类型 1-机器人，2-自己
        content: content || '',
        time: _this.$date.fmtDateTime(null, 3)
      });
    },
    //主动翻滚
    autoScroll() {
      _this.$nextTick(() => {
        let divScroll = _this.$refs.divScroll;
        let elScrollbar = _this.$refs.elScrollbar;
        if (divScroll.offsetHeight > elScrollbar.$el.offsetHeight) {
          elScrollbar.setScrollTop(divScroll.offsetHeight - elScrollbar.$el.offsetHeight);
        }
      });
    }
  }
}
</script>
<style lang="scss">
.page {
  .el-header {
    line-height: 20px;
    text-align: left;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
    height: auto;
    padding: 8px 15px;
    p {
      font-size: 14px;
      color: #303133;
    }
    .tips {
      color: red;
    }
  }
  .el-main {
    padding: 12px 15px;
    .msg-list {
      .msg-item:last-child {
        margin-bottom: 0;
      }
      .msg-item {
        margin-bottom: 15px;
        text-align: left;
        .content {
          display: flex;
        }
        .img_1 {
          width: 36px;
          height: 36px;
          margin-right: 8px;
        }
        .img_2 {
          width: 36px;
          height: 36px;
          margin-left: 8px;
        }
        .el-card__body {
          padding: 8px 15px;
          font-size: 14px;
          color: #303133;
          min-width: 130px;
        }
        .time {
          margin-bottom: 5px;
          color: #909399;
          font-size: 12px;
        }
        .t1 {
          text-align: right;
          margin-right: 45px;
        }
        .t2 {
          margin-left: 45px;
        }
      }
    }
  }
  .el-footer {
    line-height: 60px;
    background-color: #ecf5ff;
    color: var(--el-text-color-primary);
    .el-input-group__append {
      background-color: #409EFF;
      color: #ffffff;
      box-shadow: none;
    }
  }
}
</style>

说明：post恳求时，第一个url参数需求运用自己在Laf中创立的云函数的称号

1）内容输出时完成打字机作用，这儿采用了定时器的办法，每隔100毫秒将后端返回的内容拆分后逐一进行追加，核心代码如下：

//完成打字机作用
let index = 0;
let _timer = setInterval(function () {
  if (answer.length < index) {
    clearInterval(_timer);
  }
  let str;
  //遇到<br>时主动换行
  if ((index + 4) <= answer.length && answer.substr(index, 4) == '<br>') {
    str = answer.substr(index, 4);
    index = index + 4;
  }
  else {
    str = answer.substr(index, 1);
    index++;
  }
  _this.msgList[_this.msgList.length - 1].content += str;
  //完成主动翻滚
  _this.autoScroll();
}, 100);

2）el-scrollbar完成主动翻滚到最底部，官网element plus文档上说能够运用Infinite Scroll无限翻滚，可是并没有主动翻滚到底部的设置选项。

完成思路：首先在el-scrollbar翻滚视图组件内增加加一层div，然后再在内容改变时完成主动翻滚到底部的处理办法autoScroll()，核心代码如下：

<el-scrollbar class="msg-list" ref="elScrollbar">
  <div ref="divScroll">
    <el-row v-for="(item, key) in msgList" :key="key" class="msg-item">
      <el-col>
        <div :class="item.type == 2 ? 'time t1' : 'time t2'">{{ item.time }}</div>
        <div class="content">
          <img v-if="item.type == 1" class="img_1" src="../assets/images/ic_claude.png" />
          <el-card :style="{ 'margin-left': (item.type == 2 ? 'auto' : '0') }">
            <div class="txt" v-html="item.content"></div>
          </el-card>
          <img v-if="item.type == 2" class="img_2" src="../assets/images/me.png" />
        </div>
      </el-col>
    </el-row>
  </div>
</el-scrollbar>
//主动翻滚
autoScroll() {
  _this.$nextTick(() => {
    let divScroll = _this.$refs.divScroll;
    let elScrollbar = _this.$refs.elScrollbar;
    if (divScroll.offsetHeight > elScrollbar.$el.offsetHeight) {
      elScrollbar.setScrollTop(divScroll.offsetHeight - elScrollbar.$el.offsetHeight);
    }
  });
}

在src目录下创立utils文件夹，用于寄存以上关联的js，具体代码如下：

日期格式化（date.js）

//时刻处理
const date = {
    /**
     * 
     * @param {时刻} dateTime 
     * @param {类型} type 默认：年月日
     * type=1 年-月-日
     * type=2 年.月.日
     * type=3 年-月-日 时:分:秒
     * type=4 年.月.日 时:分:秒
     * @returns 
     */
    fmtDateTime(dateTime, type) {
        if (dateTime == '' || dateTime == null) {
            dateTime = new Date();
        } else {
            // dateTime = dateTime.substr(0, 4) + "/" + dateTime.substr(5, 2) + "/" + dateTime.substr(8, 2) + " " + dateTime.substr(11, 8);
            dateTime = new Date(dateTime);
        }
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth() + 1;
        var d = dateTime.getDate();
        var h = dateTime.getHours() > 9 ? dateTime.getHours().toString() : '0' + dateTime.getHours();
        var mm = dateTime.getMinutes() > 9 ? dateTime.getMinutes().toString() : '0' + dateTime.getMinutes();
        var ss = dateTime.getSeconds() > 9 ? dateTime.getSeconds().toString() : '0' + dateTime.getSeconds();
        if (type === 1) {
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
        }
        else if (type === 2) {
            return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d);
        }
        else if (type === 3) {
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + " " + h + ":" + mm + ":" + ss;
        }
        else if (type === 4) {
            return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d) + " " + h + ":" + mm + ":" + ss;
        }
        return y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日';
    }
}
export default date

音讯弹框提示（message.js）

import { ElMessageBox, ElMessage } from "element-plus";
const message = {
    //询问框
    confirm(obj) {
        var message = obj.message || '确定履行此操作吗？'
        var title = obj.title || '温馨提示'
        return ElMessageBox.confirm(message, title, {
            type: 'warning',//success info warning error
            showCancelButton: obj.showCancelButton || true,
            cancelButtonText: obj.cancelButtonText || '取消',
            confirmButtonText: obj.confirmButtonText || '确定',
        }).then(obj.success || function () {
        }).catch(obj.fail || function () {
        });
    },
    //信息提示
    toast(obj) {
        return ElMessage({
            message: obj.message || 'this is a message.',
            type: obj.type || 'warning',//success warning info error
            duration: obj.duration || 3000,
            showClose: obj.showClose || false
        });
    }
}
export default message

http恳求（requests.js）

import axios from 'axios'
import message from './message';
// 创立 axios 实例
const requests = axios.create({
    // baseURL: 'http://localhost:8088',
    withCredentials: true,
    headers: {
        // 'Content-Type': 'application/json',
        // 'content-type' : 'application/x-www-form-urlencoded',
        // 'auth': 'test'
    },
    timeout: 30 * 1000 // 恳求超时时刻 30秒
})
// 错误处理函数
const err = (error) => {
    if (error.response) {
        const data = error.response.data;
        if (error.response.status === 403) {
            message.toast({
                message: data.message || data.msg
            });
        }
        if (error.response.status === 401) {
            message.toast({
                type: 'warning',
                message: '你没有权限。'
            });
        }
    }
    return Promise.reject(error)
}
// requests interceptor(恳求拦截器)
requests.interceptors.request.use(config => {
    const token = localStorage.getItem('token')
    if (token) {
        config.headers['auth'] = token // 让每个恳求带着自定义 token
    }
    return config
}, err)
// requests interceptor（接纳拦截器）
requests.interceptors.response.use((response) => {
    const res = response.data;
    if (res.code == 0) {
        return Promise.resolve(res).catch((e) => { });
    } else {
        message.toast({
            message: res.msg
        });
        return Promise.reject(res).catch((e) => { });
    }
}, err)
export default {
    requests
}

一起，需求修正“main.js”，进行引进，装备全局变量

import message from './utils/message'
import requests from './utils/requests'
import date from './utils/date'
//装备全局属性
app.config.globalProperties.$requests = requests.requests
app.config.globalProperties.$message = message
app.config.globalProperties.$date = date

“App.vue”页面中款式如下：

<template>
  <router-view />
</template>
<style lang="scss">
body {
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
p {
  margin: 0;
  padding: 0;
}
.el-message{
  width: max-content;
}
</style>

以为全部完结后，运用命令npm run serve运转项目，界面作用如下：

在线体会地址：claude.jhcrs.cn/

新手小白如何使用Laf免费接入Claude，并快速拥有一个属于自己的AI助手

一、关于Claude

1.什么是Claude？

2.Claude和Chat GPT的区别

二、接入Claude前的预备

1.注册Slack

2.创立作业区

3.增加Claude运用到作业区（此过程需求魔法）

4.开通高档功能

5.获取Token和授权

三、在Laf中接入Claude

1. 增加NPM依靠

2. 增加函数

3.云函数完好代码

四、前端整合

1.创立vue项目

2.安装element plus依靠并引进

3.代码完成

作者信息

推广

新手小白如何使用Laf免费接入Claude，并快速拥有一个属于自己的AI助手

一、关于Claude

1.什么是Claude？

2.Claude和Chat GPT的区别

二、接入Claude前的预备

1.注册Slack

2.创立作业区

3.增加Claude运用到作业区（此过程需求魔法）

4.开通高档功能

5.获取Token和授权

三、在Laf中接入Claude

1. 增加NPM依靠

2. 增加函数

3.云函数完好代码

四、前端整合

1.创立vue项目

2.安装element plus依靠并引进

3.代码完成

相关文章

☆打卡算法☆LeetCode 94、二叉树的中序遍历 算法解析

聊天无障碍：OpenAI SSE 协议的流式响应 & Chatgpt带给我的反思

LeetCode – #102 二叉树的层序遍历

初探dyld动态链接器流程对iOS又精进了一步

作者信息

推广

☆打卡算法☆LeetCode 94、二叉树的中序遍历算法解析