为你的应用添加 AI 功能

你的应用可以和 AI 对话

想构建像 Chronos 这样的 AI 游戏——玩家可以通过策略改写历史？

在 gapp.so 上的应用可以使用 AI 来：

• 与用户对话 — NPC 动态响应
• 生成故事 — 每次游玩都是独特的
• 创建内容 — 文本、图片、决策
• 响应选择 — 游戏根据玩家行为变化

无需 API Key。无需信用卡。无需配置。

如何添加 AI 功能

只需复制这段话，发给你的 AI 编程助手（Claude Code、Cursor、Gemini 等）：

> 阅读这个指南，为我的应用添加 AI 功能：

> https://gapp.so/blog/using-ai-in-your-app#for-ai-assistants

你的 AI 助手会阅读下面的技术细节，并帮你实现一切。

给 AI 助手的指南 {#for-ai-assistants}

你正在帮助用户为 gapp.so 应用添加 AI 功能。请遵循本指南。

工作原理

• gapp.so 会自动代理所有 Gemini API 调用
• 不需要真实的 API Key —— 使用任意占位字符串，如 "gapp"
• 使用官方 @google/generative-ai SDK
• 本地开发和发布后都能正常工作

推荐模型

使用 `gemini-3-flash-preview` 获得最佳的速度和质量平衡。

可用模型

方案一：使用 SDK（如果 npm 可用）

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI("gapp"); // 任意字符串都可以！
const model = genAI.getGenerativeModel({ model: "gemini-3-flash-preview" });

async function chat(userMessage) {
  const result = await model.generateContent(userMessage);
  return result.response.text();
}

// 使用
const response = await chat("你好，给我讲一个小故事。");
console.log(response);

方案二：使用 REST API（无需 npm）

如果 npm install 失败，直接使用 fetch：

async function askAI(message, systemPrompt = '') {
  const response = await fetch('/api/ai/gemini', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      path: '/v1beta/models/gemini-3-flash-preview:generateContent',
      contents: message,
      systemInstruction: systemPrompt || undefined
    })
  });
  
  const data = await response.json();
  return data.candidates?.[0]?.content?.parts?.[0]?.text || '没有响应';
}

// 简单使用
const reply = await askAI('给我讲个笑话');

// 带系统提示
const reply = await askAI(
  '你是谁？', 
  '你是一个奇幻游戏中的神秘NPC。说话要像谜语，保持在50字以内。'
);

多轮对话（REST API）

const history = [];

async function chat(userMessage) {
  // 添加用户消息到历史
  history.push({ role: 'user', parts: [{ text: userMessage }] });
  
  const response = await fetch('/api/ai/gemini', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      path: '/v1beta/models/gemini-3-flash-preview:generateContent',
      contents: history,
      systemInstruction: '你是一个有用的游戏NPC。'
    })
  });
  
  const data = await response.json();
  const reply = data.candidates?.[0]?.content?.parts?.[0]?.text;
  
  // 添加AI响应到历史
  history.push({ role: 'model', parts: [{ text: reply }] });
  
  return reply;
}

React 示例（SDK）

import { useState } from 'react';
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI("gapp");
const model = genAI.getGenerativeModel({ model: "gemini-3-flash-preview" });

function AIChat() {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!input.trim()) return;
    setLoading(true);
    try {
      const result = await model.generateContent(input);
      setResponse(result.response.text());
    } catch (error) {
      setResponse('错误: ' + error.message);
    }
    setLoading(false);
  };

  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入问题..."
      />
      <button onClick={sendMessage} disabled={loading}>
        {loading ? '思考中...' : '发送'}
      </button>
      {response && <p>{response}</p>}
    </div>
  );
}

使用系统指令（更适合游戏）

const model = genAI.getGenerativeModel({ 
  model: "gemini-3-flash-preview",
  systemInstruction: "你是一个奇幻游戏中的神秘NPC。说话要像谜语。回复保持在50字以内。"
});

const chat = model.startChat({
  history: [
    { role: "user", parts: [{ text: "你是谁？" }] },
    { role: "model", parts: [{ text: "我是遗忘之路的守护者..." }] },
  ],
});

const response = await chat.sendMessage("告诉我隐藏的宝藏在哪里。");

最佳实践

1. 添加加载状态 — AI 响应需要 1-3 秒
2. 处理错误 — 用 try/catch 包装，显示友好提示
3. 使用系统指令 — 定义 AI 的性格和约束
4. 保留历史 — 多轮对话时传递聊天记录
5. 设置限制 — 让 AI 保持简短回复，适合游戏

本地测试

代码在本地也能运行。只需安装 SDK：

npm install @google/generative-ai

本地运行时需要真实的 Gemini API Key。但发布到 gapp.so 后，代理会自动处理一切。

常见用例

AI 游戏（像 Chronos）

• 响应玩家选择的 NPC
• 动态故事生成
• 实时世界构建

聊天界面

• 客服机器人
• 语言学习助手
• 创意写作助手

内容生成

• 文本摘要
• 语言翻译
• 创意生成

准备好了？把上面的链接发给你的 AI 助手！