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);
    }
  }

Previous

Upload files

Next

Over-the-air updates

On this page