❌

阅读视图

发现新文章，点击刷新页面。

通过英伟达平台免费调用 GLM4.7 教程

✇掘金 前端
子洋

前言

最近在折腾 AI Agent 和模型接入相关的事情时，意外发现英伟达居然提供了一个面向开发者、可以免费调用模型 API 的平台。更关键的是，这个平台上不仅能用到一些主流开源模型，还能直接使用最近热度很高，号称开源 Coding 能力最强的 GLM4.7，以及综合表现相当稳的 minimax-m2.1。

说实话，在如今 API 几乎全面 token 计费、随便一个复杂任务就轻松几十万甚至上百万 token 的背景下，这种可以正经做开发实验、不用一上来就烧钱的平台，对个人开发者和学习阶段的人来说非常友好。所以这篇文章主要做三件事：

  • 介绍 NVIDIA Build 平台本身能做什么
  • 记录从注册到实际调用 API 的完整流程
  • 分享一段真实使用下来的模型体验与限制

整体偏实践，结论也会尽量基于实际使用情况展开。

NVIDIA Build 模型平台

NVIDIA Build可以理解为英伟达官方提供的一个模型集成与调试平台。平台上已经部署了大量模型，涵盖文生文（Chat / Reasoning / Coding）、文生图 / 图生文、语音相关等模型。目前平台上可见的模型数量在 200+，基本覆盖了市面上主流的开源模型生态，例如：deepseek-R1 / deepseek-v3.x、qwen3 / qwen-coder、kimi-k2、minimax-m2.1、z-ai/glm4.7，平台本身还提供了在线 Playground（支持参数调节、tools 调用）、OpenAI 风格的 API 接口、模型示例代码一键生成等能力。

注册账号与 API Key 申请

账号注册说明

注意：疑似因为近期注册用户激增，新账号存在一定概率无法正常申请 API Key 的问题。在不影响账号合规性的前提下，比较稳妥的做法是使用非国内常见的邮箱注册，例如相对少见的邮箱（yeah.net），或国外邮箱(gmail.com)等，以及注册时使用浏览器无痕窗口，避免历史状态干扰。

创建账号

访问：build.nvidia.com/ ，点击左上角 Login。

在弹窗中输入邮箱并点击 Next，随后填写注册信息并完成人机验证。

这里需要注意：在“更多注册选项”中可以看到 QQ、微信等方式，但不建议使用第三方快捷登录。在当前阶段，使用这些方式注册后，账号更容易出现 API 权限受限的情况。

完成注册后，会进入一些偏个性化设置的步骤（例如名称、偏好选项），按需填写即可。

如果账号状态正常，稍等片刻后，页面顶部会出现提示：

Please verify your account to get API access

点击右上角的 Verify 进入验证流程。

手机号验证

在验证弹窗中，将默认的 +1 修改为 +86，输入国内手机号即可。这里不需要刻意规避，国内手机号是可以正常通过验证的。

点击 Send Code via SMS，完成验证码验证。

创建 API Key

验证完成后，点击右上角头像，进入 API Keys 管理页面。

如果账号状态正常，这里可以看到 Generate API Key 按钮。

点击后，输入一个 Key 名称（仅用于区分），过期时间选择 Never Expire。

生成完成后，复制并妥善保存该 API Key，后续调用只会展示一次。

如果在 API Keys 页面完全看不到生成按钮，而是类似下图所示的提示界面，基本可以确认该账号当前无法使用 API 功能，建议更换账号重新注册。

使用 API Key 调用

本地客户端配置

只要是支持 OpenAI 风格接口的客户端基本都可以直接使用，我这里以 Jan 为例。

进入设置页，添加一个新的模型提供商。

  • Provider Name：自定义（例如 Nvidia）
  • API Key：填写刚刚生成的 Key
  • Base URL：https://integrate.api.nvidia.com/v1

完成后添加模型。

例如添加 GLM4.7：

z-ai/glm4.7

新建会话并选择该模型后，即可正常对话。从体感上看，在普通对话场景下 token 输出速度非常快。

获取模型列表

Jan 也支持直接调用 /models 接口获取模型列表，点击刷新即可自动拉取并添加。

需要注意的是：

  • /models 返回的是平台全量模型列表
  • 其中包含文生图、语音、多模态等模型
  • 并非所有模型都支持 chat / text-to-text

因此，如果在客户端中直接选择不支持 chat 的模型发送消息，会直接报错，这是模型能力不匹配，不是接口问题。

Playground 与模型调试

在 NVIDIA Build 平台的 Models 页面中，可以通过搜索 Chat / Reasoning 筛选支持的模型，或者在 Playground 页面的左上角看到所有支持文生文的模型列表。

以 kimi-k2 为例，点击模型后可以进入在线调试界面。

  • 左侧 Tools：可启用模型支持的工具
  • 右侧 Parameters：控制温度、最大 token 等参数

点击右上角 View Code，可以直接看到对应的 API 调用示例，包括 Base URL、Model ID、Messages 结构等。

Tools 调用示例

在部分模型中可以直接启用 tools，这里以 minimax-m2 为例演示。

启用 get_current_weather 工具后，询问某地天气，模型会自动进行 tools 规划与调用，并返回结果。

再次点击 View Code，可以看到完整的 tools 调用示例代码。

模型与接口

NVIDIA Build 提供的是 OpenAI 风格 API，接口层面兼容 chat.completions / responses，是否支持 chat、tools、多模态，取决于模型本身。所以，最稳妥的方式仍然是在平台 Models 页面中筛选 chat / reasoning，再决定是否接入到本地客户端或代码中。

使用体验与限制

说一下 GLM4.7 这个模型。它并不是我第一次用，在刚发布不久时我就已经通过一些第三方 API 供应商接触过，这次算是第二次较完整地使用。综合两次实际开发体验，说实话体感并不算好。

首先一个比较明显的问题是，在我目前常用的模型里（比如 qwen-code、gpt-5.1、gpt-5.2、Claude 等），只有 GLM4.7 会在生成的文件头部插入 Markdown 的代码块标记。这个问题在代码编辑和文件生成场景下尤其影响体验，需要额外清理，看起来就很蠢。

其次是执行效率问题，这一点让我感觉很奇怪。纯对话场景下它的响应速度是很快的，但一旦进入干活模式，比如稍微复杂一点的任务编排、代码修改或多步执行，单个任务可能会跑十几甚至二十分钟。问题不在于我不能接受模型执行复杂任务耗时，而是过程中偶尔会出现明显的停顿或卡住一段时间再继续，节奏非常不稳定。

一开始我也怀疑是 API 调用频率或限流导致的，但后来在同样的客户端、同样的任务复杂度下切换到 minimax-m2，发现并不是这个原因。minimax 的整体执行节奏要顺畅得多，调用也更激进，甚至可以轻松跑到 40 次 / 分钟 的平台上限，当然代价就是一旦规划稍微激进，就很容易直接撞上限流，接口报错，任务中断。

从平台层面来看，这个平台整体体验其实是非常不错的：模型选择多、接入成本低、示例清晰，对学习和实验阶段的开发者非常友好。平台的限制也比较直观明确，比如 API 调用频率限制在 40 次 / 分钟，超出后直接返回错误，这一点在 minimax-m2 上体现得尤为明显。

回到 GLM4.7 本身，客观来说它的功能是完全正常的：工具调用没问题，代码编辑能用，对话速度也快，只是在复杂任务执行阶段明显偏慢，且稳定性不够好。相比之下，minimax-m2 在相同条件下执行节奏更线性、更听话，只是更容易触发平台限流 （当然了，因为频繁触发限流所以我也没深度使用 minimax）。

总结来说，GLM4.7 并不是不能干活，但实际开发体验一般，尤其是在需要长时间、连续执行任务的场景下，效率和节奏上的问题会被放大。

结语

实话说，这个平台在当前这个时间点，真的算是相当良心的存在。对想学习 AI Agent、工具调用、多模型编排的开发者来说，能够在不额外付费的情况下反复试错，本身就很有价值。

当然了，平台策略和风控状态可能随时变化，如果只是想白嫖一点体验，建议还是尽早注册，至少在账号状态正常的前提下，把 API Key 拿到手。

至于模型怎么选，建议多试、多对比，别迷信单一模型。能稳定把活干完的模型，才是好模型。

相关链接

Nuxt 写后端

✇掘金 前端
江湖文人

写接口

// server/api/test.ts

export default defineEventHandler(async (event) => {
  // 写这个接口的逻辑
})

可以直接返回text、json、html、stream（文件流等流）。

放心好了，nuxt支持热模块替换和自动导入。改代码直接看到效果。无需手动写import语句。

// vue
<script setup>
// 要写import
import { ref } from 'vue'
import MyButton from '@/components/MyButton.vue'
import { useFetch } from '@/composables/useFetch'

const count = ref(0)
const { data } = useFetch('/api/data')
</script>

<template>
  <MyButton>点击</MyButton>
</template>

Nuxt的自动导入

<script setup>
const count = ref(0) // 自动从`vue`导入ref
const { data } = useFetch('/api/data') // 自动从 composables/ 导入
</script>

<template>
  <MyButton>点击</MyButton>
</template>

Nuxt自动导入了哪些

  • Vue API：ref、computed、onMounted等

  • Nuxt Composables：useFetch、useAsyncData等

  • Vue Router：useRouter、useRoute

  • 组件：components/目录下的所有组件

  • 工具函数：utils/或composables/目录下的函数

  • VueUse：如果安装了@vueuse/nuxt

<template>
  <div>
    <h1>{{ title }}</h1>
    <MyComponent />
  </div>
</template>

<script setup>
// 1. 不需要导入 MyComponent - 自动导入
// 2. 修改后页面局部更新 - HMR
const title = ref('欢迎') // ref 也是自动导入的
</script>

部署 - 通用

云服务器构建Nuxt应用

  • Cloudflare
  • Netlify
  • Edge

混合渲染

自定义路由

// nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // 为 SEO 目的在构建时生成
    '/': { prerender: true },
    '/api/*': { cache: { maxAge: 60 * 60 } },
    '/old-page': {
      redirect: { to: '/new-page', statusCode: 302 }
    }
  }
})

目录结构

  • 通过nuxt.config和app.config在项目之间共享可重用的配置预设。
  • 用components/目录做组件库。
  • 用composables/和utils/目录创建工具和组合式函数库。
  • 用layers/目录做项目的层

每个层的srcDir都会自动创建命名的层别名。可以用#layers/test访问~~/layers/test层。

也可以自定义nuxt.config文件去设置添加extends去加一个层：

// nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    '../base', // 从本地层去加
    '@my-themes/awesome', // 从安装的包去加
    'github:my-themes/awesome#v1' // 从git库中加
  ]
})

github私有库的要加token

// nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    '../base', // 从本地层去加
    '@my-themes/awesome', // 从安装的包去加
    ['github:my-themes/awesome#v1': { auth: process.env.GITHUB_TOKEN }] // 从git库中加
  ]
})

起别名

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

预渲染

Nuxt允许页面在构建时进行静态渲染，提高SEO。

为啥选Nuxt。它SEO优秀啊。在应用中，我们可以选几个页面在构建时进行渲染。有请求时，Nuxt会提供预构建的页面，而不是动态生它们。

基于爬取的预渲染

用nuxt generate命令。通过Nitro爬虫去建和预渲染应用。

建站点，启动一个nuxt实例。

选择性预渲染

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/user/1", "/user/2"],
      ignore: ["/dynamic"],
    },
  },
});

详细说一下nuxt generate是干啥的

✇掘金 前端
江湖文人

nuxt generate 是 Nuxt.js 框架的一个**静态站点生成（Static Site Generation, SSG）**命令。我来详细解释一下它的含义和作用：

是什么？

nuxt generate 命令会将你的 Nuxt 应用预渲染为静态 HTML 文件。它会：

  • 为每个路由生成对应的 HTML 文件
  • 将生成的静态文件保存在 dist/ 目录中
  • 包含必要的 CSS、JavaScript 和资源文件

主要作用

1. 性能优化

  • 预生成的 HTML 文件无需服务器端渲染，加载速度极快
  • CDN 友好，可以轻松缓存
  • 减少服务器压力和响应时间

2. SEO 优化

  • 搜索引擎可以直接抓取静态 HTML 内容
  • 更好的 SEO 表现（相比于纯客户端渲染）

3. 部署简单

  • 生成的文件可以部署到任何静态主机：
    • Netlify、Vercel、GitHub Pages
    • AWS S3、Firebase Hosting
    • Nginx、Apache 等传统服务器

4. 成本效益

  • 无需专门的 Node.js 服务器
  • 可以使用廉价的静态托管服务

使用场景

适合使用 nuxt generate：

✅ 内容型网站：博客、文档、营销页面
✅ 数据不频繁变化：产品展示页、公司官网
✅ 需要优秀 SEO 的应用
✅ 高访问量 的只读页面

不适合使用（需要考虑 SSR 或 CSR）：

❌ 用户个性化内容：每个用户看到的内容不同
❌ 实时数据：股票行情、聊天应用
❌ 频繁更新：社交媒体动态
❌ 需要身份验证 的页面（可通过混合模式解决）

基本使用

# 生成静态文件
nuxt generate

# 生成后预览
nuxt generate && nuxt start

# 构建并生成（常用）
npm run generate
# 在 package.json 中通常配置为：
# "scripts": {
#   "generate": "nuxt generate"
# }

配置示例

// nuxt.config.js
export default {
  target: 'static', // 明确指定为静态站点
  generate: {
    // 动态路由需要指定
    routes: [
      '/users/1',
      '/users/2',
      '/blog/post-1'
    ],
    // 或者异步获取路由
    async routes() {
      const posts = await $fetch('/api/posts')
      return posts.map(post => `/blog/${post.id}`)
    }
  }
}

工作流程

执行 nuxt generate
    ↓
Nuxt 启动构建过程
    ↓
为每个路由生成 HTML
    ↓
提取 CSS 和 JavaScript
    ↓
保存到 dist/ 目录
    ↓
完成！可以部署到任何静态主机

与 nuxt build 的区别

  • nuxt generate：生成静态 HTML 文件，用于静态托管
  • nuxt build：构建应用，用于服务器端渲染（SSR）部署

高级特性

1. 混合模式 

// 部分页面静态生成，部分页面动态渲染
export default {
  generate: {
    exclude: [
      '/dashboard',  // 这个页面保持动态
      '/admin/**'    // 所有 admin 页面都动态
    ]
  }
}

2. 增量静态再生

可以通过定时任务重新生成部分页面。

实际示例

# 1. 创建 Nuxt 项目
npx nuxi@latest init my-static-site

# 2. 安装依赖
cd my-static-site
npm install

# 3. 生成静态文件
npm run generate

# 4. 查看生成的文件
ls -la dist/
# 会看到 index.html, about.html 等

# 5. 本地测试生成的文件
npx serve dist/

总之，nuxt generate 是 Nuxt.js 强大的静态站点生成功能，特别适合需要优秀性能、SEO 和低成本部署的场景。对于适合静态化的项目，它能提供极佳的用户体验。

Nuxt state状态如何管理，3秒手把手帮你

✇掘金 前端
江湖文人

用useState。有响应式和支持ssr共享。

useState是支持ssr的ref替代方案。其中，在后端渲染后（前端水合）会被保留，并通过唯一键在所有组件之间共享。

useState中的数据将序列化为JSON。

例子

基本用法

用组件本地的计算器状态。任何用useState('counter')的组件都共享相同的响应式状态。

// app.vue
<script setup lang="ts">
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>

<template>
  <div>
    计算器：{{ counter }}
    <button @click="counter++">
      +
    </button>
    <button @click="counter--">
      -
    </button>
  </div>
</template>

初始化状态

异步解析去初始化状态。

// app.vue
<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

与Pinia一起用

在Pinia 模块创建全局存储并在整个应用中使用它。

// stores/website.ts
export const useWebsiteStore = defineStore('websiteStore', {
  state: () => ({
    name: '',
    description: ''
  }),
  actions: {
    async fetch() {
      const infos = await $fetch('https://api.nuxt.com/modules/pinia')
      
      this.name = infos.name
      this.description = infos.description
    }
  }
})

高级用法

// composables/locale.ts

export const useLocale = () => {
  return useState('locale', () => useDefaultLocale().value)
}

export cosnt useDefautLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  return locale
}

export const useLocales = () => {
  const locale = useLocale()
  const locales = ref([
    'en-US',
    'en-GB',
    ...
  ])
  if (!locales.value.includes(locale.value)) {
    locales.value.unshift(locale.value)
  }
  return locales
}

export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
  return computed(() => new Intl.DateTimeFormat(locale.value, {
    dateStyle: 'full'
  }).format(unref(date)))
}

// app.vue
<script setup lang="ts">
const locales = useLocales()
const locale = useLocale()
const date = useLocaleDate(new Date('2026-1-16'))
</script>

<template>
  <div>
    <h1>生日</h1>
    <p>{{ date }}</p>
    <label for="locale-chooser">语言</label>
    <select id="locale-chooser" v-model="locale">
      <option v-for="loc of locales" :key="loc" :value="loc">
        {{ loc }}
      </option>
    </select>
  </div>
</template>

共享状态

自动导入的组合式函数

// composables/states.ts

export const useColor = () => useState<string>('color', () => 'pink')

// app.vue
<script setup lang="ts">
const useColor = () => useState<string>('color', () => 'pink')

const color = useColor() // 与 useState('color')相同
</script>

<template>
  <p>{{ color }}</p>
</template>

用库 - 第三方的

  • Pinia
  • Harlem
  • XState
❌