前端 x AI：基于Ollama、DeepSeek、Chroma、LangChain搭建AI應用開發框架

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

人工智能開發

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

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

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

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

Ollama - LLM 本地管理工具

Ollama 簡介

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

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

Ollama 安裝

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

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

Ollama 服務

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

Ollama 服務可以對本地 LLM 進行管理或者創建指定模型的對話或生成服務。Ollama API^[6] 包括：

Generate a completion：文本生成
Generate a chat completion：聊天生成
Create a Model：創建模型
List Local Models：列出本地模型
Show Model Information：顯示模型信息
Copy a Model：復制模型
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）來提高回復質量的推理模型。

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

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

DeepSeek R1 部署

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

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

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

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

DeepSeek R1 運行

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

當然，Ollama 也提供了 API 讓應用程序與模型交互。

請求：

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

響應：

{
"model":"deepseek-r1",
"created_at":"2025-03-14T11:20:29.876453Z",
"response":"\u003cthink\u003e\n\n\u003c/think\u003e\n\n您好！我是由中國的深度求索（DeepSeek）公司開發的智能助手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 - 向量數據庫

Chroma 簡介

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

向量數據庫已經成為 AI 應用的核心基礎設施，覆蓋 RAG、多模態搜索、個性化推薦等場景，其性能與靈活性顯著優于傳統關系型數據庫。

Chroma 就是一款開源的向量數據庫，專為 AI 應用設計，支持嵌入存儲、元數據過濾、向量搜索及多模態檢索。

Chroma 安裝

Chroma 和傳統關系型數據庫一樣，也分為服務端和客戶端，服務端用來管理數據，客戶端用來在應用端訪問數據庫服務進行數據的查詢、更新、刪除等等操作。

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

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

Chroma 訪問

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

以下是一個簡單的訪問 Chroma 數據庫的例子：

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 應用開發框架

LangChain.js 簡介

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

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

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

比如通過 ChatOllama 就可以調用 Ollama 提供的模型服務，而不需要再去了解 Ollama 自身提供的 API ：

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

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

2.Data Connection（數據連接）：該模塊支持文檔加載、數據分塊、向量化存儲及語義檢索。主要作用是構建私域知識庫，實現 RAG（檢索增強生成）的核心支持；

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

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

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

6.Indexes（索引管理）：該模塊優化非結構化數據的存儲與檢索效率，包括向量索引、文檔元數據管理。主要作用是提升大規模數據場景下的查詢性能。

LangCain.js 安裝

在應用中通過 npm 安裝即可。

npm install langchain @langchain/core

Next.js - 全棧開發框架

Next.js 簡介

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

Next.js 核心功能與特性：

渲染模式混合支持

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

高效開發體驗

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

內置性能優化

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

Next.js 安裝

Next.js 依賴 Node 環境，所以只需要到 Node 官網 https://nodejs.org/zh-cn 下載對應系統的軟件包按步驟完成安裝即可。

然后通過 npx create-next-app@latest 根據提示一步一步完成 Next 應用的創建。

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? @/*

結語

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

我的 AI 應用開發學習和實踐基本也是以這個框架來邊學習邊實踐的，希望對你也有啟發。

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

引用鏈接

[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

責任編輯：龐桂玉來源：燃哥講AI

AI 人工智能前端 AI應用開發

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看