React组件 vs AI组件思维是通的先看一下平时写的React组件是什么样的// React组件接收输入处理状态返回UIfunction SearchComponent(props) {const [query, setQuery] useState();const [results, setResults] useState([]);async function handleSearch() { const res await fetch(/api/search?q${query}); setResults(await res.json()); }return ( div input onChange{e setQuery(e.target.value)} / button onClick{handleSearch}搜索/button ul{results.map(r li{r.title}/li)}/ul /div );}再看一个AI Agent组件// AI组件接收提示处理上下文返回响应import { ChatOpenAI } from langchain/openai;import { HumanMessage } from langchain/core/messages;async function createAIAgent() {const model new ChatOpenAI({ model: gpt-4o-mini, openAIApiKey: process.env.OPENAI_API_KEY, });const response await model.invoke([ new HumanMessage(解释一下React的useEffect) ]);return response.content;}看出来了吗结构一模一样React组件AI组件对应关系propsprompt输入statememory状态/记忆setState工具调用改变状态的方式UI渲染文本生成输出理解了这个映射LangChain.js用起来就和写React组件一样自然。第一个AI组件让模型说句话先跑通最简单的调用建立直觉mkdir ai-component-demo cd ai-component-demonpm init -ynpm install langchain langchain/openai typescript tsx types/node创建tsconfig.json{ compilerOptions: { target: ES2020, module: commonjs, lib: [ES2020], outDir: ./dist, rootDir: ./src, strict: true, esModuleInterop: true, skipLibCheck: true, forceConsistentCasingInFileNames: true, resolveJsonModule: true},include: [src/**/*],exclude: [node_modules]}写第一个AI组件src/ai-component.tsimport { ChatOpenAI } from langchain/openai;import { HumanMessage, SystemMessage } from langchain/core/messages;// 像创建React组件一样创建AI组件export async function AIAgentComponent(props: { systemPrompt: string; userMessage: string;}) {// 1. 初始化渲染器ChatModelconst model new ChatOpenAI({ model: gpt-4o-mini, openAIApiKey: process.env.OPENAI_API_KEY, temperature: 0.7, // 控制创造力像CSS控制样式 });// 2. 构造虚拟DOMMessagesconst messages [ new SystemMessage(props.systemPrompt), new HumanMessage(props.userMessage), ];// 3. 渲染得到输出const response await model.invoke(messages);// 4. 返回UI文本内容return response.content;}// 使用像渲染React组件一样async function main() {const result await AIAgentComponent({ systemPrompt: 你是一个前端技术专家回答简洁明了。, userMessage: 用一句话解释React的useEffect, });console.log(result);}main();运行OPENAI_API_KEYsk-xxxx npx tsx src/ai-component.ts# 输出useEffect 让你在组件渲染完成后执行副作用比如获取数据、订阅事件。流程如下和React组件渲染流程对比React组件渲染 vs AI组件渲染加个状态让组件记住上下文React组件用useState记状态AI组件用ChatMessageHistory记对话历史import { ChatOpenAI } from langchain/openai;import { HumanMessage, SystemMessage, AIMessage } from langchain/core/messages;// 状态管理记住对话历史const conversationHistory: (SystemMessage | HumanMessage | AIMessage)[] [new SystemMessage(你是一个前端技术专家。),];export async function AIAgentWithMemory(userInput: string) {const model new ChatOpenAI({ model: gpt-4o-mini, openAIApiKey: process.env.OPENAI_API_KEY, });// 把用户输入加到历史里像setState一样 conversationHistory.push(new HumanMessage(userInput));// 渲染模型推理const response await model.invoke(conversationHistory);// 把AI回答也加到历史里更新状态 conversationHistory.push(response);return response.content;}// 测试多轮对话async function main() {console.log(await AIAgentWithMemory(React是什么));console.log(await AIAgentWithMemory(它和Vue有什么区别)); // 第二问能理解它指的是React}关键点AI组件的状态就是对话历史。每次调用都把完整历史传给模型模型才能理解上下文。流式输出像React的Suspense一样实际产品里用户不想等5秒看完整答案。流式输出——一个字一个字往外蹦——体验好得多。这就像React的Suspense 流式SSR用户能越早看到内容越好。import { ChatOpenAI } from langchain/openai;import { HumanMessage } from langchain/core/messages;const model new ChatOpenAI({model: gpt-4o-mini,openAIApiKey: process.env.OPENAI_API_KEY,streaming: true, // 启用流式});// 流式渲染const stream await model.stream([new HumanMessage(详细解释React的useEffect),]);// 像读取ReadableStream一样for await (const chunk of stream) { process.stdout.write(chunk.content); // 逐字打印}非流式 vs 流式集成到React组件这才是前端该干的上面的代码是纯TypeScript实际项目中要集成到React组件里// components/AIChat.tsximport { useState } from react;import { ChatOpenAI } from langchain/openai;import { HumanMessage } from langchain/core/messages;export function AIChat() {const [input, setInput] useState();const [response, setResponse] useState();const [isLoading, setIsLoading] useState(false);const [error, setError] useStatestring | null(null);const abortControllerRef useRefAbortController | null(null);const handleSubmit async () { setIsLoading(true); setResponse(); setError(null); try { const model new ChatOpenAI({ model: gpt-4o-mini, openAIApiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY, streaming: true, }); const stream await model.stream([new HumanMessage(input)]); for await (const chunk of stream) { setResponse(prev prev chunk.content); } } catch (err) { setError(err instanceof Error ? err.message : 出错了); } finally { setIsLoading(false); } };// 取消请求const handleCancel () { abortControllerRef.current?.abort(); setIsLoading(false); };return ( div input value{input} onChange{e setInput(e.target.value)} / button onClick{handleSubmit} disabled{isLoading} {isLoading ? 思考中... : 发送} /button {isLoading button onClick{handleCancel}取消/button} {error div classNameerror{error}/div} div{response}/div /div );}这才是前端开发者熟悉的节奏组件 状态 错误处理 取消请求和写普通React组件没区别。第一天小结今天讲了一件事React组件和AI组件思维是通的。概念React组件AI组件输入propsprompt状态useStatemessage history输出UI文本/工具调用更新方式setState追加message流式渲染Suspense SSRmodel.stream()错误处理try/catchtry/catch取消操作AbortControllerAbortController明天聊怎么让AI组件动手定义Tool工具让Agent能查天气、搜文档、调API。这就像给React组件加onClick处理函数只是现在调用者是AI模型。传统产品经理正在成为下个被淘汰的“传统岗位”。过去画原型、写 PRD、跟进度的“传统技能包”在AI时代正迅速贬值。63% 的企业转型做 AI 产品当下的问题不再是“要不要学 AI ”而是“如何构建 AI 产品”。前段时间还跟字节、腾讯的资深 AI 产品经理沟通他们反馈在大量招人只要有 AI 相关的项目经验基本都能拿到面试机会而且领导很舍得给钱涨薪 40-60% 很正常01接下来的产品人得卷AI能力了如今AI大火行业极速发展的背后懂AI 产品人才却严重稀缺。这不是要你转技术岗而是要掌握构建 AI 产品的核心方法如何将你的领域知识转化为 AI 产品的核心竞争力如何用 AI 技术实现你的产品需求如何设计真正懂用户的 AI 交互体验……懂AI就是产品经理的“救命稻草”风口之下与其焦虑被行业淘汰不如先人一步享受AI技术带来的红利我把AI产品经理的学习全流程已经整理好了抓住AI时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】不限年龄不限岗位没有代码基础也能学现在扫码完课还送《AI产品面试题库》《AI大模型应用案例集》02掌握技术实战快速转型想成为一名卓越的AI大模型产品经理需要从技术、到项目实战的全方位转型指南**1**AI产品应用原理解析产品经理也能听懂对于产品经理来说如果你不懂技术做不了业务和AI大模型技术衔接、定义不了数据需求是没法完整的落地一个产品的本次课程专门面向产品经理人群解析当下最热门的AI产品应用的必备的「大模型」、「多模态」的实际应用和算法原理解析AI产品应用技术积累大模型能力简单易懂不需要会代码小白也能掌握大模型微调掌握主流大模型如DeepSeek、Qwen等的微调技术针对特定场景优化模型性能。学习如何利用领域数据如制造、医药、金融等进行模型定制AI Agent智能体搭建学习如何设计和开发AI Agent实现多任务协同、自主决策和复杂问题解决。构建垂类场景下的智能助手产品如制造业中的设备故障诊断Agent、金融领域的投资分析Agent等2超全行业案例解析课程详细讲解现阶段大模型在各个行业和领域的应用现状包括零售与电商、教育、医疗、泛娱乐、法律等等10大行业详细讲解案例的思路、应用场景以及背后的技术原理、核心技术揭秘各个行业、场景的真实现状和未来产品的发展与机遇可以说讲解完一个案例就能积累一个AI产品实践的经验课程中所涉及到的实战项目都可以直接在自己的工作中使用让自己的产品/项目有可借鉴的成功案例3AI产品经理求职专项辅导课程中会系统的帮助大家拆解字节、腾讯、百度等大厂AI PM岗位JD关键词掌握AI PM高频面试题型与回答框架展示 AI 相关能力的关键技巧Prompt设计、模型评估、A/B测试、成本意识、与算法/工程协作经验To B类AI产品经理突出“行业理解 技术落地 商业闭环”能力的简历结构设计展示项目成果从客户需求洞察到技术方案设计展现端到产品思维如何评估To B AI产品的可行性、客户付费意愿与实施成本To C类AI产品经理拆解头部公司岗位JD将过往尽力转化为AI产品叙事逻辑从行业趋势、产品设计题、案例分析数据分析题、技术理解边界等全流程辅导面试避免无效海投、锁定最适合的AI产品岗位03本次课程全程直播讲解能直接对话大佬和专业助教不懂就问超详细的案例小白也能轻松get完课后还赠送《AI产品经理面试题库》、《AI大模型应用案例集》不断更新中……适合人群想转型AI产品经理、AI项目管理专家、AI产品解决方案等岗位想进行AI产品创业的创业者想成为制作AI产品的程序员想利用AI解决企业问题的管理岗想在AI方向寻找就业方向的毕业生AI方向前景广阔、待遇好目前很多产品人已经通过完整学习拿到大厂高薪offer收入嗷嗷涨我把AI产品经理的学习全流程已经整理好了抓住AI时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】