AI智能体模板开发流程——详细介绍（四）

最新推荐文章于 2026-04-20 12:04:15 发布
原创 最新推荐文章于 2026-04-20 12:04:15 发布 · 496 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #开发语言 #AI助手 #人工智能 #AI硬件
#AI智能体 #智能体开发

 AI智能体模板开发流程——详细介绍（三）

11. 角色新增/编辑页面

页面介绍

角色新增/编辑页面主要用于修改角色信息（头像、名称，角色介绍、记忆体），以及选择音色、语种、和大模型。

获取角色模板列表/模板详情

功能说明

B 端可以预设一些模板，提供给用户选择，简化用户操作流程。

相关代码段

//获取角色模板列表
export const getAIAgentRolesTemplateList = async () => {
  try {
    // getAgentRolesTemplates 
    const response = await getAI2AgentRolesTemplates({ devId: getDevInfo().devId, panelCode: 'ai_platform' });

    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const getTemplateList = async () => {
  getAIAgentRolesTemplateList()
    .then((res: any) => {
      console.log('==getTemplateList', res);
      setTemplateList(res);
      if (res?.length > 0) {
        setTemplateRoleId(res[0].roleId);
      }
    })
    .catch(err => {
      console.log('getTemplateList::err::', err);
    });
};
//获取角色模板详情
export const getAIAgentRolesTemplatesDetail = async (roleId: string) => {
  try {
    // getAgentRolesTemplatesDetail 
    const response = await getAI2AgentRolesTemplatesDetail({ devId: getDevInfo().devId, roleId });

    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const getTemplateListDetail = async (roleId: string) => {
  getAIAgentRolesTemplatesDetail(roleId)
    .then((res: any) => {
      console.log('==getTemplateListDetail', res);
      initRoleData(res);
      initRoleInfoData();
    })
    .catch(err => {
      console.log('getTemplateListDetail::err::', err, roleId);
    });
};

获取角色详情

功能说明

编辑角色时，获取当前角色详情。

相关代码段

export const getAIAgentRoleDetail = async (roleId: string) => {
  try {
    // getAgentRolesDetail 
    const response = await getAI2AgentRolesDetail({
      devId: getDevInfo().devId,
      roleId,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const getAgentRoleDetail = async (roleId: string) => {
  getAIAgentRoleDetail(roleId)
    .then((res: any) => {
      console.log('==getAIAgentRoleDetail', res);
      initRoleData(res);
      initRoleInfoData();
    })
    .catch(err => {
      console.log('getAIAgentRoleDetail::err::', err);
    });
};

创建/编辑角色

功能说明

创建/编辑角色。

相关代码段

// 创建角色
export const createRole = async (params: any) => {
  try {
    // postCreateAgentRole 
    const response = await addAI2AgentRoles({
      devId: getDevInfo().devId,
      ...params,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};
// 编辑角色
export const updateRole = async (params: any) => {
  try {
    // postUpdateAgentRole 
    const response = await updateAI2AgentRoles({
      devId: getDevInfo().devId,
      ...params,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const handleSave = async () => {
  if (!name || nameErrorMessage) {
    showToast({
      title: `${Strings.getLang('please_complete')}${Strings.getLang('role_name')}`,
      icon: 'error',
    });
    return;
  }
  if (!introduction) {
    showToast({
      title: `${Strings.getLang('please_complete')}${Strings.getLang('introduction')}`,
      icon: 'error',
    });
    return;
  }
  if (!roleInfo?.voiceId && !selectedVoiceId) {
    showToast({
      title: `${Strings.getLang('please_complete')}${Strings.getLang('role_voice')}`,
      icon: 'error',
    });
    return;
  }
  if (!selectedModel) {
    showToast({
      title: `${Strings.getLang('please_complete')}${Strings.getLang('model')}`,
      icon: 'error',
    });
    return;
  }

  const params = {
    roleName: name,
    roleIntroduce: introduction,
    roleImgUrl: roleInfo?.roleImgUrl || roleImgUrl,
    useLangCode: roleInfo?.useLangId || selectedLanguageCode,
    useTimbreId: roleInfo?.voiceId || selectedVoiceId,
    useLlmId: selectedModel,
    memoryInfo: memoryInfo,
  }

  try {
    if (roleId) {
      params.roleId = roleId
      await updateRole(params);
    } else {
      await createRole(params);
    }
    hideLoading();
    showToast({
      title: Strings.getLang('save_success'),
      icon: 'success',
    });

    emitter.emit('refreshDialogData', '');
    navigateBack({ delta: 9999 });
  } catch (error) {
    console.log('createRole/updateRole:::', error);
    hideLoading();
    showToast({
      title: Strings.getLang('save_failed'),
      icon: 'error',
    });
  }
};

获取角色头像

功能说明

B 端可以预设一些头像，提供给用户选择。

相关代码段

// 头像
export const getAIAvatars = async () => {
  try {
    // getAgentAvatars
    const response = await getAI2AgentAvatars({
      devId: getDevInfo().devId,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const getBoundAgentsFunc = async () => {
  getAIAvatars()
    .then(res => {
      console.log('getAIAvatars::', res);
      setAvatarList(res);
    })
    .catch(err => {
      console.log('getAIAvatars::err::', err);
    });
};

获取语言语种

功能说明

获取支持的语言语种。

相关代码段

// 获取支持的语言语种
export const getAgentLanguages = async () => {
  try {
    // getAgentLanguageConfig 
    const response = await getAI2AgentConfigLangList({
      devId: getDevInfo().devId,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const useAgentLanguages = (id: number) => {
  const [langRangeList, setSupportLangs] = useState<Array<{ key: string; dataString: string }>>([]);

  useEffect(() => {
    const fetchSupportedLangs = async () => {
      try {
        const response = await getAgentLanguages();
        if (response) {
          setSupportLangs(
            response?.map(item => ({
              dataString: item?.langName,
              key: item?.langCode,
            }))
          );
        }
      } catch (error) {
        console.error('Failed to fetch supported languages:', error);
      }
    };

    fetchSupportedLangs();
  }, []);

  return { langRangeList };
};

import useAgentLanguages from '@/hooks/useAgentLanguages';
const { langRangeList } = useAgentLanguages(id);

获取大模型列表

功能说明

获取大模型列表。

相关代码段

// 获取大模型列表
export const getAgentModels = async () => {
  try {
    // getAgentModelConfig
    const response = await getAI2AgentConfigLlmList({
      devId: getDevInfo().devId,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const fetchSupportedModels = async () => {
  try {
    const response = await getAgentModels();
    console.log('getAgentModels:::', response);
    if (response) {
      const models = response?.map(model => ({
        key: model.llmId,
        dataString: model.llmName,
      }));
      setModelList(models);
    }
  } catch (error) {
    console.error('Failed to fetch supported models:', error);
  }
};

12. 音色管理页面

页面介绍

音色管理页面主要用于切换智能体角色所携带的音色信息，主要包含系统默认音色管理。

音色广场列表展示

功能说明

音色广场列表主要用于展示系统默认音色列表，C 端用户可在广场内挑选适合自己的音色内容赋能给智能体角色。在筛选音色方面，模版支持分类筛选、搜索筛选功能。

相关代码段

// 获取标准音色列表
export const getStandardVoiceList = async (params: any) => {
  try {
    // getMarketList 
    const response = await getAI2TimbreMarketList({
      devId: getDevInfo().devId,
      pageNo: params.pageNo,
      pageSize: params.pageSize,
      tag: '',
      keyWord: params.keyWord,
      lang: params.lang,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

// 音色列表请求函数
const getVoiceListFunc = (params: GetListParams) => {
  return new Promise((resolve, reject) => {
    getStandardVoiceList({
      pageNo: params.current,
      pageSize: params.pageSize,
      tag,
      agentId,
      keyWord: params.searchText,
      lang: selectedLang,
    })
      .then((res: VoiceRes) => {
        const { totalPage, list = [] } = res;
        hideLoading();
        setLoading(false);
        resolve({
          total: totalPage,
          list,
        });
      })
      .catch(error => {
        hideLoading();
        setLoading(false);
        reject(error);
      });
  });
};

 // 音色列表请求管理
const { pagination, data, run } = usePagination(
  ({ current, pageSize, searchText }) =>
    getVoiceListFunc({ current, pageSize, searchText }) as Promise<GetStandardVoice>,
  {
    manual: true,
  }
);

// 响应懒加载
useEffect(() => {
  if (data?.list) {
    pagination.current > 1
      ? dispatch(updateVoiceList([...data?.list]))
      : dispatch(initVoiceList([...data?.list]));
  }
}, [data]);

音色搜索

相关代码段

// 搜索与查询智能体列表接口请求流程相同，区别在于【searchText】字段的不同，拉取整体列表使【searchText】字段为空字符串
const { pagination, data, run } = usePagination(
  ({ current, pageSize, searchText }) =>
    getVoiceListFunc({ current, pageSize, searchText }) as Promise<GetStandardVoice>,
  {
    manual: true,
  }
);

音色切换

相关代码段

// 切换音色（编辑智能体详情）
export const updateRole = async (params: any) => {
  try {
    // postUpdateAgentRole 
    const response = await updateAI2AgentRoles({
      devId: getDevInfo().devId,
      ...params,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const handleItemChecked = async (idKey: string, item: any) => {
  try {
    playVoiceAudio(item?.demoUrl);
    if (squareEntry === 'role') {
      dispatch(
        updateRoleInfo({
          voiceId: idKey,
          voiceName: item?.voiceName,
          supportLangs: item?.supportLangs,
        })
      );

      return;
    }
    showLoading({
      title: '',
    });
    const params = { ...roleInfo, useTimbreId: idKey, roleId };
    if (squareEntry === 'role') {
      delete params.roleId;
    }
    updateRole(params)
      .then(async res => {
        if (res) {
          dispatch(updateRoleInfo({ voiceId: idKey, voiceName: item?.voiceName }));

          setTimeout(async () => {
            const agentCloudInfo = (await getAgentInfo(roleId)) as AgentInfo;
            dispatch(updateAgentInfo({ ...agentCloudInfo, roleId }));
            hideLoading();
          }, 500);
        }
        hideLoading();
      })
      .catch(error => {
        if (platform === 'android' && error?.innerError?.errorCode === '13890100') {
          showToast({
            title: error?.innerError?.errorMsg,
            icon: 'error',
          });
        } else if (platform === 'ios') {
          showToast({
            title: iOSExtractErrorMessage(error?.innerError?.errorMsg),
            icon: 'error',
          });
        } else {
          showToast({
            title: Strings.getLang('dsc_choose_fail'),
            icon: 'error',
          });
        }
        hideLoading();
      });
  } catch (err) {
    console.log('handleItemChecked:::err', err);
    hideLoading();
  }
};

编辑音色

页面说明

该页面用于编辑音色具体内容，音色广场中的音色在此页面支持修改音色的语速等功能。

编辑语调、语速

相关代码段

// 编辑智能体详情（语调、语速为智能体详情信息）
export const updateRole = async (params: any) => {
  try {
    // postUpdateAgentRole 
    const response = await updateAI2AgentRoles({
      devId: getDevInfo().devId,
      ...params,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const onChangeToneOrSpeed = (sv: number, tv: number) => {
  showLoading({
    title: '',
  });
  updateRole({ roleId, [speedKey]: `${sv}`, [toneKey]: `${tv}` })
    .then(async res => {
      sv >= 0 && setSpeedValue(sv);
      tv >= 0 && setToneValue(tv);
      hideLoading();
      showToast({
        title: Strings.getLang('dsc_edit_success'),
        icon: 'success',
      });
    })
    .catch(() => {
      hideLoading();
      showToast({
        title: Strings.getLang('dsc_edit_fail'),
        icon: 'error',
      });
    });
};

恢复默认设置（语调、语速）

相关代码段

// 恢复默认设置（语调、语速）
export const localResetToDefaultVoice = async (params: any) => {
  try {
    // resetToDefaultVoice
    const response = await restoreAI2AgentRolesSpeed({
      devId: getDevInfo().devId,
      ...params,
    });
    return response;
  } catch (err) {
    return Promise.reject(err);
  }
};

const onChangeToneOrSpeedReset = () => {
  showLoading({
    title: '',
  });
  localResetToDefaultVoice({ roleId })
    .then(async res => {
      const sv = res?.speed;
      const tv = res?.tone;
      sv >= 0 && setSpeedValue(sv);
      tv >= 0 && setToneValue(tv);
      hideLoading();
      showToast({
        title: Strings.getLang('dsc_edit_success'),
        icon: 'success',
      });
    })
    .catch(() => {
      hideLoading();
      showToast({
        title: Strings.getLang('dsc_edit_fail'),
        icon: 'error',
      });
    });
};

13. 结束

  • 恭喜你 🎉 完成了本教程的学习！
  • 有任何问题可以提交工单咨询。
Coze——通过模板搭建智能体
03-01 3261
将智能体模板复制到工作空间之后，就可以对智能体进行定制化修改和改造，让智能体更符合你的个人需求与真实场景。复制过来后我们就可以在我们的工作空间中可以看到，然后就可以对它进行编辑。复制模板后，你会拥有一个与模板配置完全一样的智能体，并将其改造为更适合自己的应用。例如修改智能体的人设与编排逻辑、为智能体添加插件、工作流、数据库等配置，并在预览与调试区域通过对话调试效果。在对话页面，体验该智能体功能。将智能体发布到各种渠道中，在终端应用中使用智能体。设置智能体的名称和所在的工作空间，并单击。
0基础打造AI智能体 | Coze实战教学案例2：通过模板搭建智能体
团爸讲算法
06-20 932
模板是扣子平台中公开配置的智能体、工作流、图像流等资源。复制模板后，你会拥有一个与模板配置完全一样的智能体，并将其改造为更适合自己的应用。6、将智能体模板复制到工作空间之后，就可以对智能体进行定制化修改和改造，让智能体更符合你的个人需求与真实场景。例如修改智能体的人设与编排逻辑、为智能体添加插件、工作流、数据库等配置，并在预览与调试区域通过对话调试效果。将智能体发布到各种渠道中，在终端应用中使用智能体。在模板库中找到你感兴趣的智能体模板，点击该模板。5、设置智能体的名称和所在的工作空间，并单击。
Swarm智能体模板库：10个专业领域智能体构建指南 [特殊字符]
gitblog_00947的博客
11-15 906
Swarm框架提供了一个强大的**智能体模板库**，让开发者能够快速构建特定领域的多智能体系统。这个由OpenAI开发的教育性框架专注于轻量级、符合人体工程学的多智能体编排，为各种应用场景提供了丰富的模板资源。 ## 为什么选择Swarm智能体模板？ 🤔 Swarm智能体模板库的核心优势在于其**模块化设计**和**即插即用**的特性。不同于传统的单一智能体系统，Swarm允许你创建多个专门
Cooragent社区生态建设：如何分享和获取优秀的智能体模板
最新发布
gitblog_01069的博客
04-20 363
Cooragent是一个AI智能体协作社区，用户可以通过简单的指令创建特定领域的智能体，并与其他智能体协作完成复杂任务。本文将详细介绍如何在Cooragent社区中分享和获取优秀的智能体模板，帮助新手快速上手智能体开发与应用。 ## 为什么参与智能体模板分享？ 在Cooragent社区中，智能体模板是提升开发效率的关键资源。通过分享和使用模板，你可以： - **节省开发时间**：直接复用成熟
震撼！借助模版或 AI，轻松快速创建自己的智能体，智能体的多种创建方式，扣子免费系列教程（7）
涛涛讲AI
01-19 3785
模板是扣子平台中公开配置的智能体、工作流、图像流等资源。可以复制一份和模板配置完全一样的智能体，然后把复制的智能体改造为更适合自己的应用。操作也非常简单，大家和涛涛老师一起看下吧。扣子提供的扣子助手找不到了，应该是下线了。目前只能找到智能客服助手了。通过上面的操作创建后，下一步就是正常的调试和发布了。赶紧去通过模版或者AI创建一个属于自己的应用吧。同时有些模版是需要付费使用的。没问题就可以发布了。
手把手教你搭建自己的AI智能体（史上最全教程）
m0_59235699的博客
12-15 8万+
智能体简介会在首页以及名片页展示，需要简洁明了的介绍智能体用途。用第三人称的角度去说明你的智能体可以解决哪个问题，比如，输入一个课程题目为你生成课程大纲、说出一个主题为你生成一段脚本等。
AI智能体模板开发流程——详细介绍（二）
IoT砖家
08-11 1060
点击智能体会话卡片右上角的 绑定到设备 按钮后，智能体角色将和设备进行绑定，面板顶部的默认智能体信息展示区域将会自动切换为该智能体角色的对应内容，同时该智能体会话卡片将自动排序为第一个。
AI智能体模板开发流程——详细介绍（一）
IoT砖家
08-11 1022
由于产品定义了面板和设备所拥有的功能点与智能体，所以在开发一个智能设备面板之前，首先需要创建一个 AI 毛绒玩具产品，定义产品有哪些功能点、携带哪些智能体，然后再在面板中一一实现这些功能点。
通用智能体开发解决方案——AI智能体开发教程
IoT砖家
08-07 953
用户通过简单操作即可配置角色的基础信息、交互风格、技术能力，生成专属智能助手，适用于家庭陪伴、儿童教育、智能设备控制等场景。
学业辅导导师：文心一言智能体详细介绍和开发
热门推荐
全网粉丝30w+，2025年CSDN十大博主，2024年华为云十佳博主，稀土掘金人工智能签约作者，985科班硕士— —工作室账号：https://blog.csdn.net/qq_46092061
05-29 9万+
开发方向：学习成长类AI技术在学习成长方向的应用正日益增多，本期赛题需围绕该方向开发智能体包括但不限于:作文辅导助手、个性化学习助手、考试助手、各垂类教育内容专家等。
【AI智能体】Skills 智能体驱动开发从使用到项目实战详解
congge
04-01 5767
Skills 智能体驱动开发从使用到项目实战详解
Dify工具插件开发和智能体开发全流程
朱雀随云记的博客
06-06 1947
随着企业数字化转型深入，“低代码 + AI” 的融合需求日益显现。Dify 正是这一趋势下的佼佼者：它既开放 LLM API，又提供智能体、知识库、工具插件三位一体的 AI 应用闭环。谁先掌握 Dify，谁就拥有了下一代“AI中台”的话语权。
AI智能体模板开发流程——详细介绍（三）
IoT砖家
08-12 351
角色会话记录展示页主要用于展示 C 端用户与智能体角色的对话记录，当 C 端用户暂未与智能体产生对话内容时，模版将会展示空内容提示图文。用户点击智能体会话记录的顶部的卡片后，便可跳转至角色编辑页面。
AI智能体平台的开发流程
zhaoyin0335的博客
04-29 1116
整个开发流程强调迭代、反馈和持续改进。特别是AI/ML相关的部分，可能需要多次实验和模型训练才能达到预期效果。DevOps实践在AI智能体平台的开发和运营中扮演着重要角色，有助于实现快速迭代、稳定部署和高效运维。搭建AI智能体平台的开发流程通常遵循标准的软件开发生命周期模型（如敏捷开发、DevOps），并结合AI/ML项目特有的迭代和实验性质。以下是一个典型的开发流程分解。
【AI-agent】LangChain开发智能体工具流程
黄小黄的博客
11-08 1248
开发一个智能体，本质上就是让AI具备"思考-行动-反馈"的循环能力。调用大模型进行推理（包含合适的提示词模板）使用各种工具（比如搜索、计算、文件操作等）根据结果做出决策，然后继续执行下一步操作下面，我们将从“查询城市天气”的例子出发，看下如何使用LangChain开发一个简单的智能体在第二章，我们了解了大模型实例，以及如何设计提示词，仅仅只实现了与大模型"对话"，如果想让大模型帮助我们解决问题，还有至关重要的一步：将自定义工具与大模型绑定，让大模型了解工具的使用。开发工具方法。
AI智能体的开发流程
qq_48256438的博客
10-10 902
开发AI智能体的关键步骤包括：1）明确任务目标与能力边界；2）选择合适的LLM核心引擎和开发框架；3）构建推理规划、记忆知识库和工具调用三大核心模块；4）进行严格的功能测试与安全审计；5）部署后持续监控性能和优化Prompt。整个流程强调从具体任务出发，通过模块化设计和迭代优化，构建具备稳定执行能力的智能体系统。
人工智能智能体(AI Agent)发展趋势2024年总结与2025年展望
m0_59235699的博客
01-06 3351
人工智能（AI）的快速发展引发了各行业的变革性转变。在 AI 的众多进步中，智能体作为创新的基石脱颖而出，重塑了行业格局，提升了用户体验，并将自动化推向了新的高度。这些自主运行的虚拟机已经在客户服务、医疗保健、金融甚至娱乐等领域占据了一席之地。那么，人工智能智能体的未来会是怎样的呢？在本文中，我们将探讨 2025 年及未来几年人工智能智能体的趋势和预测。什么是人工智能智能体？2024 年人工智能智能体趋势2025 年人工智能智能体趋势：展望未来人工智能智能体采用率的增长主动式人工智能智能体。
【大模型】DeepSeek + Coze 打造个人专属AI智能体使用详解
congge
04-16 1万+
DeepSeek + Coze 打造个人专属AI智能体使用详解
Python开发AI智能体(一)———国内大模型调用
本人的博客
05-08 2583
从这篇文章开始我将手把手教大家从0开始搭建属于自己的智能体，包括聊天机器人、RAG对话应用以即数据库智能体
【新书推荐】《AI Agent智能体开发实践》
夏天又到了的专栏
11-28 1765
本书系统介绍AI智能体（Agent）技术原理、开发方法和实践案例。本书从基础概念出发，逐步深入智能体的核心技术、开发框架、开发流程、开发方法和行业应用，帮助读者系统掌握构建高效、智能的AI Agent的关键技能。本书配套示例代码、PPT课件、读者微信技术交流群，示例代码经过测试均可运行无误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值