Add AI Features to Your App

Your App Can Talk to AI

Want to build something like Chronos — an AI-powered game where players rewrite history through strategy?

Apps on gapp.so can use AI to:

• Chat with users — NPCs that respond dynamically
• Generate stories — Every playthrough is unique
• Create content — Text, images, decisions
• React to choices — The game changes based on what players do

No API key. No credit card. No configuration.

How to Add AI Features

Just copy this and send it to your AI coding assistant (Claude Code, Cursor, Gemini, etc.):

> Read this guide and add AI features to my app:

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

Your AI assistant will read the technical details below and implement everything for you.

For AI Assistents {#for-ai-assistants}

You are helping add AI features to a gapp.so app. Follow this guide.

How It Works

• gapp.so automatically proxies all Gemini API calls
• No real API key is needed — use any placeholder string like "gapp"
• Use official @google/generative-ai SDK
• It works both locally and when published

Recommended Model

Use `gemini-3-flash-preview` for best balance of speed and quality.

Available Models

Option 1: Using the SDK (if npm is available)

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

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

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

// Usage
const response = await chat("Hello, tell me a short story.");
console.log(response);

Option 2: Using REST API (no npm required)

If npm install fails, use fetch directly:

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 || 'No response';
}

// Simple usage
const reply = await askAI('Tell me a joke');

// With system prompt
const reply = await askAI(
  'Who are you?', 
  'You are a mysterious NPC in a fantasy game. Keep responses under 50 words.'
);

Multi-turn Conversation (REST API)

const history = [];

async function chat(userMessage) {
  // Add user message to history
  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: 'You are a helpful game NPC.'
    })
  });
  
  const data = await response.json();
  const reply = data.candidates?.[0]?.content?.parts?.[0]?.text;
  
  // Add AI response to history
  history.push({ role: 'model', parts: [{ text: reply }] });
  
  return reply;
}

React Example (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: ' + error.message);
    }
    setLoading(false);
  };

  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)}
        placeholder="Ask something..."
      />
      <button onClick={sendMessage} disabled={loading}>
        {loading ? 'Thinking...' : 'Send'}
      </button>
      {response && <p>{response}</p>}
    </div>
  );
}

With System Instruction (Better for Games)

const model = genAI.getGenerativeModel({ 
  model: "gemini-3-flash-preview",
  systemInstruction: "You are a mysterious NPC in a fantasy game. Speak in riddles. Keep responses under 50 words."
});

const chat = model.startChat({
  history: [
    { role: "user", parts: [{ text: "Who are you?" }] },
    { role: "model", parts: [{ text: "I am the keeper of forgotten paths..." }] },
  ],
});

const response = await chat.sendMessage("Tell me about hidden treasure.");

Best Practices

1. Add loading states — AI responses take 1-3 seconds
2. Handle errors — Wrap in try/catch, show friendly messages
3. Use system instructions — Define AI's personality and constraints
4. Keep history — For multi-turn conversations, pass chat history
5. Set limits — Ask AI to keep responses short for games

Local Testing

The code works locally too. Just install the SDK:

npm install @google/generative-ai

When running locally, you'll need a real Gemini API key. But once published to gapp.so, the proxy handles everything automatically.

Common Use Cases

AI-Powered Games (Like Chronos)

• NPCs that respond to player choices
• Dynamic story generation
• World-building on the fly

Chat Interfaces

• Customer support bots
• Language tutors
• Creative writing assistants

Content Generation

• Summarize text
• Translate languages
• Generate ideas

Ready to build? Just send the link above to your AI assistant!