[Docs] Update API endpoints and add frontend/backend examples

apps/portal/redirects.mjs

@@ -341,7 +341,9 @@ const solidityRedirects = {
   "/solidity/extensions/royalty": "/contracts/build/extensions/general/Royalty",
 
   // contracts -> tokens
-  "/contracts/deploy/:path*": "/contracts/deploy",
+  "/contracts/deploy/overview": "/contracts/deploy",
+  "/contracts/deploy/reference": "/contracts/deploy",
+  "/contracts/deploy/deploy-contract": "/contracts/deploy",
   "/contracts/build": "/tokens/build",
   "/contracts/build/:path*": "/tokens/build/:path*",
 };

apps/portal/src/app/Header.tsx

@@ -119,6 +119,10 @@ export const connectLinks: Array<{
 ] as const;
 
 const apisLinks = [
+  {
+    href: "https://api.thirdweb.com/reference",
+    name: "HTTP API",
+  },
   {
     href: "https://insight.thirdweb.com/reference",
     name: "Insight",
@@ -271,7 +275,7 @@ export function Header() {
                   }}
                 >
                   <NavLink href={link.href} name={link.name} />
-                  {pathname.includes(link.href) && (
+                  {pathname.startsWith(link.href) && (
                     <div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
                   )}
                 </li>
@@ -281,6 +285,22 @@ export function Header() {
         </nav>
 
         <div className="flex items-center gap-3">
+          <div className="px-1">
+            <DropdownLinks
+              category="AI"
+              links={[
+                {
+                  href: "/ai/mcp",
+                  name: "MCP",
+                },
+                {
+                  href: "/ai/llms-txt",
+                  name: "LLMs.txt",
+                },
+              ]}
+              onLinkClick={() => setShowBurgerMenu(false)}
+            />
+          </div>
           <div className="px-1">
             <DropdownLinks
               category="SDKs"
@@ -497,7 +517,7 @@ function NavLink(props: {
     <Link
       className={clsx(
         "font-medium text-base transition-colors hover:text-foreground xl:text-sm",
-        pathname.includes(props.href)
+        pathname.startsWith(props.href)
           ? "text-foreground"
           : "text-muted-foreground",
         props.icon ? "flex flex-row gap-3" : "",

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

@@ -0,0 +1,33 @@
+import { createMetadata } from "@doc";
+import { BookIcon, ZapIcon } from "lucide-react";
+import { DocLayout } from "@/components/Layouts/DocLayout";
+
+export default async function Layout(props: { children: React.ReactNode }) {
+  return (
+    <DocLayout
+      editPageButton={true}
+      sideBar={{
+        links: [
+          {
+            name: "MCP Server",
+            icon: <ZapIcon />,
+            href: "/ai/mcp",
+          },
+          {
+            name: "llms.txt",
+            icon: <BookIcon />,
+            href: "/ai/llm-txt",
+          },
+        ],
+        name: "AI",
+      }}
+    >
+      <div>{props.children}</div>
+    </DocLayout>
+  );
+}
+
+export const metadata = createMetadata({
+  description: "AI tools for agents and LLM clients.",
+  title: "thirdweb AI",
+});

apps/portal/src/app/ai/llm-txt/page.mdx

@@ -0,0 +1,21 @@
+# llms.txt
+
+Use these llms.txt files to instruct your LLM on how to use the thirdweb API.
+
+### thirdweb API reference
+
+The [thirdweb HTTP API reference](https://api.thirdweb.com/reference) as markdown. 
+
+Available at: https://api.thirdweb.com/llms.txt
+
+### Typescript SDK quick reference
+
+Contains a table of contents for the thirdweb Typescript SDK documentation.
+
+Available at: https://portal.thirdweb.com/llms.txt
+
+### Typescript SDK full documentation
+
+Contains the entire thirdweb Typescript SDK documentation as markdown. Requires large context windows.
+
+Available at: https://portal.thirdweb.com/llms-full.txt

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

@@ -0,0 +1,63 @@
+# MCP server
+
+You can use the thirdweb MCP server to interact with the thirdweb API from your agents or LLM client.
+
+### Remote MCP endpoint
+
+You can access the MCP server at the following url, with your project secret key.
+
+```http
+# endpoint
+POST /mcp
+Host: api.thirdweb.com
+
+# auth header (required)
+x-secret-key <your-project-secret-key>
+```
+
+### Usage with agents
+
+Use your favorite agent framework to plug in the MCP server as a collection of tools for your agent.  Refer to your agent framework's documentation for more information.
+
+#### Example usage with langchain:
+
+```python
+from langchain_mcp_adapters.client import MultiServerMCPClient
+from langgraph.prebuilt import create_react_agent
+
+client = MultiServerMCPClient(
+    {
+        "thirdweb-api": {
+            "transport": "streamable_http",
+            "url": "https://api.thirdweb-dev.com/mcp",
+            "headers": {
+                "x-secret-key": "<your-project-secret-key>"
+            },
+        }
+    }
+)
+tools = await client.get_tools()
+agent = create_react_agent("openai:gpt-4.1", tools)
+response = await agent.ainvoke({"messages": "create a server wallet called 'my-wallet'"})
+```
+
+### Usage with LLM clients
+
+You can also use the MCP server on your own LLM client, like cursor, claude code and more. Refer to your LLM client's documentation for more information.
+
+#### Example usage with Cursor:
+
+Add the following to your `.cursor/mcp.json` file:
+
+```json
+{
+  "mcpServers": {
+    "thirdweb-api": {
+      "url": "https://api.thirdweb-dev.com/mcp",
+      "headers": {
+        "x-secret-key": "<your-project-secret-key>"
+      }
+    }
+  }
+}
+```

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

@@ -1,40 +1,161 @@
-# Listening to Events
+import {
+	Tabs,
+	TabsList,
+	TabsTrigger,
+	TabsContent,
+} from "@doc";
+import {
+	ReactIcon,
+	TypeScriptIcon,
+	EngineIcon,
+} from "@/icons";
 
-The recommended way to listen to contract events is to use the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. This is type-safe based on the Solidity event signature you define. You can get your desired contract event signature from the solidity code directly.
+# Contract Events
 
-```ts
-import { getContractEvents, prepareEvent } from "thirdweb";
+Query and listen to contract events for any deployed contract on any EVM chain.
 
-const myEvent = prepareEvent({
-  signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
-});
+<Tabs defaultValue="http">
+  <TabsList>
+    <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
+      <EngineIcon className="w-4 h-4 mr-2" />
+      HTTP
+    </TabsTrigger>
+    <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
+      <TypeScriptIcon className="w-4 h-4 mr-2" />
+      TypeScript
+    </TabsTrigger>
+    <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
+      <ReactIcon className="w-4 h-4 mr-2" />
+      React
+    </TabsTrigger>
+  </TabsList>
 
-const events = await getContractEvents({
-  contract: myContract,
-  events: [myEvent],
-});
-```
+  <TabsContent value="http">
+    ### Get Contract Events
 
-### Using standard event definitions
+    You can fetch contract events using the [contract events API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/events).
 
-You can also use the standard event definitions from the SDK to define the events you want to listen to.
+    ```http
+    GET /v1/contracts/{address}/events?chainId=<chain_id>&decode=true
+    Host: api.thirdweb.com
+    x-secret-key: <project-secret-key>
+    ```
 
-```ts
-import { getContractEvents } from "thirdweb";
-import { transferEvent } from "thirdweb/extensions/erc20";
+    Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers.
 
-const events = await getContractEvents({
-  contract: myContract,
-  events: [transferEvent()],
-});
-```
+    #### 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.
+
+  </TabsContent>
+
+  <TabsContent value="typescript">
+    ### Get Contract Events
+
+    You can listen to contract events using the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params.
+
+    ```ts
+    import { getContractEvents, prepareEvent } from "thirdweb";
+
+    const myEvent = prepareEvent({
+      signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
+    });
+
+    const events = await getContractEvents({
+      contract: myContract,
+      events: [myEvent],
+    });
+    ```
+
+    ### Using standard event definitions
+
+    You can also use the standard event definitions from the SDK to define the events you want to listen to.
 
-### Generating all read functions and events for a deployed contract
+    ```ts
+    import { getContractEvents } from "thirdweb";
+    import { transferEvent } from "thirdweb/extensions/erc20";
+
+    const events = await getContractEvents({
+      contract: myContract,
+      events: [transferEvent()],
+    });
+    ```
+
+    ### Generating all read functions and events for a deployed contract
 
 Using the CLI, you can generate optimized functions for all the possible calls to a contract. This saves you time and precomputes all the necessary encoding.
 
 ```shell
 npx thirdweb generate <contractId>/<contractAddress>
 ```
 
-Read more on how to [generate extension functions using the CLI](/contracts/generate).
+Read more on how to [generate extension functions using the CLI](/contracts/generate).
+
+  </TabsContent>
+
+  <TabsContent value="react">
+    ### Listen to Events
+
+    You can listen to contract events using the [`useContractEvents`](/references/typescript/v5/useContractEvents) hook. This hook will automatically poll for new events and update the component state.
+
+    ```jsx
+    import { useContractEvents } from "thirdweb/react";
+    import { prepareEvent } from "thirdweb";
+
+    const myEvent = prepareEvent({
+      signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
+    });
+
+    function YourComponent() {
+      const { data: contractEvents } = useContractEvents({
+        contract,
+        events: [myEvent],
+      });
+
+      return (
+        <div>
+          {contractEvents?.map((event, index) => (
+            <div key={index}>
+              Event: {event.eventName}
+            </div>
+          ))}
+        </div>
+      );
+    }
+    ```
+
+    ### Using standard event definitions
+
+    You can also use the standard event definitions from the SDK.
+
+    ```jsx
+    import { useContractEvents } from "thirdweb/react";
+    import { transferEvent } from "thirdweb/extensions/erc20";
+
+    function YourComponent() {
+      const { data: contractEvents } = useContractEvents({
+        contract,
+        events: [transferEvent()],
+      });
+
+      return (
+        <div>
+          {contractEvents?.map((event, index) => (
+            <div key={index}>
+              Transfer from {event.args.from} to {event.args.to}
+            </div>
+          ))}
+        </div>
+      );
+    }
+    ```
+
+  </TabsContent>
+
+</Tabs>

apps/portal/src/app/contracts/extensions/page.tsx

@@ -70,15 +70,9 @@ export default async function ExtensionPage() {
         </TBody>
       </Table>
       <Paragraph>
-        More extensions are being added regularly. Anyone can{" "}
-        <DocLink href="/typescript/v5/extensions/create">
-          create an extension
-        </DocLink>{" "}
-        and contribute it back to the repository. You can also{" "}
-        <DocLink href="/typescript/v5/extensions/generate">
-          generate extensions
-        </DocLink>{" "}
-        for any deployed contract.
+        More extensions are being added regularly. You can also{" "}
+        <DocLink href="/contracts/generate">generate extensions</DocLink> for
+        any deployed contract.
       </Paragraph>
     </>
   );