diff --git a/apps/webapp/app/components/integrations/ApiKeyHelp.tsx b/apps/webapp/app/components/integrations/ApiKeyHelp.tsx
index b700c69ad..e9698f5a3 100644
--- a/apps/webapp/app/components/integrations/ApiKeyHelp.tsx
+++ b/apps/webapp/app/components/integrations/ApiKeyHelp.tsx
@@ -36,7 +36,11 @@ export function ApiKeyHelp({
{apiAuth.help.samples.map((sample, i) => (
))}
diff --git a/apps/webapp/app/services/externalApis/integrations/openai.ts b/apps/webapp/app/services/externalApis/integrations/openai.ts
index e5ee7b74d..06787bb46 100644
--- a/apps/webapp/app/services/externalApis/integrations/openai.ts
+++ b/apps/webapp/app/services/externalApis/integrations/openai.ts
@@ -1,3 +1,4 @@
+import { highlight } from "prismjs";
import type { Integration } from "../types";
export const openai: Integration = {
@@ -9,7 +10,57 @@ export const openai: Integration = {
apikey: {
type: "apikey",
help: {
- samples: [],
+ samples: [
+ {
+ title: "Creating the client",
+ code: `
+import { OpenAI } from "@trigger.dev/openai";
+
+const openai = new OpenAI({
+ id: "openai",
+ apiKey: process.env.OPENAI_API_KEY!,
+});
+`,
+ },
+ {
+ title: "Using the client",
+ code: `
+new Job(client, {
+ id: "openai-tasks",
+ name: "OpenAI Tasks",
+ version: "0.0.1",
+ trigger: eventTrigger({
+ name: "openai.tasks",
+ schema: z.object({}),
+ }),
+ integrations: {
+ openai,
+ },
+ run: async (payload, io, ctx) => {
+ //this background function can take longer than a serverless timeout
+ const response = await io.openai.backgroundCreateChatCompletion(
+ "background-chat-completion",
+ {
+ model: "gpt-3.5-turbo",
+ messages: [
+ {
+ role: "user",
+ content: "Create a good programming joke about background jobs",
+ },
+ ],
+ }
+ );
+
+ await io.logger.info("choices", response.choices);
+ },
+});
+ `,
+ highlight: [
+ [10, 10],
+ [13, 24],
+ ],
+ },
+ ],
},
},
},
diff --git a/apps/webapp/app/services/externalApis/types.ts b/apps/webapp/app/services/externalApis/types.ts
index 2ce929759..fbf465de4 100644
--- a/apps/webapp/app/services/externalApis/types.ts
+++ b/apps/webapp/app/services/externalApis/types.ts
@@ -22,7 +22,7 @@ export type ApiAuthenticationMethodApiKey = {
/** The type of authentication method */
type: "apikey";
help: {
- samples: { title: string; code: string }[];
+ samples: { title: string; code: string; highlight?: [number, number][] }[];
};
};