Rork × Gemini Agents SDK: Integrating Multi-Step AI Agents into Your Mobile App

# Gemini AI SDK (latest Google Generative AI)
npm install @google/generative-ai
 
# Agent functionality extensions (ADK-compatible wrapper)
npm install @google/generative-ai-agents
 
# Session management and persistence
npm install @react-native-async-storage/async-storage
 
# Streaming-capable UI components
npm install react-native-reanimated

# .env (exclude from version control)
GEMINI_API_KEY=YOUR_GEMINI_API_KEY_HERE
 
# For Expo (direct client exposure is discouraged; use a backend proxy instead)
EXPO_PUBLIC_API_BASE_URL=https://your-api.workers.dev

// src/agents/tools/weatherTool.ts
import { FunctionDeclaration, Type } from "@google/generative-ai";
 
export const weatherTool: FunctionDeclaration = {
  name: "get_current_weather",
  description:
    "Retrieves current weather information for a specified city or region. " +
    "Use this when the user asks about the weather or is planning an outing or trip.",
  parameters: {
    type: Type.OBJECT,
    properties: {
      location: {
        type: Type.STRING,
        description: "City name or region (e.g., 'Tokyo', 'New York', 'London, UK')",
      },
      unit: {
        type: Type.STRING,
        enum: ["celsius", "fahrenheit"],
        description: "Temperature unit. Defaults to celsius.",
      },
    },
    required: ["location"],
  },
};
 
// The actual API call implementation
export async function executeWeatherTool(args: {
  location: string;
  unit?: string;
}): Promise<object> {
  // Using the free Open-Meteo API
  const geocodeRes = await fetch(
    `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(args.location)}&count=1`
  );
  const geocodeData = await geocodeRes.json();
 
  if (!geocodeData.results?.length) {
    return { error: `No location found for "${args.location}"` };
  }
 
  const { latitude, longitude, name, country } = geocodeData.results[0];
  const weatherRes = await fetch(
    `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,weather_code,wind_speed_10m&timezone=auto`
  );
  const weatherData = await weatherRes.json();
  const current = weatherData.current;
 
  return {
    location: `${name}, ${country}`,
    temperature: current.temperature_2m,
    unit: args.unit || "celsius",
    wind_speed: current.wind_speed_10m,
    weather_code: current.weather_code,
    // WMO codes: 0=clear, 1-3=partly cloudy, 61-67=rain, 71-77=snow
  };
}

// src/agents/GeminiAgent.ts
import {
  GoogleGenerativeAI,
  GenerativeModel,
  ChatSession,
  FunctionCallingMode,
  Part,
} from "@google/generative-ai";
import { weatherTool, executeWeatherTool } from "./tools/weatherTool";
 
// Tool execution map (name → handler function)
const TOOL_HANDLERS: Record<string, (args: any) => Promise<any>> = {
  get_current_weather: executeWeatherTool,
};
 
export interface AgentMessage {
  role: "user" | "model";
  content: string;
  toolCalls?: Array<{ name: string; args: object; result: object }>;
  timestamp: number;
}
 
export class GeminiAgent {
  private model: GenerativeModel;
  private chat: ChatSession | null = null;
  private messageHistory: AgentMessage[] = [];
 
  constructor(private apiKey: string) {
    const genAI = new GoogleGenerativeAI(this.apiKey);
    this.model = genAI.getGenerativeModel({
      model: "gemini-2.0-flash",
      systemInstruction: this.buildSystemInstruction(),
      tools: [{ functionDeclarations: [weatherTool] }],
      toolConfig: {
        functionCallingConfig: {
          // AUTO: model decides autonomously when to use tools (recommended)
          mode: FunctionCallingMode.AUTO,
        },
      },
      generationConfig: {
        maxOutputTokens: 2048,
        temperature: 0.7,
      },
    });
  }
 
  private buildSystemInstruction(): string {
    return `You are a helpful and capable AI assistant.
When answering user questions, use the available tools as needed to provide accurate, up-to-date information.
 
Guidelines:
- When you use a tool, explain its results naturally in your response
- Avoid stating uncertain information as fact; use phrases like "it appears that..." when unsure
- Respect user privacy and avoid collecting unnecessary personal information
- For complex questions, break them down into manageable steps`;
  }
 
  startSession(history?: Array<{ role: string; parts: Part[] }>) {
    this.chat = this.model.startChat({ history: history || [] });
    this.messageHistory = [];
  }
 
  async sendMessage(userMessage: string): Promise<AgentMessage> {
    if (!this.chat) this.startSession();
 
    const userEntry: AgentMessage = {
      role: "user",
      content: userMessage,
      timestamp: Date.now(),
    };
    this.messageHistory.push(userEntry);
 
    let result = await this.chat!.sendMessage(userMessage);
    const toolCalls: AgentMessage["toolCalls"] = [];
 
    // Function Calling loop — continues while model requests tool calls
    while (true) {
      const response = result.response;
      const functionCalls = response.functionCalls();
 
      if (!functionCalls || functionCalls.length === 0) {
        break; // No more tool calls → we have the final answer
      }
 
      // Execute multiple tools in parallel
      const toolResults = await Promise.all(
        functionCalls.map(async (call) => {
          const handler = TOOL_HANDLERS[call.name];
          if (!handler) {
            return {
              name: call.name,
              response: { error: `Unknown tool: ${call.name}` },
            };
          }
          const toolResult = await handler(call.args);
          toolCalls.push({ name: call.name, args: call.args, result: toolResult });
          return { name: call.name, response: toolResult };
        })
      );
 
      // Return tool results to the model to continue generation
      result = await this.chat!.sendMessage(
        toolResults.map((tr) => ({
          functionResponse: { name: tr.name, response: tr.response },
        }))
      );
    }
 
    const modelEntry: AgentMessage = {
      role: "model",
      content: result.response.text(),
      toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
      timestamp: Date.now(),
    };
    this.messageHistory.push(modelEntry);
    return modelEntry;
  }
 
  getHistory(): AgentMessage[] {
    return [...this.messageHistory];
  }
}

// src/agents/AgentSessionManager.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
import { AgentMessage } from "./GeminiAgent";
 
interface Session {
  id: string;
  title: string;
  messages: AgentMessage[];
  createdAt: number;
  updatedAt: number;
}
 
const SESSION_KEY_PREFIX = "agent_session_";
const SESSION_LIST_KEY = "agent_session_list";
const MAX_SESSIONS = 20;
 
export class AgentSessionManager {
  static async saveSession(session: Session): Promise<void> {
    const key = `${SESSION_KEY_PREFIX}${session.id}`;
    await AsyncStorage.setItem(key, JSON.stringify(session));
 
    const list = await this.getSessionList();
    const updatedList = [
      session.id,
      ...list.filter((id) => id !== session.id),
    ].slice(0, MAX_SESSIONS);
    await AsyncStorage.setItem(SESSION_LIST_KEY, JSON.stringify(updatedList));
 
    // Clean up oldest sessions beyond the limit
    const toDelete = list.slice(MAX_SESSIONS);
    await Promise.all(
      toDelete.map((id) =>
        AsyncStorage.removeItem(`${SESSION_KEY_PREFIX}${id}`)
      )
    );
  }
 
  static async loadSession(sessionId: string): Promise<Session | null> {
    const data = await AsyncStorage.getItem(`${SESSION_KEY_PREFIX}${sessionId}`);
    return data ? JSON.parse(data) : null;
  }
 
  static async getSessionList(): Promise<string[]> {
    const data = await AsyncStorage.getItem(SESSION_LIST_KEY);
    return data ? JSON.parse(data) : [];
  }
 
  static async getAllSessions(): Promise<Session[]> {
    const list = await this.getSessionList();
    const sessions = await Promise.all(list.map((id) => this.loadSession(id)));
    return sessions.filter((s): s is Session => s !== null);
  }
 
  static toGeminiHistory(
    messages: AgentMessage[]
  ): Array<{ role: string; parts: any[] }> {
    return messages.map((msg) => ({
      role: msg.role,
      parts: [{ text: msg.content }],
    }));
  }
 
  static generateTitle(messages: AgentMessage[]): string {
    const firstUserMsg = messages.find((m) => m.role === "user");
    if (!firstUserMsg) return "New conversation";
    return firstUserMsg.content.slice(0, 30) + (firstUserMsg.content.length > 30 ? "…" : "");
  }
}

// src/agents/GeminiAgentStream.ts
 
export class GeminiAgentStream extends GeminiAgent {
  async sendMessageStream(
    userMessage: string,
    onChunk: (text: string) => void,
    onComplete: (message: AgentMessage) => void,
    onError: (error: Error) => void
  ): Promise<void> {
    if (!this.chat) this.startSession();
 
    try {
      const result = await this.chat!.sendMessageStream(userMessage);
      let fullText = "";
 
      for await (const chunk of result.stream) {
        const chunkText = chunk.text();
        if (chunkText) {
          fullText += chunkText;
          onChunk(chunkText);
        }
      }
 
      const modelEntry: AgentMessage = {
        role: "model",
        content: fullText,
        timestamp: Date.now(),
      };
      onComplete(modelEntry);
    } catch (error) {
      onError(error instanceof Error ? error : new Error(String(error)));
    }
  }
}

// src/agents/tools/taskTools.ts
import { FunctionDeclaration, Type } from "@google/generative-ai";
 
export const taskTools: FunctionDeclaration[] = [
  {
    name: "create_task",
    description:
      "Creates a new task. Use this when the user says something like 'add a task to...', 'remind me to...', or 'I need to...'.",
    parameters: {
      type: Type.OBJECT,
      properties: {
        title: { type: Type.STRING, description: "The task title" },
        due_date: {
          type: Type.STRING,
          description: "Due date in ISO 8601 format (e.g., '2026-04-10'). Omit if not specified.",
        },
        priority: {
          type: Type.STRING,
          enum: ["high", "medium", "low"],
          description: "Task priority. Defaults to medium.",
        },
      },
      required: ["title"],
    },
  },
  {
    name: "list_tasks",
    description: "Retrieves a list of tasks, optionally filtered by status or priority.",
    parameters: {
      type: Type.OBJECT,
      properties: {
        status: {
          type: Type.STRING,
          enum: ["all", "pending", "completed"],
          description: "Filter tasks by status",
        },
        priority: {
          type: Type.STRING,
          enum: ["high", "medium", "low", "all"],
          description: "Filter tasks by priority",
        },
      },
    },
  },
  {
    name: "complete_task",
    description: "Marks a specified task as completed.",
    parameters: {
      type: Type.OBJECT,
      properties: {
        task_id: { type: Type.STRING, description: "The task ID to complete" },
      },
      required: ["task_id"],
    },
  },
];

// src/screens/AIAssistantScreen.tsx
import React, { useState, useRef, useCallback } from "react";
import {
  View,
  Text,
  TextInput,
  FlatList,
  TouchableOpacity,
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
} from "react-native";
import { GeminiAgent, AgentMessage } from "../agents/GeminiAgent";
import { AgentSessionManager } from "../agents/AgentSessionManager";
 
const API_BASE = process.env.EXPO_PUBLIC_API_BASE_URL!;
 
async function fetchApiKey(): Promise<string> {
  const res = await fetch(`${API_BASE}/api/agent-token`, {
    headers: { Authorization: `Bearer ${await getUserToken()}` },
  });
  const { token } = await res.json();
  return token; // Short-lived token (15-minute expiry)
}
 
export function AIAssistantScreen() {
  const [messages, setMessages] = useState<AgentMessage[]>([]);
  const [inputText, setInputText] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const agentRef = useRef<GeminiAgent | null>(null);
  const listRef = useRef<FlatList>(null);
 
  const initAgent = useCallback(async () => {
    if (!agentRef.current) {
      const apiKey = await fetchApiKey();
      agentRef.current = new GeminiAgent(apiKey);
      agentRef.current.startSession();
    }
  }, []);
 
  const sendMessage = async () => {
    if (!inputText.trim() || isLoading) return;
    const text = inputText.trim();
    setInputText("");
    setIsLoading(true);
 
    const userMsg: AgentMessage = {
      role: "user",
      content: text,
      timestamp: Date.now(),
    };
    setMessages((prev) => [...prev, userMsg]);
 
    try {
      await initAgent();
      const response = await agentRef.current!.sendMessage(text);
      setMessages((prev) => [...prev, response]);
 
      const allMessages = [...messages, userMsg, response];
      await AgentSessionManager.saveSession({
        id: "current",
        title: AgentSessionManager.generateTitle(allMessages),
        messages: allMessages,
        createdAt: allMessages[0].timestamp,
        updatedAt: Date.now(),
      });
    } catch (error) {
      const errMsg: AgentMessage = {
        role: "model",
        content: "Sorry, something went wrong. Please try again.",
        timestamp: Date.now(),
      };
      setMessages((prev) => [...prev, errMsg]);
    } finally {
      setIsLoading(false);
      listRef.current?.scrollToEnd({ animated: true });
    }
  };
 
  const renderMessage = ({ item }: { item: AgentMessage }) => (
    <View
      style={[
        styles.messageBubble,
        item.role === "user" ? styles.userBubble : styles.modelBubble,
      ]}
    >
      {item.toolCalls && item.toolCalls.length > 0 && (
        <View style={styles.toolCallBadge}>
          <Text style={styles.toolCallText}>
            🔧 {item.toolCalls.map((t) => t.name).join(", ")}
          </Text>
        </View>
      )}
      <Text style={item.role === "user" ? styles.userText : styles.modelText}>
        {item.content}
      </Text>
    </View>
  );
 
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <FlatList
        ref={listRef}
        data={messages}
        keyExtractor={(item) => item.timestamp.toString()}
        renderItem={renderMessage}
        contentContainerStyle={styles.messageList}
      />
      {isLoading && (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="small" color="#4285F4" />
          <Text style={styles.loadingText}>AI is thinking...</Text>
        </View>
      )}
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={inputText}
          onChangeText={setInputText}
          placeholder="Type a message..."
          multiline
          maxLength={1000}
        />
        <TouchableOpacity
          style={[
            styles.sendButton,
            (!inputText.trim() || isLoading) && styles.sendButtonDisabled,
          ]}
          onPress={sendMessage}
          disabled={!inputText.trim() || isLoading}
        >
          <Text style={styles.sendButtonText}>Send</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#f5f5f5" },
  messageList: { padding: 16, paddingBottom: 8 },
  messageBubble: {
    maxWidth: "85%",
    borderRadius: 16,
    padding: 12,
    marginBottom: 8,
  },
  userBubble: {
    alignSelf: "flex-end",
    backgroundColor: "#4285F4",
    borderBottomRightRadius: 4,
  },
  modelBubble: {
    alignSelf: "flex-start",
    backgroundColor: "#ffffff",
    borderBottomLeftRadius: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  userText: { color: "#ffffff", fontSize: 15, lineHeight: 22 },
  modelText: { color: "#1a1a1a", fontSize: 15, lineHeight: 22 },
  toolCallBadge: {
    backgroundColor: "#e8f0fe",
    borderRadius: 8,
    padding: 4,
    marginBottom: 6,
  },
  toolCallText: { color: "#4285F4", fontSize: 11, fontWeight: "600" },
  loadingContainer: {
    flexDirection: "row",
    alignItems: "center",
    padding: 12,
    gap: 8,
  },
  loadingText: { color: "#666", fontSize: 13 },
  inputContainer: {
    flexDirection: "row",
    padding: 12,
    backgroundColor: "#fff",
    borderTopWidth: 1,
    borderTopColor: "#e0e0e0",
    gap: 8,
    alignItems: "flex-end",
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 10,
    fontSize: 15,
    maxHeight: 100,
    backgroundColor: "#fafafa",
  },
  sendButton: {
    backgroundColor: "#4285F4",
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 10,
    justifyContent: "center",
  },
  sendButtonDisabled: { backgroundColor: "#b0c4f8" },
  sendButtonText: { color: "#fff", fontSize: 15, fontWeight: "600" },
});

// src/utils/apiRetry.ts
export async function withRetry<T>(
  fn: () => Promise<T>,
  maxRetries = 3,
  baseDelayMs = 1000
): Promise<T> {
  let lastError: Error;
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error: any) {
      lastError = error;
      if (error?.status === 429 && attempt < maxRetries) {
        // Exponential backoff + jitter
        const delay = baseDelayMs * Math.pow(2, attempt) + Math.random() * 500;
        await new Promise((r) => setTimeout(r, delay));
        continue;
      }
      throw error;
    }
  }
  throw lastError!;
}

async function compressHistory(
  messages: AgentMessage[],
  agent: GeminiAgent
): Promise<AgentMessage[]> {
  if (messages.length <= 20) return messages;
 
  const toSummarize = messages.slice(0, -10);
  const summaryRequest = `Summarize this conversation in 3-5 sentences:\n${toSummarize
    .map((m) => `${m.role}: ${m.content}`)
    .join("\n")}`;
  const summary = await agent.sendMessage(summaryRequest);
 
  return [
    {
      role: "model",
      content: `[Summary of earlier conversation]: ${summary.content}`,
      timestamp: Date.now(),
    },
    ...messages.slice(-10),
  ];
}

async function fetchWithTimeout(
  url: string,
  options: RequestInit = {},
  timeoutMs = 5000
): Promise<Response> {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
  try {
    return await fetch(url, { ...options, signal: controller.signal });
  } finally {
    clearTimeout(timeoutId);
  }
}