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

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

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

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

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

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

Ollama - LLM 本地管理工具

Ollama 簡介

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

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

Ollama 安裝

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

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

Ollama 服務(wù)

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

Ollama 服務(wù)可以對本地 LLM 進行管理或者創(chuàng)建指定模型的對話或生成服務(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：列出運行中的模型
Version：檢查 Ollama 版本

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

DeepSeek R1 - 開源的推理模型

DeepSeek R1 簡介

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

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

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

DeepSeek R1 部署

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

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

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

下載完成之后，運單 ollama list 查看所有可用模型來驗證是否下載成功。

DeepSeek R1 運行

運行 ollama run deepseek-r1 啟動 DeepSeek R1 模型，啟動后在終端就可以開始與模型進行交互。

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

請求：

curl http://localhost:11434/api/generate -d '{
  "model": "deepseek-r1",
  "prompt": "你是誰？",
  "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您好！我是由中國的深度求索（DeepSeek）公司開發(fā)的智能助手DeepSeek-R1。如您有任何任何問題，我會盡我所能為您提供幫助。",
"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ù)庫

Chroma 簡介

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

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

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

Chroma 安裝

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

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

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

Chroma 訪問

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

以下是一個簡單的訪問 Chroma 數(shù)據(jù)庫的例子：

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 簡介

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

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

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

比如通過 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ù)分塊、向量化存儲及語義檢索。主要作用是構(gòu)建私域知識庫，實現(xiàn) RAG（檢索增強生成）的核心支持；

3.Chains（鏈式邏輯）：該模塊負責(zé)將多個模塊串聯(lián)為任務(wù)流程（如 RAG 鏈、對話鏈），支持自定義順序或分支邏輯。主要作用是簡化復(fù)雜任務(wù)的編排與執(zhí)行；

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

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

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

LangCain.js 安裝

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

npm install langchain @langchain/core

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

Next.js 簡介

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

Next.js 核心功能與特性：

渲染模式混合支持

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

高效開發(fā)體驗

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

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

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

Next.js 安裝

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

然后通過 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? @/*

結(jié)語

通過以上步驟，一個基于 Ollama、DeepSeek、Chroma、LangChain.js 和 Next.js 的全棧 AI 應(yīng)用開發(fā)框架就搭建好了。

我的 AI 應(yīng)用開發(fā)學(xué)習(xí)和實踐基本也是以這個框架來邊學(xué)習(xí)邊實踐的，希望對你也有啟發(fā)。

后續(xù)的文章涉及到項目實踐的，也會基于這個框架來進行實現(xiàn)和講解。

引用鏈接

[1] Ollama:https://ollama.com/

[2]DeepSeek:https://www.deepseek.com/

[3]Chroma:https://www.trychroma.com/

[4]LangChain.js:https://js.langchain.com/docs/introduction

[5]Next.js:https://nextjs.org/

[6]Ollama API:https://github.com/ollama/ollama/blob/main/docs/api.md#generate-a-completion

責(zé)任編輯：龐桂玉來源：燃哥講AI

AI 人工智能前端 AI應(yīng)用開發(fā)