Add OpenAI Agents example with TS (#327)

Add OpenAI Agents example with ts

Author: sdserranog

pages/home/oai-agents/overview.mdx

@@ -2,21 +2,39 @@
 title: "Arcade with OpenAI Agents overview"
 description: "Comprehensive guide to using Arcade with the OpenAI Agents library"
 ---
+import { Steps, Tabs } from "nextra/components";
+
 
 # Arcade with OpenAI Agents
 
-The `agents-arcade` package provides a seamless integration between [Arcade](https://arcade.dev) and the [OpenAI Agents Library](https://github.com/openai/openai-python). This integration allows you to enhance your AI agents with powerful Arcade tools including Google Mail, LinkedIn, GitHub, and many more.
+Arcade provides seamless integration with the [OpenAI Agents Library](https://github.com/openai/openai-python) and [OpenAI Agents JS](https://openai.github.io/openai-agents-js/), allowing you to enhance your AI agents with powerful tools including Gmail, LinkedIn, GitHub, and many more. This integration is available through the `agents-arcade` package for Python and our [JavaScript client library](https://github.com/ArcadeAI/arcade-js).
 
 ## Installation
 
 Install the necessary packages to get started:
 
+<Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
+<Tabs.Tab>
+
 ```bash
 pip install agents-arcade arcadepy
 ```
 
+</Tabs.Tab>
+
+<Tabs.Tab>
+
+```bash
+npm install @openai/agents @arcadeai/arcadejs
+```
+
+</Tabs.Tab>
+
+</Tabs>
+
 Make sure you have your Arcade API key ready. [Get an API key](/home/api-keys) if you don't already have one.
 
+
 ## Key features
 
 - **Easy integration** with the OpenAI Agents framework
@@ -29,6 +47,9 @@ Make sure you have your Arcade API key ready. [Get an API key](/home/api-keys) i
 
 Here's a simple example of using Arcade tools with OpenAI Agents:
 
+<Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
+<Tabs.Tab>
+
 ```python
 from agents import Agent, Runner
 from arcadepy import AsyncArcade
@@ -66,8 +87,65 @@ if __name__ == "__main__":
     asyncio.run(main())
 ```
 
+</Tabs.Tab>
+
+<Tabs.Tab>
+
+Check out the complete working example in our [GitHub repository](https://github.com/ArcadeAI/arcade-ai/tree/main/examples/openai-agents-ts/src/index.ts).
+
+```javascript
+import Arcade from '@arcadeai/arcadejs';
+import { executeOrAuthorizeZodTool, toZod } from "@arcadeai/arcadejs/lib";
+import { Agent, run, tool } from '@openai/agents';
+
+// 1) Initialize Arcade client
+const client = new Arcade();
+
+// 2) Fetch Google toolkit from Arcade and prepare tools for OpenAI Agents
+const googleToolkit = await client.tools.list({ toolkit: "google", limit: 30 });
+const arcadeTools = toZod({
+  tools: googleToolkit.items,
+  client,
+  userId: "<YOUR_SYSTEM_USER_ID>", // Replace this with your application's user ID (e.g. email address, UUID, etc.)
+  executeFactory: executeOrAuthorizeZodTool,
+})
+
+// 3) Convert the tools to a format that OpenAI Agents can use
+const tools =  arcadeTools.map(({ name, description, execute, parameters }) =>
+  tool({
+    name,
+    description: description ?? "",
+    parameters: parameters as any,
+    execute,
+    strict: true,
+  }),
+);
+
+// 4) Create a new agent with the Google toolkit
+const googleAgent = new Agent({
+  name: "Google agent",
+  instructions: "You are a helpful assistant that can assist with Google API calls.",
+  model: "gpt-4o-mini",
+  tools
+});
+
+// 5) Run the agent
+const result = await run(googleAgent, "What are my latest emails?");
+
+// 6) Print the result
+console.log(result.finalOutput);
+```
+
+</Tabs.Tab>
+
+</Tabs>
+
+
 ## Handling authorization
 
+<Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
+<Tabs.Tab>
+
 When a user needs to authorize access to a tool (like Google or GitHub), the agent will raise an `AuthorizationError` with a URL for the user to visit:
 
 ```python
@@ -79,6 +157,20 @@ except AuthorizationError as e:
     print(f"Please visit this URL to authorize: {e}")
 ```
 
+</Tabs.Tab>
+
+<Tabs.Tab>
+
+When a user needs to authorize access to a tool (like Google or GitHub), the agent will show a message like this:
+
+```bash
+[Authorize Gmail Access](https://accounts.google.com/o/oauth2/v2/auth?access_type=offline...)
+Once you have authorized access, I can retrieve your latest emails.
+```
+
+</Tabs.Tab>
+</Tabs>
+
 After visiting the URL and authorizing access, the user can run the agent again with the same `user_id`, and it will work without requiring re-authorization.
 
 ## Available toolkits