devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小蓝xlanll | 2024-03-14 19:52:03

赞

踩

claude30天试用

一、关于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接入。

注册地址：https://slack.com/get-started#/createnew

注意：注册时尽量使用谷歌邮箱，这样后续操作的成功率高，不会因为各种各样的问题导致无法使用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官网，地址：https://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"按钮，依次搜索添加以下权限：

  1. channels:history
  2. channels:read
  3. channels:write
  4. groups:history
  5. groups:read
  6. groups:write
  7. chat:write
  8. im:history
  9. im:write
  10. mpim:history
  11. mpim:write

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

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

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

 三、在Laf中接入Claude

登录Laf云开发平台 https://laf.dev/，在应用列表中选择一个应用后点击【开发】按钮，进入 Laf 应用开发 IDE

 1. 添加NPM依赖

点击左下角【NPM依赖】处的“+”按钮，在弹框中搜索“claude-api-slack”，选中第一个后再点击“保存并重启”，等待3秒左右依赖会添加完成

 2. 添加函数

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

 3.云函数完整代码

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

  1.  
  2. import cloud from '@lafjs/cloud'
  3.  
  4. export default async function (ctx: FunctionContext) {
  5.   // 接收一个question，和一个可选的上下文id：conversationId
  6.   const { question, conversationId } = ctx.body;
  7.   //参数校验
  8.   if (!question) {
  9.     return resultData(-1, '参数question不能为空！');
  10.   }
  11.   return await askCluadeAPi(question, conversationId);
  12. }
  13.  
  14. async function askCluadeAPi(question, conversationId) {
  15.   // slack应用的token
  16.   const token = 'xxx-xxxxxx';
  17.   // claude的ID
  18.   const bot = 'xxx';
  19.   // 注意，这里是频道名称，不是频道id，开头不用加#
  20.   const chatId = 'channel_name';
  21.  
  22.   try {
  23.     // 初始化claude
  24.     const { Authenticator } = await import('claude-api-slack');
  25.  
  26.     // 通过缓存保存客户端，可以避免每次提问都是在新会话
  27.     let claudeClient = cloud.shared.get('claudeClient');
  28.     if (!claudeClient) {
  29.       claudeClient = new Authenticator(token, bot);
  30.       cloud.shared.set('claudeClient', claudeClient);
  31.     }
  32.     // 创建频道并返回房间ID：channel
  33.     const channel = await claudeClient.newChannel(chatId);
  34.  
  35.     let result;
  36.     if (conversationId) {
  37.       result = await claudeClient.sendMessage({
  38.         text: question,
  39.         channel,
  40.         conversationId,
  41.         onMessage: (originalMessage) => {
  42.           console.log("loading", originalMessage);
  43.         }
  44.       });
  45.     } else {
  46.       result = await claudeClient.sendMessage({
  47.         text: question,
  48.         channel,
  49.         onMessage: (originalMessage) => {
  50.           // console.log("loading", originalMessage)
  51.           console.log("loading", originalMessage);
  52.         }
  53.       });
  54.     }
  55.     console.log("success", result);
  56.     let data = {
  57.       answer: result.text,
  58.       conversationId: result.conversationId
  59.     };
  60.     return resultData(0, '成功！', data);
  61.   }
  62.   catch (e) {
  63.     console.log('出现异常', e.message);
  64.     return resultData(-1, '出现异常：' + e.message);
  65.   }
  66. }
  67.  
  68. //返回结果数据
  69. async function resultData(code = -1, msg = '', data = null) {
  70.   return { code, msg, data }
  71. }

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

 四、前端整合

前端技术栈：vue + element plus

1.创建vue项目

这里使用vue脚手架创建项目，运行以下命令来创建一个新项目：

vue create hello-world

2.安装element plus依赖并引入

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

  1. # NPM
  2. $ npm install element-plus --save
  3.  
  4. # Yarn
  5. $ yarn add element-plus
  6.  
  7. # pnpm
  8. $ pnpm install element-plus

官网：https://element-plus.gitee.io/zh-CN/guide/installation.html 

安装完成后在main.js中引入组件

  1.  
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import router from './router'
  5. import store from './store'
  6.  
  7. // 引入element-plus
  8. import ElementPlus from 'element-plus'
  9. import * as ElIcons from '@element-plus/icons-vue'
  10. import 'element-plus/dist/index.css'
  11. import locale from 'element-plus/lib/locale/lang/zh-cn'
  12.  
  13. const app = createApp(App)
  14. for (const name in ElIcons) {
  15.     app.component(name, ElIcons[name]);
  16. }
  17. app.use(ElementPlus, { locale })
  18. app.use(store)
  19. app.use(router)
  20. app.mount('#app')

3.代码实现

修改“vue.config.js”文件中的配置，其中“target”为Laf接口访问前缀

  1.  
  2. module.exports = {
  3.   transpileDependencies: true,
  4.   lintOnSave: false,
  5.   productionSourceMap: false,
  6.   devServer: {
  7.       proxy: {
  8.           '/api': {
  9.               target: 'https://gghfpp.laf.dev',
  10.               changeOrigin: true,
  11.               ws: false,
  12.               pathRewrite: {
  13.                   '^/api': ''
  14.               }
  15.           }
  16.       }
  17.   }
  18. }

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

  1. <template>
  2.   <div class="page">
  3.     <el-container>
  4.       <el-header ref="elHeader">
  5.         <p>欢迎体验Claude AI~</p>
  6.       </el-header>
  7.       <el-main :style="{ height: scrollerHeight + 'px' }">
  8.         <el-scrollbar class="msg-list" ref="elScrollbar">
  9.           <div ref="divScroll">
  10.             <el-row v-for="(item, key) in msgList" :key="key" class="msg-item">
  11.               <el-col>
  12.                 <div :class="item.type == 2 ? 'time t1' : 'time t2'">{{ item.time }}</div>
  13.                 <div class="content">
  14.                   <img v-if="item.type == 1" class="img_1" src="../assets/images/ic_claude.png" />
  15.                   <el-card :style="{ 'margin-left': (item.type == 2 ? 'auto' : '0') }">
  16.                     <div class="txt" v-html="item.content"></div>
  17.                   </el-card>
  18.                   <img v-if="item.type == 2" class="img_2" src="../assets/images/me.png" />
  19.                 </div>
  20.               </el-col>
  21.             </el-row>
  22.           </div>
  23.         </el-scrollbar>
  24.       </el-main>
  25.       <el-footer ref="elFooter">
  26.         <el-input v-model="queryInfo.prompt" placeholder="请输入消息..." clearable size="large" :disabled="isDisabled">
  27.           <template #append>
  28.             <el-button type="primary" :disabled="isDisabled" @click="sendMessage()">
  29.               <el-icon>
  30.                 <Position />
  31.               </el-icon>发送
  32.             </el-button>
  33.           </template>
  34.         </el-input>
  35.       </el-footer>
  36.     </el-container>
  37.   </div>
  38. </template>
  39.  
  40. <script>
  41. import topBar from '@/components/topBar.vue'
  42.  
  43. var _this;
  44. export default {
  45.   name: 'home',
  46.   components: {
  47.     topBar
  48.   },
  49.   data() {
  50.     return {
  51.       // 容器高度初始化为0
  52.       scrollerHeight: 0,
  53.       // 查询参数信息
  54.       queryInfo: {
  55.         conversationId: null,
  56.         prompt: null,
  57.         question: null
  58.       },
  59.       // 信息集合
  60.       msgList: [],
  61.       msgIndex: 0,
  62.       isDisabled: false
  63.     }
  64.   },
  65.   created() {
  66.     _this = this;
  67.     _this.queryInfo.conversationId = Math.ceil(Math.random() * 1000000000000);
  68.   },
  69.   mounted: function () {
  70.     _this.calculateHeight();
  71.  
  72.     // 当浏览器窗口大小发生变化时，重新计算容器高度
  73.     window.addEventListener('resize', () => {
  74.       _this.calculateHeight();
  75.     });
  76.   },
  77.   methods: {
  78.     // 计算容器高度
  79.     calculateHeight() {
  80.       // 获取顶部元素
  81.       let elHeader = _this.$refs.elHeader;
  82.       // 获取底部元素
  83.       let elFooter = _this.$refs.elFooter;
  84.       if (elHeader && elFooter) {
  85.         _this.scrollerHeight = document.documentElement.clientHeight - elHeader.$el.offsetHeight - elFooter.$el.offsetHeight - 1;
  86.       }
  87.     },
  88.     //发送消息
  89.     sendMessage() {
  90.       const _prompt = _this.queryInfo.prompt;
  91.       if (!_prompt) {
  92.         _this.$message.toast({
  93.           message: '请输入消息！'
  94.         });
  95.         return;
  96.       }
  97.  
  98.       _this.queryInfo.question = _prompt;
  99.       _this.queryInfo.prompt = '';
  100.       _this.insertMsg(2, _prompt);
  101.       _this.isDisabled = true;
  102.  
  103.       //延迟0.5秒执行
  104.       setTimeout(function () {
  105.         _this.insertMsg(1, '
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/236964
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。