说起 LangChain，hen多人第一反应是“只Neng在 Python 后端玩”，其实不然。借助 LangChain.js，我们完全Ke以在 Vue、React 甚至纯 HTML 项目里直接调用大模型，让 AI 成为前端的“随身助理”。下面我把从环境装配到完整案例的全过程拆开来讲，保证每一步dou有可复制的代码，读完后你就Neng自己敲出一个会写代码的聊天框。

Ru果你Yi经有了 Node.js和 npm，只需要几条命令就Neng把 LangChain 的核心库拉进来：

# 创建项目目录
mkdir langchain-demo && cd langchain-demo
# 初始化 package.json
npm init -y
# 安装必备依赖
npm install @langchain/core @langchain/community dotenv
# 挑一个大模型 SDK
npm install @langchain/deepseek   # 国内访问geng顺畅
# Ru果想玩 OpenAI，只需换成：
# npm install @langchain/openai

随后新建一个 .env 文件，把 API Key 写进去：

DEEPSEEK_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx
# 对于 OpenAI 则写成 OPENAI_API_KEY=...

别忘了在 package.json 中加上 "type":"module"，让 Node Neng识别 ES 模块语法。

在日常开发里我们经常用 ${变量} 把模板和数据拼起来。PromptTemplate 也是这么干的，只不过它负责生成给大模型的提示词。

import { ChatPromptTemplate } from "@langchain/core/prompts";
const frontendPrompt = ChatPromptTemplate.fromTemplate(`
你是一名专业的前端助理，只回答关于 React/Vue/JS/TS 的问题。
要求：
- 代码必须带注释，可直接粘贴运行；
- 简洁明了不要出现无关信息；
- 若提问不涉及前端，请回复「请提问前端相关问题」。
用户提问：{question}
`);

这里的 {question} 就是占位符，运行时再填进去即可。

想象一下你平时会写「获取数据 → 过滤 → 渲染」这样的 Promise 链。LangChain 的 Chain 把 Prompt → 大模型 → 输出解析组合成一条自动流转的管道，一键搞定。

import { ChatDeepSeek } from "@langchain/deepseek";
import { StringOutputParser } from "@langchain/core/output_parsers";
const model = new ChatDeepSeek({
    model: "deepseek-reasoner",
    temperature: 0.2,
    maxTokens: 1024,
});
const parser = new StringOutputParser;
// 将三段拼成一条链：prompt → model → parser
const chatChain = frontendPrompt.pipe.pipe;

Ru果你的产品有 API 手册或设计文档，直接让模型凭空回答容易跑偏。RAG 把文档切块、向量化，然后在用户提问时先检索Zui相关的片段，再交给 LLM 回答，准确率杠杠的。

下面演示一个极简版 React 对话框，它会把用户输入送进上面组装好的链条，并把回复渲染出来。所有代码均可复制粘贴到你的项目中。

// src/AiHelper.tsx
import React, { useState } from "react";
import dotenv from "dotenv";
import { ChatDeepSeek } from "@langchain/deepseek";
import { SystemMessage, HumanMessage } from "@langchain/core/messages";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";
dotenv.config; // 自动读取 .env
// 大模型实例
const model = new ChatDeepSeek({
    model: "deepseek-reasoner",
    temperature: 0.1,
    maxTokens: 800,
});
// Prompt 定义
const prompt = ChatPromptTemplate.fromTemplate(`
你是专注于前端技术的 AI 助手，只回答 React/Vue/TS/JS 等相关问题。
请使用 markdown 包裹代码块，并在必要时添加行号注释。
用户提问：{question}
`);
const parser = new StringOutputParser;
const chain = prompt.pipe.pipe;
export const AiHelper: React.FC =  => {
    const  = useState();
    const  = useState;
    const  = useState;
    const  = useState;
    const sendMsg = async  => {
        if ) { setError; return; }
        const userMsg={role:"user",content:input};
        setMsgList;
        setInput;
        setLoading;
        setError;
        try {
            const reply = await chain.invoke;
            setMsgList;
        } catch{
            console.error;
            setError;
        } finally {
            setLoading;
        }
    };
    return (
        

            

                {msgList.map=>(
                    

                        
                            {m.content}
                        
                    
                ))}
                {loading && 
思考中…
}
                {error && 
{error}
}
            
            setInput}
                onKeyDown={e=>e.key==="Enter" && !loading && sendMsg}
                style={{flexGrow:1,padding:"8px 12px",border:"1px solid #ddd",borderRadius:"6px"}}
            />
            发送
        
    );
};

运行 npm run dev 后打开浏览器，你会kan到一个简洁的小对话框，随便抛个「怎么用 Vue 写防抖输入框？」立刻得到完整代码示例。

单纯对话虽然好玩，但hen多业务场景需要基于Yi有文档给出答案，例如产品手册、接口规范等。下面演示如何把一段文字集合转成向量存储，然后通过检索结果驱动 LLM 回答。

// src/rag.ts
import { Document } from "@langchain/core/documents";
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { MemoryVectorStore } from "langchain/vectorstores/memory";
import { OpenAIEmbeddings } from "@langchain/openai"; // 若使用 DeepSeek 替换对应类
// 假设这些是你的 API 文档片段
const docs = ;
// 初始化向量库
export async function initRetriever {
    const splitter = new RecursiveCharacterTextSplitter;
    const splitDocs = await splitter.splitDocuments;
    const embeddings = new OpenAIEmbeddings; // 替换为 DeepSeekEmbeddings 即可
    const store = await MemoryVectorStore.fromDocuments;
    // 返回一个检索器对象，用法同普通 LLM 调用
    return store.asRetriever; // 每次返回Zui相近的两段文本
}

接下来把检索器嵌进 Chain：

// src/ragChat.ts
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { RunnableSequence } from "@langchain/core/runnables";
export async function ragAnswer {
    const retriever = await initRetriever;
    const ragPrompt = ChatPromptTemplate.fromTemplate(`

{context}

请仅依据上述内容回答，不要添加额外信息。若没有匹配，请回复「文档未涉及」。
问题：{question}
`);
    const chain = RunnableSequence.from();
   return await chain.invoke;
}

现在你Ke以像之前那样调用 ragAnswer，得到精准且只来源于文档的答案。

ESM 与 CommonJS 冲突： 项目Ru果用了旧版 require，需要在 .cjs/.mjs 或者修改 "type":"module". 否则会报 “Cannot use import statement outside a module”。调好后即可顺畅导入 LangChain 包。

.env 在打包后泄露： 前端编译产物里绝不Neng出现真实 API Key。推荐Zuo法是将调用放在服务器less函数或 Cloudflare Workers 中，仅把 token 放在后端环境变量里然后让前端通过自己的接口转发请求。

Linter 报错 “any” 类型未声明： 给 TS 配置加上 "skipLibCheck":true,或者自行声明对应模块类型，这样编辑器不会吓跑你。

LlamaIndex 与 LangChain 冲突： 两个库dou提供向量检索，Ru果同时安装可Neng出现重复依赖冲突。建议只保留一种实现，要么全部走 LangChain，要么走 LlamaIndex。

MIME 类型错误导致 PDF 加载失败： 当使用 PDFLoader 时需要确保服务器返回的是 application/pdf，否则解析会崩溃。Ke以先下载到本地再读取或使用 fetch + Blob 转换。

AFAIK，目前社区Yi经围绕以下方向形成了生态：

Semi‑structured 数据处理：Tika、Unstructured 等加载器帮助把 Word/Excel 转成文本；配合 RAG 可快速构建内部知识库。

Crew Agent 多工具协作：L​angChain 的 Agent Neng够调用搜索引擎、数据库甚至执行自定义函数，让 AI 成为真正意义上的 “多臂猿”。对前端而言，Ke以让它帮忙生成 UI 流程图或自动填表单。

Evals 自动评估套件：PROMPT‑EVALS Neng帮你批量测评自己写好的 Prompt 是否达标，这对于持续迭代hen关键。

Kubernetes 部署指南：If you ever need production‑grade scaling you can wrap your JS chain into a Docker container and push to K8s.

从「装好依赖」→「写 Prompt」→「串起 Chain」→「加上检索」，再配合一些小技巧，你Yi经完成了从零到可落地项目的全流程。Ru果还有哪一步卡住不妨回头kan本篇文章对应章节；或者去官方 Docs 和 GitHub Discussions 那里搜搜答案——社区氛围真的hen好，hen乐意帮助新人上车 🚀。