Node.js AI 开发入门 - 完整学习笔记

📋 项目概述

目标：从零开始学习 Node.js + AI 开发，掌握调用大语言模型的基础知识。

时间：2026-02-02
状态：✅ 第一阶段完成

🎯 学习目标

为什么学习 AI 开发？

职业发展：
- Node.js + AI 是一个很好的技能组合
技术趋势：
- 纯前端竞争激烈，需要差异化能力
- AI 应用开发是未来趋势
- 全栈 + AI 能力更有竞争力
学习路径：
- 第一阶段：快速建立感觉（1-2周）
- 第二阶段：AI工程基础（2-4周）
- 第三阶段：Agent架构（1-2月）
- 第四阶段：RAG与知识库（1-2月）

💻 技术栈选择

为什么选择 Node.js？

优势	说明
技能复用	前端开发者熟悉 JavaScript/TypeScript
生态丰富	npm 包丰富，快速开发
全栈能力	前后端可以用同一语言
AI 框架成熟	LangChain.js、Vercel AI SDK 等

为什么选择 Claude？

公司使用 Claude Code，已有 API Key
性能优秀（Claude 3.5 Sonnet）
中文支持好
有国内中转服务可用

🚀 项目搭建过程

1. 初始化项目

bash 复制代码

# 创建项目目录
mkdir node-ai
cd node-ai

# 初始化 package.json
npm init -y

# 安装依赖
pnpm add @anthropic-ai/sdk dotenv @types/node tsx -D

2. 项目结构

复制代码

node-ai/
├── examples/              # 学习示例
│   ├── 01-simple-chat/    # 基础对话
│   ├── 02-streaming-chat/ # 流式响应
│   └── 03-system-prompt/  # 系统提示词
├── projects/              # 实战项目（未来）
├── docs/                  # 学习文档
├── .env                   # 环境变量（含密钥）
├── .env.example           # 环境变量示例
├── package.json           # 项目配置
└── README.md              # 项目说明

3. 配置文件

package.json 关键配置：

json 复制代码

{
  "type": "module",
  "scripts": {
    "example:01": "tsx examples/01-simple-chat/index.ts",
    "example:02": "tsx examples/02-streaming-chat/index.ts",
    "example:03": "tsx examples/03-system-prompt/index.ts"
  }
}

tsconfig.json：

json 复制代码

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "strict": true
  }
}

🐛 遇到的问题与解决方案

问题 1：网络访问被 Cloudflare 拦截

现象：

复制代码

PermissionDeniedError: 403
You are unable to access codemirror.codes

原因：

从中国大陆访问 Anthropic API (api.anthropic.com) 被 Cloudflare 拦截

解决方案：使用 API 中转服务 ✅

中转服务可以绕过 Cloudflare 拦截，无需配置代理即可正常访问。

中转服务地址：

复制代码

https://api.aicodemirror.com/api/claudecode

配置方式：

typescript 复制代码

// 在代码中指定中转服务地址
const baseURL = "https://api.aicodemirror.com/api/claudecode";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
  baseURL: baseURL,
});

问题 2：环境变量冲突

现象：

系统环境变量中可能存在旧的或错误的配置，导致实际使用的地址不是预期的

解决方案：

typescript 复制代码

// 直接在代码中硬编码中转服务地址，避免环境变量冲突
const baseURL = "https://api.aicodemirror.com/api/claudecode";

✅ 最终配置

.env 文件

bash 复制代码

# API Key（必需）
ANTHROPIC_API_KEY="你的密钥"

注意： 中转服务地址建议直接在代码中配置，避免环境变量冲突。

核心代码模式

typescript 复制代码

import Anthropic from "@anthropic-ai/sdk";

// 配置中转服务
const baseURL = "https://api.aicodemirror.com/api/claudecode";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
  baseURL: baseURL,
});

// 发送消息
const response = await client.messages.create({
  model: "claude-3-5-sonnet-20241022",
  max_tokens: 1024,
  messages: [{ role: "user", content: "你的问题" }],
});

// 获取回复
console.log(response.content[0].text);

📚 完成的学习示例

示例 01：基础对话

学习目标：

理解 AI API 调用的基本流程
掌握 messages 消息结构
了解 token 计费方式

核心概念：

typescript 复制代码

// 消息结构
messages: [
  {
    role: "user",      // 角色：user 或 assistant
    content: "问题"     // 内容
  }
]

// 响应结构
response: {
  content: [{ text: "AI的回答" }],
  usage: {
    input_tokens: 42,   // 输入消耗
    output_tokens: 70   // 输出消耗
  }
}

运行：

bash 复制代码

pnpm example:01

示例 02：流式响应

学习目标：

理解 streaming 原理
实现逐字显示效果
对比流式 vs 非流式

为什么需要流式？

用户体验更好（立即看到响应）
长回复时不用等待
实际应用必备（ChatGPT 都是流式）

核心代码：

typescript 复制代码

// 使用 stream() 而不是 create()
const stream = await client.messages.stream({
  model: "claude-3-5-sonnet-20241022",
  max_tokens: 1024,
  messages: [...]
}).on("text", (text) => {
  process.stdout.write(text);
  //process.stdout标准输出流
  // 逐字输出，不换行 precess nodejs 的全局对象，提供了当前nodejs进程的信息和控制能力
});

运行：

bash 复制代码

pnpm example:02

打字机效果原理：

Node.js 环境下使用 process.stdout.write() 实现打字机效果，关键是不换行。

typescript 复制代码

// Node.js 打字机效果
.on("text", (text) => {
  process.stdout.write(text);  // 直接写入标准输出流，不换行
});

浏览器环境的实现：

浏览器没有 process 对象，需要通过字符串拼接 + DOM 更新实现打字机效果。

javascript 复制代码

// 浏览器打字机效果示例
const outputElement = document.getElementById('output');
let displayText = '';

// 监听流式数据（使用 SSE）
eventSource.onmessage = (event) => {
  displayText += event.data;  // 字符串拼接
  outputElement.textContent = displayText;  // 更新 DOM
};

环境对比：

环境	核心方法	原理
Node.js	`process.stdout.write(text)`	直接写入终端输出流
浏览器	`element.textContent += text`	字符串拼接 + DOM 更新

示例 03：系统提示词

学习目标：

理解 System Prompt 的作用
学会控制 AI 的角色和风格
掌握 Prompt Engineering 基础

核心概念：

System Prompt = 给 AI 设定"人设"

typescript 复制代码

// 系统提示词
system: "你是一位专业的技术顾问";

// 同样的问题，不同的提示词 = 不同的回答风格

演示效果：

同一个问题："什么是递归？"

角色	回答风格
默认助手	标准解释
技术顾问	简洁专业
老师	通俗易懂，带比喻
海盗船长	海盗腔调（有趣！）🏴‍☠️
程序员	代码示例为主

运行：

bash 复制代码

pnpm example:03

🧠 学到的核心知识

1. AI API 调用基础

typescript 复制代码

// 三要素
{
  model: "模型名称",
  messages: [消息数组],
  max_tokens: 最大长度
}

// 可选但重要
{
  system: "系统提示词",  // 控制 AI 行为
  temperature: 0.7       // 控制随机性（未用）
}

2. Token 计费

复制代码

总消耗 = input_tokens + output_tokens

示例成本：
- 输入 42 tokens + 输出 70 tokens = 112 tokens
- Claude Sonnet 价格：约 $0.003/1K tokens
- 这次对话成本：约 $0.0003（0.002 元）

3. 环境变量管理

优先级：

复制代码

系统环境变量 > .env 文件 > 代码默认值

最佳实践：

敏感信息（API Key）放 .env
.env 加入 .gitignore
提供 .env.example 模板
生产环境用系统环境变量

4. 网络访问方案

推荐使用中转服务：

✅ 国内直连，无需代理
✅ 配置简单
⚠️ 依赖第三方服务

配置方式：

在代码中指定 baseURL 为中转服务地址即可。

🎓 关键经验总结

1. 问题排查方法

bash 复制代码

# 网络问题诊断流程：
1. 检查环境变量：env | grep ANTHROPIC
2. 查看实际请求：观察程序输出的地址
3. 确认中转服务可用：检查是否能正常访问

2. AI 开发核心技能

技术层面：

API 调用
流式响应处理
错误处理和重试

工程层面：

Prompt 设计（最重要！）
Token 管理（成本控制）
缓存策略（优化性能）

3. 学习方法

有效的方法：

✅ 边做边学，立即实践

✅ 遇到问题就解决，加深理解

✅ 记录过程，形成知识库

✅ 对比不同方案，理解权衡

避免的陷阱：

❌ 只看理论不动手

❌ 跳过基础直接上难度

❌ 遇到问题就放弃

🚀 下一步计划

第二阶段：AI 工程基础（接下来 2-4 周）

示例 04：Function Calling

**目标：**让 AI 调用你的函数

应用场景：

AI 查天气
AI 搜索数据库
AI 调用工具

示例 05：多工具集成

**目标：**AI 可以使用多个工具

应用场景：

复杂任务分解
工具链调用

示例 06：对话记忆

**目标：**实现多轮对话

应用场景：

聊天机器人
上下文理解

实战项目建议

命令行聊天机器人
- 整合前三个示例的知识
- 添加对话历史
- 简单但完整
技术文档翻译工具
- 读取文件
- 调用 AI 翻译
- 保存结果
- 实用且简单
代码解释器
- 上传代码
- AI 分析
- 生成文档
- 为实习准备

📖 学习资源

官方文档

社区

r/LocalLLaMA (Reddit)
LangChain Discord

🎯 技能检查清单

第一阶段（当前）✅

第二阶段（计划）⏳

💡 收获与反思

技术收获

全栈思维：理解了前后端如何协作
AI 工程：不只是调 API，更是工程问题
问题解决：系统性排查和解决复杂问题
文档习惯：记录过程对学习很重要

职业发展

差异化能力：前端 + AI 的组合很有价值
实习准备：为进入 AI 公司打下基础
学习路径：渐进式学习比跳跃式更有效
产品思维：AI 应用最终要解决实际问题

个人成长

耐心：遇到问题不放弃，逐步解决
主动性：实习要主动学习后端和 AI 实现
系统性：从零开始完整走一遍很有价值
记录：形成文档是最好的学习方式

📝 附录

常用命令

bash 复制代码

# 运行示例
pnpm example:01  # 基础对话
pnpm example:02  # 流式响应
pnpm example:03  # 系统提示词

# 调试环境变量
env | grep ANTHROPIC  # 查看环境变量

项目文件说明

文件	说明
`.env`	环境变量（密钥），不提交 git
`.env.example`	环境变量模板
`package.json`	项目配置和依赖
`tsconfig.json`	TypeScript 配置
`examples/`	学习示例代码
`docs/`	学习文档和笔记

成本估算

Claude Sonnet 3.5 价格：

Input: $3 / 1M tokens
Output: $15 / 1M tokens

示例消耗：

示例 01：112 tokens ≈ $0.0003
示例 02：577 tokens ≈ $0.001
示例 03：~3000 tokens ≈ $0.01

学习预算：

第一阶段：约 $1-2
第二阶段：约 $5-10
总计：$20 以内足够

结语

这次从零开始搭建 AI 学习项目，虽然遇到了各种网络、配置问题，但通过系统性的排查和解决，最终成功运行了三个示例。

最重要的收获不是代码本身，而是：

理解了 AI 应用开发的基本流程
建立了解决复杂问题的方法论
为接下来的深入学习打下基础

下一步：

继续完成第二阶段的学习，重点掌握 Function Calling 和实际应用开发。

文档创建时间：2026-02-02
状态：持续更新中
项目地址：node-ai

Node.js AI 开发入门 - 完整学习笔记

📋 项目概述

🎯 学习目标

为什么学习 AI 开发？

💻 技术栈选择

为什么选择 Node.js？

为什么选择 Claude？

🚀 项目搭建过程

1. 初始化项目

2. 项目结构

3. 配置文件

🐛 遇到的问题与解决方案

问题 1：网络访问被 Cloudflare 拦截

问题 2：环境变量冲突

✅ 最终配置

.env 文件

核心代码模式

📚 完成的学习示例

示例 01：基础对话

示例 02：流式响应

示例 03：系统提示词

🧠 学到的核心知识

1. AI API 调用基础

2. Token 计费

3. 环境变量管理

4. 网络访问方案

🎓 关键经验总结

1. 问题排查方法

2. AI 开发核心技能

3. 学习方法

🚀 下一步计划

第二阶段：AI 工程基础（接下来 2-4 周）

示例 04：Function Calling

示例 05：多工具集成

示例 06：对话记忆

实战项目建议

📖 学习资源

官方文档

推荐学习

社区

🎯 技能检查清单

第一阶段（当前）✅

第二阶段（计划）⏳

💡 收获与反思

技术收获

职业发展

个人成长

📝 附录

常用命令

项目文件说明

成本估算

结语