AI Wrapper

AI Wrapper | Expo Starter

iOS

Web

Android

ExpoStarter comes with AI backend that allows you to use AI services in your app. The AI backend is can make requests to OpenAI's and Anthropic's API.

Add OpenAI API Key

.env

OPENAI_API_KEY=XXX
PROMPT_LIMIT=1000
MAX_TOKENS=100

This key is used to authenticate your requests to the OpenAI API and is only used on the backend, ensuring it is not exposed to the client.

Usage

Create your custom function to interact with the AI service.

packages/api/routes/ai.ts

 
const openai = new OpenAIChatApi(
  { apiKey: env.OPENAI_API_KEY },
  { model: env.OPENAI_MODEL, 
    maxTokens: env.MAX_TOKENS 
  },
);
 
const response = await completion(openai, prompt, {
  systemMessage : "As FlashCards AI, your primary role is to transform educational material into flashcards...",
  schema: z.object({
    error: z.string().describe("Error description").optional(),
    title: z
      .string()
      .describe("The name of deck, should be short")
      .max(60),
    description: z
      .string()
      .describe("Short description of the desk")
      .max(500),
    cards: z.array(
      z.object({
        question: z
          .string()
          .max(500)
          .describe("The question of the card, in short sentence"),
        answer: z
          .string()
          .max(500)
          .describe("The answer of the card, in short sentence"),
      }),
    ),
  }),
});

Call the function from your frontend

apps/expo/app/ai.tsx

 
const mutation = trpc.ai.generate.useMutation();
 
async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const data = await mutation.mutateAsync({
        theme: values.theme,
        cardNumber: 5,
        language: "en",
      });
    } catch (e) {
      console.error(e);
    }
  }

AI Wrapper

Add OpenAI API Key

Usage

Call the function from your frontend

On this page