Skip to content

Commit 25a3b4e

Browse files
joaquim-vergesjoaquim-verges
committed
[Docs] Update API endpoints and add frontend/backend examples
1 parent cf22c23 commit 25a3b4e

File tree

32 files changed

+1085
-282
lines changed

32 files changed

+1085
-282
lines changed

‎apps/portal/redirects.mjs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,9 @@ const solidityRedirects = {
341341
"/solidity/extensions/royalty": "/contracts/build/extensions/general/Royalty",
342342

343343
// contracts -> tokens
344-
"/contracts/deploy/:path*": "/contracts/deploy",
344+
"/contracts/deploy/overview": "/contracts/deploy",
345+
"/contracts/deploy/reference": "/contracts/deploy",
346+
"/contracts/deploy/deploy-contract": "/contracts/deploy",
345347
"/contracts/build": "/tokens/build",
346348
"/contracts/build/:path*": "/tokens/build/:path*",
347349
};

‎apps/portal/src/app/Header.tsx

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@ export const connectLinks: Array<{
119119
] as const;
120120

121121
const apisLinks = [
122+
{
123+
href: "https://api.thirdweb.com/reference",
124+
name: "HTTP API",
125+
},
122126
{
123127
href: "https://insight.thirdweb.com/reference",
124128
name: "Insight",
@@ -271,7 +275,7 @@ export function Header() {
271275
}}
272276
>
273277
<NavLink href={link.href} name={link.name} />
274-
{pathname.includes(link.href) && (
278+
{pathname.startsWith(link.href) && (
275279
<div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
276280
)}
277281
</li>
@@ -281,6 +285,22 @@ export function Header() {
281285
</nav>
282286

283287
<div className="flex items-center gap-3">
288+
<div className="px-1">
289+
<DropdownLinks
290+
category="AI"
291+
links={[
292+
{
293+
href: "/ai/mcp",
294+
name: "MCP",
295+
},
296+
{
297+
href: "/ai/llms-txt",
298+
name: "LLMs.txt",
299+
},
300+
]}
301+
onLinkClick={() => setShowBurgerMenu(false)}
302+
/>
303+
</div>
284304
<div className="px-1">
285305
<DropdownLinks
286306
category="SDKs"
@@ -497,7 +517,7 @@ function NavLink(props: {
497517
<Link
498518
className={clsx(
499519
"font-medium text-base transition-colors hover:text-foreground xl:text-sm",
500-
pathname.includes(props.href)
520+
pathname.startsWith(props.href)
501521
? "text-foreground"
502522
: "text-muted-foreground",
503523
props.icon ? "flex flex-row gap-3" : "",

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { createMetadata } from "@doc";
2+
import { BookIcon, ZapIcon } from "lucide-react";
3+
import { DocLayout } from "@/components/Layouts/DocLayout";
4+
5+
export default async function Layout(props: { children: React.ReactNode }) {
6+
return (
7+
<DocLayout
8+
editPageButton={true}
9+
sideBar={{
10+
links: [
11+
{
12+
name: "MCP Server",
13+
icon: <ZapIcon />,
14+
href: "/ai/mcp",
15+
},
16+
{
17+
name: "llms.txt",
18+
icon: <BookIcon />,
19+
href: "/ai/llm-txt",
20+
},
21+
],
22+
name: "AI",
23+
}}
24+
>
25+
<div>{props.children}</div>
26+
</DocLayout>
27+
);
28+
}
29+
30+
export const metadata = createMetadata({
31+
description: "AI tools for agents and LLM clients.",
32+
title: "thirdweb AI",
33+
});

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# llms.txt
2+
3+
Use these llms.txt files to instruct your LLM on how to use the thirdweb API.
4+
5+
### thirdweb API reference
6+
7+
The [thirdweb HTTP API reference](https://api.thirdweb.com/reference) as markdown.
8+
9+
Available at: https://api.thirdweb.com/llms.txt
10+
11+
### Typescript SDK quick reference
12+
13+
Contains a table of contents for the thirdweb Typescript SDK documentation.
14+
15+
Available at: https://portal.thirdweb.com/llms.txt
16+
17+
### Typescript SDK full documentation
18+
19+
Contains the entire thirdweb Typescript SDK documentation as markdown. Requires large context windows.
20+
21+
Available at: https://portal.thirdweb.com/llms-full.txt

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# MCP server
2+
3+
You can use the thirdweb MCP server to interact with the thirdweb API from your agents or LLM client.
4+
5+
### Remote MCP endpoint
6+
7+
You can access the MCP server at the following url, with your project secret key.
8+
9+
```http
10+
# endpoint
11+
POST https://api.thirdweb.com/mcp
12+
13+
# auth header (required)
14+
x-secret-key <your-project-secret-key>
15+
```
16+
17+
### Usage with agents
18+
19+
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.
20+
21+
#### Example usage with langchain:
22+
23+
```python
24+
from langchain_mcp_adapters.client import MultiServerMCPClient
25+
from langgraph.prebuilt import create_react_agent
26+
27+
client = MultiServerMCPClient(
28+
{
29+
"thirdweb-api": {
30+
"transport": "streamable_http",
31+
"url": "https://api.thirdweb-dev.com/mcp",
32+
"headers": {
33+
"x-secret-key": "<your-project-secret-key>"
34+
},
35+
}
36+
}
37+
)
38+
tools = await client.get_tools()
39+
agent = create_react_agent("openai:gpt-4.1", tools)
40+
response = await agent.ainvoke({"messages": "create a server wallet called 'my-wallet'"})
41+
```
42+
43+
### Usage with LLM clients
44+
45+
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.
46+
47+
#### Example usage with Cursor:
48+
49+
Add the following to your `.cursor/mcp.json` file:
50+
51+
```json
52+
{
53+
"mcpServers": {
54+
"thirdweb-api": {
55+
"url": "https://api.thirdweb-dev.com/mcp",
56+
"headers": {
57+
"x-secret-key": "<your-project-secret-key>"
58+
}
59+
}
60+
}
61+
}
62+
```

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

Lines changed: 145 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,161 @@
1-
# Listening to Events
1+
import {
2+
Tabs,
3+
TabsList,
4+
TabsTrigger,
5+
TabsContent,
6+
} from "@doc";
7+
import {
8+
ReactIcon,
9+
TypeScriptIcon,
10+
EngineIcon,
11+
} from "@/icons";
212

3-
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.
13+
# Contract Events
414

5-
```ts
6-
import { getContractEvents, prepareEvent } from "thirdweb";
15+
Query and listen to contract events for any deployed contract on any EVM chain.
716

8-
const myEvent = prepareEvent({
9-
signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
10-
});
17+
<Tabs defaultValue="http">
18+
<TabsList>
19+
<TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
20+
<EngineIcon className="w-4 h-4 mr-2" />
21+
HTTP
22+
</TabsTrigger>
23+
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
24+
<TypeScriptIcon className="w-4 h-4 mr-2" />
25+
TypeScript
26+
</TabsTrigger>
27+
<TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
28+
<ReactIcon className="w-4 h-4 mr-2" />
29+
React
30+
</TabsTrigger>
31+
</TabsList>
1132

12-
const events = await getContractEvents({
13-
contract: myContract,
14-
events: [myEvent],
15-
});
16-
```
33+
<TabsContent value="http">
34+
### Get Contract Events
1735

18-
### Using standard event definitions
36+
You can fetch contract events using the [contract events API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/events).
1937

20-
You can also use the standard event definitions from the SDK to define the events you want to listen to.
38+
```http
39+
GET /v1/contracts/{address}/events?chainId=<chain_id>&decode=true
40+
Host: api.thirdweb.com
41+
x-secret-key: <project-secret-key>
42+
```
2143

22-
```ts
23-
import { getContractEvents } from "thirdweb";
24-
import { transferEvent } from "thirdweb/extensions/erc20";
44+
Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers.
2545

26-
const events = await getContractEvents({
27-
contract: myContract,
28-
events: [transferEvent()],
29-
});
30-
```
46+
#### Parameters
47+
48+
- `address` - The contract address
49+
- `chainId` - The chain ID where the contract is deployed
50+
- `decode` - Whether to decode the event data (optional, defaults to false)
51+
52+
#### Response
53+
54+
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.
55+
56+
</TabsContent>
57+
58+
<TabsContent value="typescript">
59+
### Get Contract Events
60+
61+
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.
62+
63+
```ts
64+
import { getContractEvents, prepareEvent } from "thirdweb";
65+
66+
const myEvent = prepareEvent({
67+
signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
68+
});
69+
70+
const events = await getContractEvents({
71+
contract: myContract,
72+
events: [myEvent],
73+
});
74+
```
75+
76+
### Using standard event definitions
77+
78+
You can also use the standard event definitions from the SDK to define the events you want to listen to.
3179

32-
### Generating all read functions and events for a deployed contract
80+
```ts
81+
import { getContractEvents } from "thirdweb";
82+
import { transferEvent } from "thirdweb/extensions/erc20";
83+
84+
const events = await getContractEvents({
85+
contract: myContract,
86+
events: [transferEvent()],
87+
});
88+
```
89+
90+
### Generating all read functions and events for a deployed contract
3391

3492
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.
3593

3694
```shell
3795
npx thirdweb generate <contractId>/<contractAddress>
3896
```
3997

40-
Read more on how to [generate extension functions using the CLI](/contracts/generate).
98+
Read more on how to [generate extension functions using the CLI](/contracts/generate).
99+
100+
</TabsContent>
101+
102+
<TabsContent value="react">
103+
### Listen to Events
104+
105+
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.
106+
107+
```jsx
108+
import { useContractEvents } from "thirdweb/react";
109+
import { prepareEvent } from "thirdweb";
110+
111+
const myEvent = prepareEvent({
112+
signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
113+
});
114+
115+
function YourComponent() {
116+
const { data: contractEvents } = useContractEvents({
117+
contract,
118+
events: [myEvent],
119+
});
120+
121+
return (
122+
<div>
123+
{contractEvents?.map((event, index) => (
124+
<div key={index}>
125+
Event: {event.eventName}
126+
</div>
127+
))}
128+
</div>
129+
);
130+
}
131+
```
132+
133+
### Using standard event definitions
134+
135+
You can also use the standard event definitions from the SDK.
136+
137+
```jsx
138+
import { useContractEvents } from "thirdweb/react";
139+
import { transferEvent } from "thirdweb/extensions/erc20";
140+
141+
function YourComponent() {
142+
const { data: contractEvents } = useContractEvents({
143+
contract,
144+
events: [transferEvent()],
145+
});
146+
147+
return (
148+
<div>
149+
{contractEvents?.map((event, index) => (
150+
<div key={index}>
151+
Transfer from {event.args.from} to {event.args.to}
152+
</div>
153+
))}
154+
</div>
155+
);
156+
}
157+
```
158+
159+
</TabsContent>
160+
161+
</Tabs>

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,9 @@ export default async function ExtensionPage() {
7070
</TBody>
7171
</Table>
7272
<Paragraph>
73-
More extensions are being added regularly. Anyone can{" "}
74-
<DocLink href="/typescript/v5/extensions/create">
75-
create an extension
76-
</DocLink>{" "}
77-
and contribute it back to the repository. You can also{" "}
78-
<DocLink href="/typescript/v5/extensions/generate">
79-
generate extensions
80-
</DocLink>{" "}
81-
for any deployed contract.
73+
More extensions are being added regularly. You can also{" "}
74+
<DocLink href="/contracts/generate">generate extensions</DocLink> for
75+
any deployed contract.
8276
</Paragraph>
8377
</>
8478
);

0 commit comments

Comments
 (0)