下面这段话是来自 ChatGPT 对 AIGC 的定义：
AIGC（人工智能生成内容）指的是利用人工智能技术生成文本、图像、音频和视频等类型的内容。它通过机器学习模型，特别是深度学习模型，分析大量数据，学习语言或视觉模式，从而生成新的原创的内容。
开放式AI组件解决方案又是什么呢：
具备传统前端组件库全部能力，同时能够支持在AIGC场景下特有的基础LLM能力、流式显示等特性，并通过标准协议、全生命周期管理、开放性配置和自定义模块插拔等高度灵活的可扩展能力，实现在前端组件层多场景、多技术栈、多端的快速接入和交付。
2022年11月30日，OpenAI 团队发布全新ChatGPT模型，通过简洁的聊天交互界面，实现涵盖诸多领域的内容输出，帮助用户回答问题、撰写文本、翻译语言、编写代码等多种任务。
ChatGPT 的发布，给 AI 行业带来重大变革，发布之后搜索热度持续上升。
能力的跃升，带来了新产品新模式的发现机遇，在前台我们有基于大模型能力为用户提供的导购助手、智能推荐、智能客服等 AI 能力提升用户体验与转化，在后台我们有各类智能办公机器人、场景化 AI Agent 服务等 AI 工具提升效率。未来的新兴场景更是层出不穷，那么作为一线业务研发，我们要做些什么才能够承接随着技术革新而带来的业务需求激增呢？
根据过往研发经验，快速交付大量同类型应用的场景，要有分层抽象的、类型丰富的组件沉淀，以支持多系统、多场景复用，同时结合 LowCode/NoCode 平台，通过搭建的方式快速产出应用。
同时，我们调研了业界已经初具规模的6类 AIGC 组件库，分析了各类组件库的共性和差异，也梳理了京东内部平台能力，在京东零售前端通道的支持下，启动了基于内源共建的开放式跨端 AI 组件解决方案项目。项目命名为：AIGCDesign。
在接下来的章节，将为您详细介绍该解决方案的设计开发理念，以及对未来的建设思考。
在项目开启之初，调研了行业内开源的高 Star 组件和应用，分别从可拓展性、组件覆盖度、端支持、框架支持等多方面进行了评测，具体如下表：
对于以上内容对比分析，我们提取了一些关键能力项：
轻量、快速开发、开箱即用
TailWind、React、Vue、Native
会话组件、多模态录入
响应式
根据核心目标，确认技术选型、技术架构和技术实现细节。
3.1 整体技术架构
组件库借助 Taro 的跨端能力，输出MP、H5的组件，通过 Web 端的响应式方案，同时支持 H5 和 PC 端的内容输出，也支持单 React 应用。
内部集成AI接口请求能力（京东言犀），开发者只需引用容器组件，进行简单的配置，即可「开箱即用」的输出AI应用，若当前组件的功能不能满足部分业务形态，组件库也提供了大量自定义接口，开发者可进行高定制化开发，灵活对接私域大模型服务。
核心层：提供AI平台对接相关功能，包括各类基础模块和API，在容器中或组件中引用，也可在项目中独立使用。 容器层：支持多端多框架的应用容器，内部对接大模型平台，提供基础AI会话交互，开放会话区域的高度自定义能力。 组件层：集合基础组件、业务组件和自定义组件，以供容器层渲染使用，通过组件映射的方式在容器组件中渲染。
核心实现就拆分成了如下 3 部分：
1）原生基础组件：包含弹层、语音交互、Toast 提示、自定义头部、底部输入框、工具箱等等组件；
2）原生容器组件：负责整体事件、UI、接口请求等等配置，是 AIGC 组件的核心模块；
3.2 应用生命周期
容器组件提供全流程生命周期事件，调用方可随时获取应用最新上下文和数据 默认提供京东言犀平台对接模块，使用基础配置即可解锁完整的AI会话交互基础流程 通过容器组件属性配置，灵活添加自定义流程控制：模型检索、会话渲染、生命周期等
beforeLaunch：容器组件加载前执行 onLaunch：容器组件加载完成后执行 onSubmit：用户点击发送按钮后，请求大模型前执行 onLLMResult：大模型数据返回后执行，用于在组件外部获取返回数据 onChatUpdate：组件更新完成后执行，代表本次会话更新完成
3.3 用户交互和数据流转流程
3.4 最小化配置和自定义配置方案
调用方引入容器组件，配置言犀平台 apiKey 和大模型平台路径，即可输出聊天记录界面：
import AiContainer from "@aigcui/container";...<AiContainer// 言犀平台apiKeyapiKey='xxx'// 大模型接口的路径aiPath='/ChatRhino/api/v1/chat/completions'/>...
结合生命周期事件和相关属性配置，可自定义以下功能：
大模型请求：调用方可自行进行大模型接口请求，并将会话数据注入容器，容器根据注入的数据进行会话区域渲染
会话区域渲染：会话区域可完全交由调用方自定义渲染
会话输入区域扩展图标：会话输入区域扩展图标支持自定义配置，支持展开收起功能
快捷操作区域：输入框上方支持快捷操作区域的自定义渲染
会话卡片头尾区域：会话卡片头部和底部支持自定义渲染
3.5 Web平台多框架支持方案
为实现多开发框架的支持，除了借助 Taro 跨端解决方案外，组件库还提供了 UMD 产物，可通过加载 JS 文件的方式，将组件渲染至指定 DOM 节点，同时结合 AutoBots 平台能力，进行AI应用输出。
UMD 组件基于 React 开发框架开发，若项目内已经全局挂载 React 环境，可引用纯组件代码包使用，若全局无 React 环境，则可引用组件库全包进行渲染，全包集成 React 框架代码，内部处理 React 应用和组件初始化流程，接入方可直接在项目内引用组件渲染方法输出应用。
<!-- 加载组件库 UMD 文件 --><script src="https://storage.jd.com/taro/aigc-ui/1.0.6/aigcjdfe-autobots-full.umd.js"></script><!-- 调用render方法渲染对应组件，输出至 ID 为 app 的元素内 -->window['autobots-full'].renderAiChatBubble({width: 500,height: 500,chatInfo: {agentId: 'xxx',token: 'xxxxxx',}}, 'app')
基于以上共建形式，目前已有多端案例接入：
接入典型案例 | 端 | 接入能力 |
到店小程序 AI 导购助手 | MP | 几乎全部复用了 AIGC Taro 版本的能力，只进行了简单的业务定制化文案和功能配置，数据源通过配置业务接口实现。 |
供应链业务 AI 助手 | PC | 在 AIGC 能力基础上，进行了主题的修改和配置，以及替换头部自定义组件。 |
家居家电 AI 助手 | APP | 进行了主题的修改和配置，中间消息布局进行了配置调整，消息渲染扩展了基于流式楼层数据的渲染。 |
AutoBots应用输出 | PC/M |
1、根据架构设计，持续完善核心能力
平台能力建设：支持高度灵活的配置化能力，提供便捷的组件产出和搭建能力。
多端多框架能力建设：提供 NPM/UMD 等多种形式产物，输出多端容器和组件，实现技术栈无关的接入能力。
底层能力扩充：逐步融合 OCR、ASR/TTS、Agent、知识库等多种底层能力。
2、2B端/2C端多业务形态支持，多场景交互形式拓展
场景化能力扩展：支持 B/C 端通用的场景化AI交互能力和组件，极低成本快速接入。
通用能力支持：结合 AI 能力，拓展非对话框场景交互能力。提供高度可配置化交互组件，支持数据源配置和交互定制化，配合投放平台，满足营销、办公等各类场景。
相信在京东零售前端通道内源共建小组的努力、内外部贡献者的协同建设以及京东丰富业务场景的加持下，AIGCDesign 一定能够交付更多优秀的能力和组件，为研发提效和业务赋能带来更大、更多的价值。
推荐阅读
