前端 x AI：基于Ollama、DeepSeek、Chroma、LangChain搭建AI應(yīng)用開發(fā)框架

作者：賴祥燃 2025-05-22 02:00:00

為了后續(xù)更好的在本地實(shí)踐 AI 應(yīng)用開發(fā)，今天我先帶你在本地搭建基于 Ollama[1]、DeepSeek[2]、Chroma[3]、LangChain.js[4] 和 Next.js[5] 的全棧 AI 應(yīng)用開發(fā)框架。

“紙上得來(lái)終覺(jué)淺，絕知此事要躬行”，因此學(xué)習(xí)的過(guò)程講究“口到、手到、心到”，為避免浮于表面，需要通過(guò)實(shí)踐進(jìn)一步將理論內(nèi)化為個(gè)人能力。

為了后續(xù)更好的在本地實(shí)踐 AI 應(yīng)用開發(fā)，今天我先帶你在本地搭建基于 Ollama^[1]、DeepSeek^[2]、Chroma^[3]、LangChain.js^[4] 和 Next.js^[5] 的全棧 AI 應(yīng)用開發(fā)框架。

本開發(fā)框架秉承開源、輕量、易操作的理念，讓你用最少的資源在本地進(jìn)行 AI 應(yīng)用開發(fā)實(shí)踐，帶你輕松踏入 AI 應(yīng)用開發(fā)的大門。

Ollama - LLM 本地管理工具

Ollama 簡(jiǎn)介

Ollama 是一款開源框架，專注于在本地環(huán)境部署和運(yùn)行 LLM。它通過(guò)簡(jiǎn)化模型管理流程和優(yōu)化硬件資源利用，為開發(fā)者、企業(yè)及研究人員提供高效便捷的本地化 AI 解決方案。

Ollama 內(nèi)置多種模型支持，包括 Llama 2、Mistral、DeepSeek 等，用戶可根據(jù)需求選擇不同參數(shù)規(guī)模的模型（如 8B、70B 等）。

Ollama 安裝

下載 Ollama：訪問(wèn) Ollama 的官方網(wǎng)址（https://ollama.com/），下載適用于你電腦系統(tǒng)的最新版本；
安裝 Ollama：雙擊運(yùn)行安裝程序，并按照屏幕上的說(shuō)明完成安裝；
驗(yàn)證安裝：打開終端，運(yùn)行 ollama --version 命令來(lái)驗(yàn)證 Ollama 是否安裝正確。如果安裝成功，你應(yīng)該能看到 Ollama 的版本號(hào)。

ollama --version
Warning: could not connect to a running Ollama instance
Warning: client version is 0.5.13

Ollama 服務(wù)

安裝好 Ollama 之后，在終端就可以運(yùn)行 ollama start 來(lái)啟動(dòng) Ollama 服務(wù)，在瀏覽器訪問(wèn) http://127.0.0.1:11434/，看到 Ollama is running 就說(shuō)明 Ollama 服務(wù)啟動(dòng)成功了。

Ollama 服務(wù)可以對(duì)本地 LLM 進(jìn)行管理或者創(chuàng)建指定模型的對(duì)話或生成服務(wù)。Ollama API^[6] 包括：

Generate a completion：文本生成
Generate a chat completion：聊天生成
Create a Model：創(chuàng)建模型
List Local Models：列出本地模型
Show Model Information：顯示模型信息
Copy a Model：復(fù)制模型
Delete a Model：刪除模型
Pull a Model：拉取模型
Push a Model：推送模型
Generate Embeddings：嵌入向量生成
List Running Models：列出運(yùn)行中的模型
Version：檢查 Ollama 版本

至此，Ollama 就安裝好了，接下來(lái)就可以利用 Ollama 部署 DeepSeek R1 了。

DeepSeek R1 - 開源的推理模型

DeepSeek R1 簡(jiǎn)介

DeepSeek R1 是一款利用思維鏈（CoT）來(lái)提高回復(fù)質(zhì)量的推理模型。

與直接生成答案的傳統(tǒng)模型不同，DeepSeek R1 在給出最終輸出之前，會(huì)先生成詳細(xì)的推理過(guò)程，這個(gè)中間步驟讓模型能夠“思考”問(wèn)題，從而得出更準(zhǔn)確、更可靠的答案。

該模型在需要邏輯推理、解決問(wèn)題或多步分析的任務(wù)中特別有用。通過(guò)讓用戶能夠查看思維鏈內(nèi)容，DeepSeek R1 還具備了透明度，開發(fā)者和用戶可以借此了解模型是如何得出結(jié)論的。

DeepSeek R1 部署

Ollama 支持部署不同參數(shù)量的 DeepSeek R1，考慮到個(gè)人電腦資源有限和學(xué)習(xí)實(shí)踐的目的，一般安裝 1.5b 就可以了。

也可以訪問(wèn)這個(gè)網(wǎng)站https://tools.thinkinai.xyz/進(jìn)行 DeepSeek R1 模型兼容性檢測(cè)，看看你的硬件資源適合部署哪一個(gè)參數(shù)量的 DeepSeek R1。

打開終端，運(yùn)行 ollama pull deepseek-r1:1.5b 就可以將 DeepSeek R1 1.5B 模型下載并存儲(chǔ)在你本地的機(jī)器上。

下載完成之后，運(yùn)單 ollama list 查看所有可用模型來(lái)驗(yàn)證是否下載成功。

DeepSeek R1 運(yùn)行

運(yùn)行 ollama run deepseek-r1 啟動(dòng) DeepSeek R1 模型，啟動(dòng)后在終端就可以開始與模型進(jìn)行交互。

當(dāng)然，Ollama 也提供了 API 讓應(yīng)用程序與模型交互。

請(qǐng)求：

curl http://localhost:11434/api/generate -d '{
  "model": "deepseek-r1",
  "prompt": "你是誰(shuí)？",
  "stream": false
}'

響應(yīng)：

{
"model":"deepseek-r1",
"created_at":"2025-03-14T11:20:29.876453Z",
"response":"\u003cthink\u003e\n\n\u003c/think\u003e\n\n您好！我是由中國(guó)的深度求索（DeepSeek）公司開發(fā)的智能助手DeepSeek-R1。如您有任何任何問(wèn)題，我會(huì)盡我所能為您提供幫助。",
"done":true,
"done_reason":"stop",
"context":[151644,105043,100165,11319,151645,151648,271,151649,271,111308,6313,104198,67071,105538,102217,30918,50984,9909,33464,39350,7552,73218,100013,9370,100168,110498,33464,39350,10911,16,1773,29524,87026,110117,99885,86119,3837,105351,99739,35946,111079,113445,100364,1773],
"total_duration":1633781708,
"load_duration":30190083,
"prompt_eval_count":6,
"prompt_eval_duration":175000000,
"eval_count":40,
"eval_duration":1427000000
}

到這里，用 Ollama 部署 DeepSeek R1 完成了。

Chroma - 向量數(shù)據(jù)庫(kù)

Chroma 簡(jiǎn)介

向量數(shù)據(jù)庫(kù)是一種專門用于存儲(chǔ)、管理和檢索向量數(shù)據(jù)（高維數(shù)值數(shù)組）的數(shù)據(jù)庫(kù)系統(tǒng)，其核心能力在于支持高效的向量相似性搜索，適用于處理非結(jié)構(gòu)化數(shù)據(jù)（如文本、圖像、音頻）的語(yǔ)義匹配需求。

向量數(shù)據(jù)庫(kù)已經(jīng)成為 AI 應(yīng)用的核心基礎(chǔ)設(shè)施，覆蓋 RAG、多模態(tài)搜索、個(gè)性化推薦等場(chǎng)景，其性能與靈活性顯著優(yōu)于傳統(tǒng)關(guān)系型數(shù)據(jù)庫(kù)。

Chroma 就是一款開源的向量數(shù)據(jù)庫(kù)，專為 AI 應(yīng)用設(shè)計(jì)，支持嵌入存儲(chǔ)、元數(shù)據(jù)過(guò)濾、向量搜索及多模態(tài)檢索。

Chroma 安裝

Chroma 和傳統(tǒng)關(guān)系型數(shù)據(jù)庫(kù)一樣，也分為服務(wù)端和客戶端，服務(wù)端用來(lái)管理數(shù)據(jù)，客戶端用來(lái)在應(yīng)用端訪問(wèn)數(shù)據(jù)庫(kù)服務(wù)進(jìn)行數(shù)據(jù)的查詢、更新、刪除等等操作。

服務(wù)端的安裝需要依賴 pip（python 官方包管理工具，類似npm）。python 默認(rèn)自帶 pip，所以只要去 python 官網(wǎng)（https://www.python.org/downloads/）下載對(duì)應(yīng)系統(tǒng)的軟件包按步驟完成安裝即可。安裝好之后在終端執(zhí)行 pip --verison 能看到版本號(hào)就說(shuō)明 pip 安裝好了。

接下來(lái)就可以在終端執(zhí)行 pip install chromadb 安裝 chroma 服務(wù)端，安裝成功后執(zhí)行 chroma run 運(yùn)行服務(wù)，即可讓客戶端訪問(wèn)。

Chroma 訪問(wèn)

客戶端有 python 和 javaScript 兩種，用 javaScript 就是安裝相應(yīng)的包 npm install --save chromadb chromadb-default-embed。

以下是一個(gè)簡(jiǎn)單的訪問(wèn) Chroma 數(shù)據(jù)庫(kù)的例子：

import { ChromaClient } from'chromadb'

asyncfunctionchromaExample() {
const client = newChromaClient();
const collection = await client.createCollection({name: "sample_collection"});
await collection.add({
    documents: ["This is a document", "This is another document"], // we embed for you, or bring your own
    metadatas: [{ source: "my_source" }, { source: "my_source" }], // filter on arbitrary metadata!
    ids: ["id1", "id2"] // must be unique for each doc
  });
const results = await collection.query({
    queryTexts: ["This is a query document"],
    nResults: 2,
    // where: {"metadata_field": "is_equal_to_this"}, // optional filter
    // whereDocument: {"$contains":"search_string"} // optional filter
  });
}

chromaExample();

LangChain.js - AI 應(yīng)用開發(fā)框架

LangChain.js 簡(jiǎn)介

LangChain.js 是一個(gè)以 LLM 為核心的開發(fā)框架，旨在簡(jiǎn)化基于 LLM 的應(yīng)用程序開發(fā)流程。它通過(guò)模塊化設(shè)計(jì)，將 LLM 與外部數(shù)據(jù)源、計(jì)算工具等結(jié)合，支持開發(fā)者快速構(gòu)建端到端的 AI 應(yīng)用（如聊天機(jī)器人、文檔問(wèn)答系統(tǒng)等）。

LangChain.js 主要包含 6 個(gè)基礎(chǔ)模塊，分別是：

1.Model I/O（模型輸入/輸出）：該模塊負(fù)責(zé)管理與 LLM 的交互，包括提示詞模板化、模型調(diào)用及輸出解析。主要作用是將不同的模型接口標(biāo)準(zhǔn)化，讓你可以快速編碼與不同的 LLM 進(jìn)行交互；

比如通過(guò) ChatOllama 就可以調(diào)用 Ollama 提供的模型服務(wù)，而不需要再去了解 Ollama 自身提供的 API ：

import { ChatOllama } from "@langchain/ollama";

const llm = new ChatOllama({
  model: "deepseek-r1",
  // other params...
});

2.Data Connection（數(shù)據(jù)連接）：該模塊支持文檔加載、數(shù)據(jù)分塊、向量化存儲(chǔ)及語(yǔ)義檢索。主要作用是構(gòu)建私域知識(shí)庫(kù)，實(shí)現(xiàn) RAG（檢索增強(qiáng)生成）的核心支持；

3.Chains（鏈?zhǔn)竭壿嫞涸撃K負(fù)責(zé)將多個(gè)模塊串聯(lián)為任務(wù)流程（如 RAG 鏈、對(duì)話鏈），支持自定義順序或分支邏輯。主要作用是簡(jiǎn)化復(fù)雜任務(wù)的編排與執(zhí)行；

4.Memory（記憶管理）：該模塊記錄對(duì)話歷史或交互狀態(tài)，支持會(huì)話連續(xù)性（如基于緩存的短期記憶或數(shù)據(jù)庫(kù)的長(zhǎng)期記憶）。主要作用是提升個(gè)性化交互體驗(yàn)；

5.Agents（智能代理）：該模塊賦予 LLM 自主調(diào)用外部工具（API、數(shù)據(jù)庫(kù)）的能力，通過(guò)動(dòng)態(tài)決策完成復(fù)雜任務(wù)。主要作用是實(shí)現(xiàn)自動(dòng)化流程（如數(shù)據(jù)分析、郵件發(fā)送）；

6.Indexes（索引管理）：該模塊優(yōu)化非結(jié)構(gòu)化數(shù)據(jù)的存儲(chǔ)與檢索效率，包括向量索引、文檔元數(shù)據(jù)管理。主要作用是提升大規(guī)模數(shù)據(jù)場(chǎng)景下的查詢性能。

LangCain.js 安裝

在應(yīng)用中通過(guò) npm 安裝即可。

npm install langchain @langchain/core

Next.js - 全棧開發(fā)框架

Next.js 簡(jiǎn)介

Next.js 是一個(gè)基于 React 的全棧開發(fā)框架，專注于構(gòu)建高性能、SEO 友好的現(xiàn)代化 Web 應(yīng)用。它通過(guò)開箱即用的功能（如服務(wù)端渲染、靜態(tài)生成、API 路由等），幫助開發(fā)者快速搭建企業(yè)級(jí)應(yīng)用，同時(shí)支持從靜態(tài)站點(diǎn)到動(dòng)態(tài)復(fù)雜系統(tǒng)的多種場(chǎng)景。

Next.js 核心功能與特性：

渲染模式混合支持

SSR（服務(wù)端渲染）：在服務(wù)器端生成 HTML，提升首屏加載速度與 SEO 效果；
SSG（靜態(tài)生成）：構(gòu)建時(shí)預(yù)渲染頁(yè)面，適合內(nèi)容穩(wěn)定的場(chǎng)景（如博客、文檔站）；
ISR（增量靜態(tài)再生）：動(dòng)態(tài)更新靜態(tài)頁(yè)面，平衡性能與實(shí)時(shí)性；
CSR（客戶端渲染）：保留傳統(tǒng) React SPA 的交互體驗(yàn)。

高效開發(fā)體驗(yàn)

文件系統(tǒng)路由：基于 pages/ 目錄自動(dòng)生成路由，無(wú)需手動(dòng)配置；
API Routes：直接在項(xiàng)目中編寫后端 API（如 pages/api/*.js），無(wú)縫銜接前后端；
Fast Refresh：實(shí)時(shí)熱更新，修改代碼后立即生效。

內(nèi)置性能優(yōu)化

Image Optimization：自動(dòng)壓縮、懶加載圖片，支持 WebP 格式轉(zhuǎn)換；
Font & Script Optimization：字體預(yù)加載、第三方腳本異步加載；
代碼拆分：按需加載 JavaScript，減少初始包體積。

Next.js 安裝

Next.js 依賴 Node 環(huán)境，所以只需要到 Node 官網(wǎng) https://nodejs.org/zh-cn 下載對(duì)應(yīng)系統(tǒng)的軟件包按步驟完成安裝即可。

然后通過(guò) npx create-next-app@latest 根據(jù)提示一步一步完成 Next 應(yīng)用的創(chuàng)建。

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*