前端 x AI：基于Ollama、DeepSeek、Chroma、LangChain搭建AI应用开发框架

“纸上得来终觉浅，绝知此事要躬行”，因此学习的过程讲究“口到、手到、心到”，为避免浮于表面，需要通过实践进一步将理论内化为个人能力。为了后续更好的在本地实践 AI 应用开发，今天我先带你在本地搭建基于 Ollama[1]、DeepSeek[2]、Chroma[3]、LangChain.js[4] 和 Next.js[5] 的全栈 AI 应用开发框架。本开发框架秉承开源、轻量、易操作的理念，让你用最少的资源在本地进行 AI 应用开发实践，带你轻松踏入 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

前端 x AI：基于Ollama、DeepSeek、Chroma、LangChain搭建AI应用开发框架

Ollama - LLM 本地管理工具

Ollama 简介

Ollama 安装

Ollama 服务

DeepSeek R1 - 开源的推理模型

DeepSeek R1 简介

DeepSeek R1 部署

DeepSeek R1 运行

Chroma - 向量数据库

Chroma 简介

Chroma 安装

Chroma 访问

LangChain.js - AI 应用开发框架

LangChain.js 简介

LangCain.js 安装

Next.js - 全栈开发框架

Next.js 简介

Next.js 安装

结语

引用链接

相关资讯

腾讯云突破性升级！大模型知识引擎首家接入MCP，AI应用开发迎来新时代

尤雨溪宣布：Vue 生态正式引入 AI！

2025 年前端与 AI 技术大盘点和展望