第一章：LLM 核心概念与 LangChain.js 快速上手

langchain-course/
├── server/
│   ├── src/
│   │   ├── models/      # 模型封装
│   │   ├── prompts/     # Prompt 模板
│   │   ├── chains/      # LangChain 链模块
│   │   ├── routes/      # Express 路由
│   │   └── index.js     # 服务入口
│   ├── .env
│   └── package.json
└── client/
    └── src/
        ├── composables/
        └── views/

mkdir langchain-course && cd langchain-course

# 初始化后端
mkdir server && cd server
pnpm init
pnpm add langchain @langchain/core @langchain/openai express dotenv cors
pnpm add -D nodemon

# 初始化前端，回到根目录
cd ..
pnpm create vue@latest client
# 选项：TypeScript: No，Router: Yes，Pinia: Yes，ESLint: Yes
cd client && pnpm install
pnpm add axios

DEEPSEEK_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
DEEPSEEK_BASE_URL=https://api.deepseek.com/v1
MODEL_NAME=deepseek-chat
PORT=3000

// server/src/models/deepseek.js
import { ChatOpenAI } from '@langchain/openai';
import 'dotenv/config';

// DeepSeek 兼容 OpenAI 协议，使用 ChatOpenAI 并替换 baseURL 即可
export const createModel = (options = {}) => {
  return new ChatOpenAI({
    modelName: process.env.MODEL_NAME,
    openAIApiKey: process.env.DEEPSEEK_API_KEY,
    configuration: {
      baseURL: process.env.DEEPSEEK_BASE_URL,
    },
    temperature: 0.7,
    streaming: false,
    ...options,
  });
};

export const model = createModel();
export const streamingModel = createModel({ streaming: true });

// server/src/prompts/customer-service.js
import { ChatPromptTemplate } from '@langchain/core/prompts';

export const customerServicePrompt = ChatPromptTemplate.fromMessages([
  [
    'system',
    `你是极速购电商平台的专业客服助手小购。

规则：
1. 只回答与购物、订单、物流、商品、售后相关的问题
2. 语气友好、专业，称呼用户为"亲"
3. 回复简洁，不超过 150 字
4. 遇到需要人工处理的问题，引导用户拨打 400-888-8888

当前时间：{current_time}`,
  ],
  ['placeholder', '{chat_history}'],
  ['human', '{user_input}'],
]);

// server/src/chains/basic-chat.js
import { StringOutputParser } from '@langchain/core/output_parsers';
import { createModel } from '../models/deepseek.js';
import { customerServicePrompt } from '../prompts/customer-service.js';

const model  = createModel({ temperature: 0.5 });
const parser = new StringOutputParser();

// Prompt → Model → Parser
export const customerServiceChain = customerServicePrompt | model | parser;

// 格式化历史消息：前端传来的 { role, content } 转为 LangChain 格式
export const formatHistory = (history = []) =>
  history
  .map((msg) => {
    if (msg.role === 'user')      return ['human',     msg.content];
    if (msg.role === 'assistant') return ['assistant', msg.content];
    return null;
  })
  .filter(Boolean);

// server/src/routes/chat.js
import express from 'express';
import { customerServiceChain, formatHistory } from '../chains/basic-chat.js';

const router = express.Router();

router.post('/stream', async (req, res) => {
  const { message, history = [] } = req.body;

  if (!message) return res.status(400).json({ error: 'message 不能为空' });

  res.setHeader('Content-Type', 'text/event-stream; charset=utf-8');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('X-Accel-Buffering', 'no');

  const send = (data) => res.write(`data: ${JSON.stringify(data)}\n\n`);

  try {
    const stream = await customerServiceChain.stream({
      user_input:   message,
      chat_history: formatHistory(history),
      current_time: new Date().toLocaleString('zh-CN'),
    });

    for await (const chunk of stream) {
      if (chunk) send({ content: chunk });
    }

    send({ done: true });
    res.end();
  } catch (err) {
    send({ error: '生成回复时出错，请重试' });
    res.end();
  }
});

export default router;

// server/src/index.js
import express from 'express';
import cors from 'cors';
import 'dotenv/config';
import chatRouter from './routes/chat.js';

const app  = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());
app.use('/api/chat', chatRouter);

app.listen(PORT, () => {
  console.log(`server running on http://localhost:${PORT}`);
});

// client/src/composables/useChat.js
import { ref, nextTick } from 'vue';

const API_BASE = 'http://localhost:3000/api';

export function useChat() {
  const messages   = ref([]);
  const streaming  = ref(false);
  const streamText = ref('');
  const error      = ref('');

  const sendMessage = async (userInput, scrollCallback) => {
    if (!userInput.trim() || streaming.value) return;

    messages.value.push({ role: 'user', content: userInput });
    scrollCallback?.();

    streaming.value  = true;
    streamText.value = '';
    error.value      = '';

    try {
      const history = messages.value
        .slice(-10)
        .map(({ role, content }) => ({ role, content }));

      const response = await fetch(`${API_BASE}/chat/stream`, {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ message: userInput, history }),
      });

      const reader  = response.body.getReader();
      const decoder = new TextDecoder('utf-8');

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const lines = decoder
          .decode(value, { stream: true })
          .split('\n')
          .filter((l) => l.startsWith('data: '));

        for (const line of lines) {
          try {
            const parsed = JSON.parse(line.slice(6));
            if (parsed.error)   { error.value = parsed.error; break; }
            if (parsed.done)    break;
            if (parsed.content) {
              streamText.value += parsed.content;
              await nextTick();
              scrollCallback?.();
            }
          } catch {}
        }
      }

      messages.value.push({ role: 'assistant', content: streamText.value });
    } catch (err) {
      error.value = `请求失败：${err.message}`;
    } finally {
      streaming.value  = false;
      streamText.value = '';
    }
  };

  const clearMessages = () => {
    messages.value = [];
    error.value    = '';
  };

  return { messages, streaming, streamText, error, sendMessage, clearMessages };
}

<!-- client/src/views/ChatView.vue -->
<template>
  <div class="chat-page">
    <header class="chat-header">
      <div class="header-left">
        <div class="avatar">购</div>
        <div>
          <h1>极速购智能客服</h1>
          <span :class="['status', { active: !streaming }]">
            {{ streaming ? '回复中...' : '在线' }}
          </span>
        </div>
      </div>
      <button @click="clearMessages">清空对话</button>
    </header>

    <main class="messages-wrap" ref="messagesRef">
      <div v-if="messages.length === 0" class="welcome">
        <p>您好，我是极速购客服小购，有什么可以帮您的？</p>
        <div class="quick-btns">
          <button v-for="q in quickQuestions" :key="q" @click="handleQuick(q)">
            {{ q }}
          </button>
        </div>
      </div>

      <div
        v-for="(msg, i) in messages"
        :key="i"
        class="message-row"
        :class="msg.role"
      >
        <div class="avatar-sm">{{ msg.role === 'user' ? '我' : '购' }}</div>
        <div class="bubble">{{ msg.content }}</div>
      </div>

      <div v-if="streaming" class="message-row assistant">
        <div class="avatar-sm">购</div>
        <div class="bubble">
          {{ streamText }}<span class="cursor">|</span>
        </div>
      </div>

      <div v-if="error" class="error-tip">{{ error }}</div>
    </main>

    <footer class="input-area">
      <textarea
        v-model="inputText"
        placeholder="输入消息，Enter 发送，Shift+Enter 换行"
        :disabled="streaming"
        @keydown.enter.exact.prevent="handleSend"
        rows="1"
      />
      <button
        class="send-btn"
        :disabled="streaming || !inputText.trim()"
        @click="handleSend"
      >
        {{ streaming ? '回复中...' : '发送' }}
      </button>
    </footer>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { useChat } from '../composables/useChat.js';

const { messages, streaming, streamText, error, sendMessage, clearMessages } = useChat();

const inputText   = ref('');
const messagesRef = ref(null);

const quickQuestions = ['我的订单在哪里？', '如何申请退款？', '物流多久到？'];

const scrollToBottom = async () => {
  await nextTick();
  if (messagesRef.value)
    messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
};

const handleSend = async () => {
  const text = inputText.value.trim();
  if (!text || streaming.value) return;
  inputText.value = '';
  await sendMessage(text, scrollToBottom);
};

const handleQuick = (q) => {
  inputText.value = q;
  handleSend();
};
</script>

# 终端 1：启动后端
cd server
cp .env.example .env
# 编辑 .env，填入 DeepSeek API Key
pnpm install
pnpm dev

# 终端 2：启动前端
cd client
pnpm install
pnpm dev