backup: 2026-03-31

Author: LincZero

.github/workflows/webpage.yml

@@ -119,6 +119,7 @@ jobs:
         env:
           NODE_OPTIONS: --max_old_space_size=20480
         run: |-
+          rm -rf .git
           node -e 'console.log(v8.getHeapStatistics())'
           pnpm run docs:build
           > src/.vuepress/dist/.nojekyll

01. DesignAndDevelop/Develop/04. Project/Type/AI/vercal_ai/个人实战.md

@@ -0,0 +1,171 @@
+---
+create_date: 2026-03-31
+last_date: 2026-03-31
+---
+# 个人实战
+
+可参考: any-menu/ai-app-vue 项目 (这可能是个隐私项目)
+
+## 从零构建 - vue 版
+
+见 https://ai-sdk.dev/docs/getting-started/nuxt
+
+后续均以 pnpm 为例，如果你想要用 npm / yarn / bun 请参照原文
+
+(1) 创建普通的 nuxt vue 应用
+
+> [!WARNING]
+> 
+> 注意 Nuxt 4 和 3 在用法上有些区别。
+> 我看文档时他教的是 3 的做法，但我 `pnpm create nuxt ...` 时创建的是 4 的模板，所以按他教的去做会存在问题
+> 
+> Nuxt 官网文档上的升级指南: https://nuxt.com.cn/docs/4.x/getting-started/upgrade/
+
+```bash
+$ pnpm create nuxt ai-app-vue
+Which template would you like to use?
+│  ● minimal – Minimal setup for Nuxt 4 (recommended)
+Which package manager would you like to use?
+│  ● pnpm (current)
+Initialize git repository?
+│  ● Yes
+Would you like to browse and install modules?
+│  ○ Yes / ● No
+
+$ cd ai-app-vue
+$ pnpm install
+$ pnpm dev # 或 pnpm run dev -- -o
+```
+
+(2) 添加 vercal ai 依赖
+
+```bash
+$ pnpm add ai @ai-sdk/vue zod
+$ touch .env
+
+# 编辑 .env 文件: (xxxxxxxxx 填你的实际 Vercel AI Gateway API 密钥)
+# NUXT_AI_GATEWAY_API_KEY=xxxxxxxxx
+
+# 编辑 nuxt.config.ts:
+# export default defineNuxtConfig({
+#   // rest of your nuxt config
+#   runtimeConfig: {
+#     aiGatewayApiKey: '',
+#   },
+# });
+```
+
+(3) 创建API路由
+
+创建 API 路由 server/api/chat.ts 并添加以下代码：
+
+```ts
+import {
+  streamText,
+  UIMessage,
+  convertToModelMessages,
+  createGateway,
+} from 'ai';
+
+export default defineLazyEventHandler(async () => {
+  const apiKey = useRuntimeConfig().aiGatewayApiKey;
+  if (!apiKey) throw new Error('Missing AI Gateway API key');
+  const gateway = createGateway({
+    apiKey: apiKey,
+  });
+
+  return defineEventHandler(async (event: any) => {
+    const { messages }: { messages: UIMessage[] } = await readBody(event);
+
+    const result = streamText({
+      model: gateway('anthropic/claude-sonnet-4.5'),
+      messages: await convertToModelMessages(messages),
+    });
+
+    return result.toUIMessageStreamResponse();
+  });
+});
+```
+
+(4) 连接UI
+
+原文档基于 Nuxt V3，说让你放 pages/index.vue
+
+> Nuxt V4 放 app/pages/index.vue，并在 app.vue 中添加 `<NuxtPage />`
+> 
+> 参考: https://nuxt.com.cn/docs/4.x/getting-started/views
+
+```vue
+<script setup lang="ts">
+import { Chat } from "@ai-sdk/vue";
+import { ref } from "vue";
+
+const input = ref("");
+const chat = new Chat({});
+
+const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    chat.sendMessage({ text: input.value });
+    input.value = "";
+};
+</script>
+
+<template>
+    <div>
+        <div v-for="(m, index) in chat.messages" :key="m.id ? m.id : index">
+            {{ m.role === "user" ? "User: " : "AI: " }}
+            <div
+                v-for="(part, index) in m.parts"
+                :key="`${m.id}-${part.type}-${index}`"
+            >
+                <div v-if="part.type === 'text'">{{ part.text }}</div>
+            </div>
+        </div>
+
+        <form @submit="handleSubmit">
+            <input v-model="input" placeholder="Say something..." />
+        </form>
+    </div>
+</template>
+```
+
+### 原理
+
+前端的
+
+```ts
+import { Chat } from "@ai-sdk/vue";
+chat.sendMessage(OBJ);
+```
+
+会自动把消息发送给后端的 api 接口
+
+然后后端的
+
+```ts
+export default defineLazyEventHandler(async () => { ... })
+```
+
+定义后端接口
+
+并且在该接口中可以从
+
+```ts
+const { OBJ }: { OBJ_TYPE } = await readBody(event);
+```
+
+中获得前端过来的数据，进行请求。并接返回结果通过返回前端
+
+## 其他 - 切换 api
+
+例如我这里如果想要使用 deepseek:
+
+先找支持的提供商量: https://ai-sdk.dev/docs/foundations/providers-and-models
+
+就发现有: [DeepSeek Provider](https://ai-sdk.dev/providers/ai-sdk-providers/deepseek) (@ai-sdk/deepseek)
+
+然后按链接里的去做就可以了
+
+
+
+