LangChain、LangGraph等前端AI库深度解析

// 很多时候，你只需要这样：
const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message: userInput }),
})

// 就够了！

import { ChatOpenAI } from '@langchain/openai'

// 不用LangChain的写法
const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        model: 'gpt-4',
        messages: [{ role: 'user', content: 'Hello' }],
    }),
})

// 用LangChain的写法
const llm = new ChatOpenAI({
    modelName: 'gpt-4',
    temperature: 0.7,
})

const response = await llm.invoke('Hello')

// 换成Claude
const llm = new ChatAnthropic({ model: 'claude-3-opus' })

// 换成本地模型
const llm = new ChatOllama({ model: 'llama2' })

// 其他代码不用改！

import { ChatPromptTemplate } from '@langchain/core/prompts'

// 不用LangChain：手动拼接字符串
const prompt = `你是一个${role}。
用户背景：${userContext}
请回答：${question}`

// 用LangChain：模板化管理
const promptTemplate = ChatPromptTemplate.fromMessages([
    ['system', '你是一个{role}。'],
    ['human', '用户背景：{userContext}'],
    ['human', '请回答：{question}'],
])

const prompt = await promptTemplate.format({
    role: '专业的代码审查专家',
    userContext: '3年前端经验',
    question: '这段代码有什么问题？',
})

import { RunnableSequence } from '@langchain/core/runnables'

// 场景：用户上传简历，要做3件事：
// 1. 提取关键信息
// 2. 生成职位匹配度分析
// 3. 给出改进建议

// 不用LangChain：手动串联
async function analyzeResume(resume: string) {
    // 第1步
    const extracted = await openai.chat.completions.create({
        messages: [
            {
                role: 'user',
                content: `提取简历关键信息：${resume}`,
            },
        ],
    })

    // 第2步
    const analysis = await openai.chat.completions.create({
        messages: [
            {
                role: 'user',
                content: `分析匹配度：${extracted.choices[0].message.content}`,
            },
        ],
    })

    // 第3步
    const suggestions = await openai.chat.completions.create({
        messages: [
            {
                role: 'user',
                content: `给出建议：${analysis.choices[0].message.content}`,
            },
        ],
    })

    return suggestions
}

// 用LangChain：声明式定义流程
const extractChain = promptTemplate1.pipe(llm)
const analysisChain = promptTemplate2.pipe(llm)
const suggestionChain = promptTemplate3.pipe(llm)

const fullChain = RunnableSequence.from([
    extractChain,
    analysisChain,
    suggestionChain,
])

// 一行调用
const result = await fullChain.invoke({ resume })

import { PDFLoader } from 'langchain/document_loaders/fs/pdf'
import { CSVLoader } from 'langchain/document_loaders/fs/csv'
import { WebBaseLoader } from 'langchain/document_loaders/web/cheerio'

// 加载PDF
const loader = new PDFLoader('resume.pdf')
const docs = await loader.load()

// 加载网页
const webLoader = new WebBaseLoader('https://example.com')
const webDocs = await webLoader.load()

// docs是统一的格式，都有pageContent和metadata
docs.forEach((doc) => {
    console.log(doc.pageContent) // 文本内容
    console.log(doc.metadata) // 元数据（来源、页码等）
})

import { OpenAIEmbeddings } from '@langchain/openai'
import { MemoryVectorStore } from 'langchain/vectorstores/memory'

// 1. 把文档切片
const docs = await loader.load()
const splitter = new RecursiveCharacterTextSplitter({
    chunkSize: 1000,
    chunkOverlap: 200,
})
const splits = await splitter.splitDocuments(docs)

// 2. 向量化并存储
const embeddings = new OpenAIEmbeddings()
const vectorStore = await MemoryVectorStore.fromDocuments(splits, embeddings)

// 3. 搜索相关文档
const results = await vectorStore.similaritySearch(
    '用户的问题',
    3 // 返回最相关的3个片段
)

// 4. 把结果塞进Prompt
const context = results.map((r) => r.pageContent).join('\n\n')
const answer = await llm.invoke(`
  参考以下内容回答问题：
  ${context}

  问题：${question}
`)

import { AgentExecutor, createOpenAIFunctionsAgent } from 'langchain/agents'
import { Calculator } from 'langchain/tools/calculator'
import { WebBrowser } from 'langchain/tools/webbrowser'

// 定义AI可以使用的工具
const tools = [
    new Calculator(),
    new WebBrowser(),
    // 自定义工具
    {
        name: 'get_weather',
        description: '获取指定城市的天气',
        func: async (city: string) => {
            const weather = await fetch(`https://api.weather.com/${city}`)
            return weather.json()
        },
    },
]

// 创建Agent
const agent = await createOpenAIFunctionsAgent({
    llm,
    tools,
    prompt: '你是一个助手，可以使用工具帮助用户。',
})

const executor = new AgentExecutor({
    agent,
    tools,
})

// 用户问："北京明天天气怎么样，如果下雨的概率超过50%，帮我计算一下打车费用（15公里）"
const result = await executor.invoke({
    input: '北京明天天气怎么样，如果下雨的概率超过50%，帮我计算一下打车费用（15公里）',
})

// Agent会自动：
// 1. 先调用get_weather工具获取天气
// 2. 判断降雨概率
// 3. 如果>50%，调用Calculator计算15*单价
// 4. 返回完整答案

步骤1 → 步骤2 → 步骤3 → 结束

开始 → 判断 → 如果A → 步骤1 → 步骤2
             ↓
             如果B → 步骤3 → 返回判断 → 继续

import { StateGraph } from '@langchain/langgraph'

// 定义状态
interface State {
    userInput: string
    category?: string
    needMoreInfo?: boolean
    response?: string
}

// 定义节点（每个节点是一个处理函数）
const graph = new StateGraph<State>({
    channels: {
        userInput: null,
        category: null,
        needMoreInfo: null,
        response: null,
    },
})

// 节点1：分类用户意图
graph.addNode('categorize', async (state) => {
    const category = await llm.invoke(`分类用户意图：${state.userInput}`)
    return { category }
})

// 节点2：检查是否需要更多信息
graph.addNode('check', async (state) => {
    const needMore = state.category === '复杂问题'
    return { needMoreInfo: needMore }
})

// 节点3：简单回答
graph.addNode('simple_answer', async (state) => {
    const response = await llm.invoke(`回答：${state.userInput}`)
    return { response }
})

// 节点4：复杂处理
graph.addNode('complex_process', async (state) => {
    // 多步处理...
    return { response: '复杂答案' }
})

// 定义边（节点之间的连接）
graph.addEdge('categorize', 'check')
graph.addConditionalEdges(
    'check',
    (state) => (state.needMoreInfo ? 'complex' : 'simple'),
    {
        simple: 'simple_answer',
        complex: 'complex_process',
    }
)

// 设置入口和出口
graph.setEntryPoint('categorize')
graph.addEdge('simple_answer', '__end__')
graph.addEdge('complex_process', '__end__')

// 编译并运行
const app = graph.compile()
const result = await app.invoke({ userInput: '用户问题' })

// 场景：智能客服
// 流程：
// 1. 理解用户问题
// 2. 查询知识库
// 3. 如果找到答案 → 直接回复
//    如果没找到 → 转人工
//    如果答案不确定 → 追问用户

const customerServiceGraph = new StateGraph({...});

// 节点：理解问题
graph.addNode("understand", async (state) => {
  const intent = await llm.invoke(`理解意图：${state.message}`);
  return { intent };
});

// 节点：搜索知识库
graph.addNode("search_kb", async (state) => {
  const results = await vectorStore.search(state.intent);
  return {
    kbResults: results,
    confidence: results[0]?.score || 0,
  };
});

// 节点：直接回答
graph.addNode("direct_answer", async (state) => {
  const answer = await llm.invoke(`基于${state.kbResults}回答`);
  return { response: answer };
});

// 节点：追问用户
graph.addNode("ask_more", async (state) => {
  return { response: "您能详细说明一下吗？" };
});

// 节点：转人工
graph.addNode("to_human", async (state) => {
  await notifyHumanAgent(state);
  return { response: "正在为您转接人工客服..." };
});

// 条件分支
graph.addConditionalEdges(
  "search_kb",
  (state) => {
    if (state.confidence > 0.8) return "direct";
    if (state.confidence > 0.5) return "ask";
    return "human";
  },
  {
    direct: "direct_answer",
    ask: "ask_more",
    human: "to_human",
  }
);

import { useChat } from 'ai/react';

function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => <div key={m.id}>{m.content}</div>)}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

import { VectorStoreIndex, SimpleDirectoryReader } from 'llamaindex'

// 加载文档并建立索引
const documents = await new SimpleDirectoryReader().loadData('./docs')
const index = await VectorStoreIndex.fromDocuments(documents)

// 查询
const queryEngine = index.asQueryEngine()
const response = await queryEngine.query('用户问题')

import { ChatCompletion, UserMessage } from 'ai-jsx/core/completion';

function MyAI() {
  return (
    <ChatCompletion>
      <UserMessage>写一首诗</UserMessage>
    </ChatCompletion>
  );
}

// 前端
import { useChat } from 'ai/react'

// 后端API (Next.js)
import { OpenAIStream, StreamingTextResponse } from 'ai'

export async function POST(req: Request) {
    const { messages } = await req.json()
    const response = await openai.chat.completions.create({
        model: 'gpt-4',
        messages,
        stream: true,
    })
    const stream = OpenAIStream(response)
    return new StreamingTextResponse(stream)
}

// 用LangChain实现RAG
import { RetrievalQAChain } from 'langchain/chains'
import { OpenAIEmbeddings } from '@langchain/openai'
import { MemoryVectorStore } from 'langchain/vectorstores/memory'

// 1. 加载并向量化文档
const docs = await loader.load()
const vectorStore = await MemoryVectorStore.fromDocuments(
    docs,
    new OpenAIEmbeddings()
)

// 2. 创建QA链
const chain = RetrievalQAChain.fromLLM(llm, vectorStore.asRetriever())

// 3. 查询
const answer = await chain.call({ query: '用户问题' })

import { RunnableSequence } from '@langchain/core/runnables'

const chain = RunnableSequence.from([
    extractionChain, // 提取信息
    analysisChain, // 分析匹配度
    suggestionChain, // 生成建议
])

const result = await chain.invoke({ resume })

// 需要条件分支、循环、状态管理
const graph = new StateGraph({...});
graph.addNode("understand", ...);
graph.addNode("search", ...);
graph.addConditionalEdges(...);

const agent = await createOpenAIFunctionsAgent({
    llm,
    tools: [weatherTool, calculatorTool, databaseTool],
})

// AI会自己决定调用哪个工具
const result = await executor.invoke({ input: userMessage })

// 前端
async function chat(message: string) {
    const response = await fetch('/api/chat', {
        method: 'POST',
        body: JSON.stringify({ message }),
    })

    const reader = response.body.getReader()
    // 处理流式响应...
}

// 后端 (Next.js API)
export async function POST(req: Request) {
    const { message } = await req.json()

    const stream = await openai.chat.completions.create({
        model: 'gpt-4',
        messages: [{ role: 'user', content: message }],
        stream: true,
    })

    return new Response(stream)
}

直接调API → 理解基本原理 → 自己实现流式响应

体验框架的便利性 → 对比手写代码 → 理解抽象层

加载文档 → 向量化 → 检索 → 回答

多步Chain → 条件分支 → Agent

// ❌ 不要为了用库而用库
import { LLMChain } from 'langchain/chains'

const chain = new LLMChain({ llm, prompt })
const result = await chain.call({ input: message })

// ✅ 这种简单场景直接调用就行
const result = await llm.invoke(message)

// 你至少要知道这个Chain内部做了什么
const chain = RetrievalQAChain.fromLLM(llm, retriever)

// 实际上是：
// 1. 用retriever搜索相关文档
// 2. 把文档塞进Prompt
// 3. 调用LLM生成答案
// 如果不知道这个流程，出bug很难调试

# LangChain更新很快，文档和实际版本可能不一致
# 固定版本号，不要用^或~
npm install langchain@0.1.30 --save-exact

// ❌ 导入整个库
import { OpenAI } from 'langchain'

// ✅ 按需导入
import { ChatOpenAI } from '@langchain/openai'

// 优点：完全可控，轻量
// 缺点：要自己实现所有功能

// 1. 文档处理
async function processDocument(file: File) {
    const text = await extractText(file) // 自己写PDF解析
    const chunks = splitText(text, 1000) // 自己写分块逻辑

    // 2. 向量化
    const embeddings = await Promise.all(
        chunks.map((chunk) => openai.embeddings.create({ input: chunk }))
    )

    // 3. 存储（自己管理数组）
    documents.push(
        ...chunks.map((chunk, i) => ({
            text: chunk,
            embedding: embeddings[i].data[0].embedding,
        }))
    )
}

// 4. 查询
async function query(question: string) {
    // 向量化问题
    const qEmbed = await openai.embeddings.create({ input: question })

    // 计算相似度（自己写余弦相似度）
    const scores = documents.map((doc) =>
        cosineSimilarity(qEmbed.data[0].embedding, doc.embedding)
    )

    // 取top-k
    const topDocs = documents
        .map((doc, i) => ({ doc, score: scores[i] }))
        .sort((a, b) => b.score - a.score)
        .slice(0, 3)

    // 生成答案
    const context = topDocs.map((d) => d.doc.text).join('\n')
    const answer = await openai.chat.completions.create({
        messages: [
            {
                role: 'user',
                content: `参考：${context}\n\n问题：${question}`,
            },
        ],
    })

    return answer
}

// 后端 (Next.js API)
import { RetrievalQAChain } from "langchain/chains";
import { OpenAIEmbeddings } from "@langchain/openai";
import { PDFLoader } from "langchain/document_loaders/fs/pdf";
import { MemoryVectorStore } from "langchain/vectorstores/memory";
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";

// 初始化（启动时运行一次）
const loader = new PDFLoader("docs/company-handbook.pdf");
const docs = await loader.load();

const splitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
  chunkOverlap: 200,
});
const splits = await splitter.splitDocuments(docs);

const vectorStore = await MemoryVectorStore.fromDocuments(
  splits,
  new OpenAIEmbeddings()
);

const chain = RetrievalQAChain.fromLLM(
  new ChatOpenAI({ modelName: "gpt-4" }),
  vectorStore.asRetriever(3), // top-3
  { returnSourceDocuments: true } // 返回来源
);

// API路由
export async function POST(req: Request) {
  const { question } = await req.json();

  const result = await chain.call({ query: question });

  return Response.json({
    answer: result.text,
    sources: result.sourceDocuments.map(doc => ({
      content: doc.pageContent,
      metadata: doc.metadata,
    })),
  });
}

// 前端
import { useState } from 'react';

function KnowledgeBase() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const [sources, setSources] = useState([]);

  async function ask() {
    const response = await fetch('/api/knowledge-base', {
      method: 'POST',
      body: JSON.stringify({ question }),
    });

    const data = await response.json();
    setAnswer(data.answer);
    setSources(data.sources);
  }

  return (
    <div>
      <input value={question} onChange={e => setQuestion(e.target.value)} />
      <button onClick={ask}>提问</button>

      <div>{answer}</div>

      <div>
        <h4>参考来源：</h4>
        {sources.map((src, i) => (
          <div key={i}>
            <p>{src.content}</p>
            <small>来源：{src.metadata.source}</small>
          </div>
        ))}
      </div>
    </div>
  );
}