[Docs] Replace custom API endpoint with OpenAPI component

Author: joaquim-verges

apps/portal/src/app/ai/chat/EndpointMetadata.tsx

@@ -1,31 +1,28 @@
-import { EndpointMetadata } from "./EndpointMetadata";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@doc";
+import { Tabs, TabsContent, TabsList, TabsTrigger, OpenApiEndpoint } from "@doc";
 
 # Chat API
 
-The thirdweb AI chat API is a standard OpenAI-compatible chat completion API that allows you to interact with the thirdweb AI model, specialized for blockchain interactions.
-
-The thirdweb proprietary model is optimized for blockchain interactions and can:
+The thirdweb AI chat API is a standard OpenAI-compatible chat completion API that allows you to interact with the thirdweb AI model, optimized for blockchain interactions.
 
 - Query real-time data from the blockchain
 - Analyze transactions
 - Fetch token balances, prices and metadata
 - Prepare any contract call or transaction for signing
-- Prepare swaps from any token pair
+- Prepare swaps from/to any token pair
 - Deploy contracts
 - Generate images
-- Search the web for information
+- Search the web
 - And more!
 
-You can use the API with the API directly, or with any OpenAI-compatible client library.
+You can use the API with the HTTP API directly, or with any OpenAI-compatible client library.
 
 <Tabs defaultValue="api">
   <TabsList>
     <TabsTrigger value="api">HTTP API</TabsTrigger>
     <TabsTrigger value="openai">OpenAI Client</TabsTrigger>
   </TabsList>
   <TabsContent value="api">
-    <EndpointMetadata />
+    <OpenApiEndpoint path="/ai/chat" method="POST" specUrl="https://api.thirdweb-dev.com/openapi.json" />
   </TabsContent>
   <TabsContent value="openai">
 
@@ -50,4 +47,9 @@ chat_completion = client.chat.completions.create(
 print(chat_completion)
 ```
   </TabsContent>
-</Tabs>
+</Tabs>
+
+### Going further
+
+- [Handle streaming responses](/ai/chat/streaming)
+- [Full API Reference](https://api.thirdweb-dev.com/reference#tag/ai/post/ai/chat)

apps/portal/src/app/ai/chat/page.mdx

@@ -13,8 +13,8 @@ export const sidebar: SideBar = {
           icon: <ZapIcon />,
         },
         {
-          name: "Response Handling",
-          href: "/ai/chat/handling-responses",
+          name: "Streaming Responses",
+          href: "/ai/chat/streaming",
         },
         {
           name: "API Reference",

apps/portal/src/app/ai/chat/handling-responses/page.mdx renamed to apps/portal/src/app/ai/chat/streaming/page.mdx

@@ -3,6 +3,7 @@ import {
 	TabsList,
 	TabsTrigger,
 	TabsContent,
+	OpenApiEndpoint,
 } from "@doc";
 import {
 	ReactIcon,
@@ -31,27 +32,7 @@ Query and listen to contract events for any deployed contract on any EVM chain.
   </TabsList>
 
   <TabsContent value="http">
-    ### Get Contract Events
-
-    You can fetch contract events using the [contract events API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/events).
-
-    ```http
-    GET /v1/contracts/{address}/events?chainId=<chain_id>&decode=true
-    Host: api.thirdweb.com
-    x-secret-key: <project-secret-key>
-    ```
-
-    Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers.
-
-    #### Parameters
-
-    - `address` - The contract address
-    - `chainId` - The chain ID where the contract is deployed
-    - `decode` - Whether to decode the event data (optional, defaults to false)
-
-    #### Response
-
-    The API returns a list of events that have been emitted by the specified contract, including event details and decoded function calls when `decode=true` is specified.
+   <OpenApiEndpoint path="/v1/contracts/{chainId}/{address}/events" method="GET" />
 
   </TabsContent>
 

apps/portal/src/app/ai/sidebar.tsx

@@ -10,6 +10,7 @@ import {
 	TabsList,
 	TabsTrigger,
 	TabsContent,
+	OpenApiEndpoint,
 } from "@doc";
 import {
 	ReactIcon,
@@ -67,89 +68,10 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain.
   </TabsList>
 
   <TabsContent value="http">
-    ### Read a Contract
-
-    You can read contract data efficiently using the [contract read API](https://api.thirdweb.com/reference#tag/contracts/post/v1/contracts/read).
-
-    ```http
-    GET /v1/contracts/read
-    Host: api.thirdweb.com
-    Content-Type: application/json
-    x-client-id: <your-project-client-id>
-
-    {
-        "chainId": "1" // your chain id
-        "calls": [{
-          "contractAddress": "0x...",
-          "method": "function allowance(address owner, address spender)",
-          "params": ["0x...", "0x..."],
-        }],
-    }
-    ```
-
-	You can batch multiple contract reads in a single request, and the response will be an array of results or errors.
-
-  Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers.
-
-	### Write to a Contract
-
-	You can write to a contract using the [contract write API](https://api.thirdweb.com/reference#tag/contracts/post/v1/contracts/write).
-
-<Tabs defaultValue="frontend">
-      <TabsList>
-        <TabsTrigger value="frontend">Frontend</TabsTrigger>
-        <TabsTrigger value="backend">Backend</TabsTrigger>
-      </TabsList>
 
-      <TabsContent value="frontend">
-
-      On the frontend, use your project client ID and the users's auth token to send a transaction on their behalf.
-
-      ```http
-      POST /v1/contracts/write
-      Host: api.thirdweb.com
-      Content-Type: application/json
-      x-client-id: <your-project-client-id>
-      Authorization: Bearer <user-auth-token>
-
-      {
-        "from": "0x...", // the user wallet address
-        "chainId": "1" // the chain id
-        "calls": [{
-          "contractAddress": "0x...",
-          "method": "function transfer(address to, uint256 amount)",
-          "params": ["0x...", "1000000000000000000"],
-        }],
-      }
-      ```
-
-      </TabsContent>
-
-      <TabsContent value="backend">
-
-      On the backend, use your project secret key to send a transaction from any of your server wallets.
-
-      ```http
-      POST /v1/contracts/write
-      Host: api.thirdweb.com
-    Content-Type: application/json
-    x-secret-key: <your-project-secret-key>
-
-    {
-        "from": "0x...", // your server wallet address
-        "chainId": "1" // your chain id
-        "calls": [{
-          "contractAddress": "0x...",
-          "method": "function transfer(address to, uint256 amount)",
-          "params": ["0x...", "1000000000000000000"],
-        }],
-    }
-    ```
-
-      </TabsContent>
-    </Tabs>
+    <OpenApiEndpoint path="/v1/contracts/read" method="POST" />
 
-	You can batch multiple contract writes in a single request, and the transactions will be batched atomically onchain.
+	<OpenApiEndpoint path="/v1/contracts/write" method="POST" />
 
   </TabsContent>
 

apps/portal/src/app/contracts/events/page.mdx

@@ -3,6 +3,7 @@ import {
 	TabsList,
 	TabsTrigger,
 	TabsContent,
+	OpenApiEndpoint,
 } from "@doc";
 import {
 	EngineIcon,
@@ -21,27 +22,7 @@ Query all transactions for any deployed contract on any EVM chain.
   </TabsList>
 
   <TabsContent value="http">
-    ### Get Contract Transactions
-
-    You can fetch all transactions for a contract using the [contract transactions API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/transactions).
-
-    ```http
-    GET /v1/contracts/{address}/transactions?chainId=<chain_id>&decode=true
-    Host: api.thirdweb.com
-    x-secret-key: <project-secret-key>
-    ```
-
-    Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers.
-
-    #### Parameters
-
-    - `address` - The contract address
-    - `chainId` - The chain ID where the contract is deployed
-    - `decode` - Whether to decode the transaction data (optional, defaults to false)
-
-    #### Response
-
-    The API returns a list of transactions that have interacted with the specified contract, including transaction details and decoded function calls when `decode=true` is specified.
+    <OpenApiEndpoint path="/v1/contracts/{chainId}/{address}/transactions" method="GET" />
 
   </TabsContent>
 </Tabs>

apps/portal/src/app/contracts/page.mdx

@@ -1,4 +1,10 @@
-import { ArrowUpRightIcon, BotIcon, WebhookIcon, ZapIcon } from "lucide-react";
+import {
+  ArrowUpRightIcon,
+  BotIcon,
+  MessageCircleIcon,
+  WebhookIcon,
+  ZapIcon,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { Heading } from "@/components/Document";
@@ -16,7 +22,6 @@ import { BridgeIcon } from "../icons/products/BridgeIcon";
 import { ConnectIcon } from "../icons/products/ConnectIcon";
 import { EngineIcon } from "../icons/products/EngineIcon";
 import { InsightIcon } from "../icons/products/InsightIcon";
-import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
 import DocsHeroDark from "./_images/docs-hero-dark.png";
 import DocsHeroLight from "./_images/docs-hero-light.png";
 
@@ -25,7 +30,7 @@ export default function Page() {
     <main className="container max-w-5xl grow pb-20" data-noindex>
       <Hero />
       <div className="space-y-8">
-        <PlaygroundSection />
+        <AISection />
         <LearningResourcesSection />
         <ReferenceSection />
       </div>
@@ -70,20 +75,19 @@ function Hero() {
   );
 }
 
-function PlaygroundSection() {
+function AISection() {
   return (
     <section>
-      <SectionTitle anchorId="playground" title="Quick Starts" />
+      <SectionTitle anchorId="ai" title="AI" />
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         <ArticleCardIndex
-          description="Try out our interactive playground to get started"
-          external
-          href="https://playground.thirdweb.com"
-          icon={PlaygroundIcon}
-          title="Playground"
+          description="Integrate the most advanced blockchain model into your applications"
+          href="/ai/chat"
+          icon={MessageCircleIcon}
+          title="Chat API"
         />
         <ArticleCardIndex
-          description="For agents and humans: use the thirdweb API with natural language"
+          description="For agents and humans. Use the thirdweb API with natural language"
           href="/ai/mcp"
           icon={BotIcon}
           title="MCP"