Skip to content

Commit 0ecfead

Browse files
committed
docs: Update JSON endpoint documentation with new examples and structure
1 parent e013509 commit 0ecfead

File tree

1 file changed

+140
-47
lines changed

1 file changed

+140
-47
lines changed

src/content/docs/browser-rendering/rest-api/json-endpoint.mdx

Lines changed: 140 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,33 +19,41 @@ The `/json` endpoint extracts structured data from a webpage. You can specify th
1919

2020
### With a Prompt and JSON schema
2121

22-
This example captures webpage data by providing both a prompt and a JSON schema. If multiple headings exist, the first occurrence of each (such as `h1`, `h2`) is returned.
22+
This example captures webpage data by providing both a prompt and a JSON schema. The prompt guides the extraction process, while the JSON schema defines the expected structure of the output.
2323

2424
```bash
2525
curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID/browser-rendering/json' \
2626
--header 'authorization: Bearer CF_API_TOKEN' \
2727
--header 'content-type: application/json' \
2828
--data '{
29-
"url": "http://demoto.xyz/headings",
30-
"prompt": "Get the heading from the page. If there are many then grab the first one.",
31-
"response_format": {
32-
"type": "json_schema",
33-
"json_schema": {
29+
"url": "https://developers.cloudflare.com/",
30+
"prompt": "Get me the list of AI products",
31+
"response_format": {
32+
"type": "json_schema",
33+
"json_schema": {
3434
"type": "object",
3535
"properties": {
36-
"h1": {
37-
"type": "string"
38-
},
39-
"h2": {
40-
"type": "string"
36+
"products": {
37+
"type": "array",
38+
"items": {
39+
"type": "object",
40+
"properties": {
41+
"name": {
42+
"type": "string"
43+
},
44+
"link": {
45+
"type": "string"
46+
}
47+
},
48+
"required": [
49+
"name"
50+
]
51+
}
4152
}
42-
},
43-
"required": [
44-
"h1"
45-
]
53+
}
4654
}
47-
}
48-
}'
55+
}
56+
}'
4957
```
5058

5159
#### JSON response
@@ -54,23 +62,44 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
5462
{
5563
"success": true,
5664
"result": {
57-
"h1": "Heading 1",
58-
"h2": "Heading 2"
65+
"products": [
66+
{
67+
"name": "Build a RAG app",
68+
"link": "https://developers.cloudflare.com/workers-ai/tutorials/build-a-retrieval-augmented-generation-ai/"
69+
},
70+
{
71+
"name": "Workers AI",
72+
"link": "https://developers.cloudflare.com/workers-ai/"
73+
},
74+
{
75+
"name": "Vectorize",
76+
"link": "https://developers.cloudflare.com/vectorize/"
77+
},
78+
{
79+
"name": "AI Gateway",
80+
"link": "https://developers.cloudflare.com/ai-gateway/"
81+
},
82+
{
83+
"name": "AI Playground",
84+
"link": "https://playground.ai.cloudflare.com/"
85+
}
86+
]
5987
}
6088
}
6189
```
6290

6391
### With only a prompt
6492

65-
In this example, only a prompt is provided. The endpoint will use the prompt to extract the heading information from the page.
93+
In this example, only a prompt is provided. The endpoint will use the prompt to extract the data, but the response will not be structured according to a JSON schema.
94+
This is useful for simple extractions where you don't need a specific format.
6695

6796
```bash
6897
curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID/browser-rendering/json' \
6998
--header 'authorization: Bearer CF_API_TOKEN' \
7099
--header 'content-type: application/json' \
71100
--data '{
72-
"url": "http://demoto.xyz/headings",
73-
"prompt": "Get the heading from the page in the form of an object like h1, h2. If there are many headings of the same kind then grab the first one."
101+
"url": "https://developers.cloudflare.com/",
102+
"prompt": "get me the list of AI products"
74103
}'
75104
```
76105

@@ -80,8 +109,13 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
80109
{
81110
"success": true,
82111
"result": {
83-
"h1": "Heading 1",
84-
"h2": "Heading 2"
112+
"AI Products": [
113+
"Build a RAG app",
114+
"Workers AI",
115+
"Vectorize",
116+
"AI Gateway",
117+
"AI Playground"
118+
]
85119
}
86120
}
87121
```
@@ -94,25 +128,30 @@ In this case, you supply a JSON schema via the `response_format` parameter. The
94128
curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID/browser-rendering/json' \
95129
--header 'authorization: Bearer CF_API_TOKEN' \
96130
--header 'content-type: application/json' \
97-
--data '{
98-
"url": "http://demoto.xyz/headings",
99-
"response_format": {
100-
"type": "json_schema",
101-
"json_schema": {
131+
--data '"response_format": {
132+
"type": "json_schema",
133+
"json_schema": {
102134
"type": "object",
103135
"properties": {
104-
"h1": {
105-
"type": "string"
106-
},
107-
"h2": {
108-
"type": "string"
136+
"products": {
137+
"type": "array",
138+
"items": {
139+
"type": "object",
140+
"properties": {
141+
"name": {
142+
"type": "string"
143+
},
144+
"link": {
145+
"type": "string"
146+
}
147+
},
148+
"required": [
149+
"name"
150+
]
151+
}
109152
}
110-
},
111-
"required": [
112-
"h1"
113-
]
153+
}
114154
}
115-
}
116155
}'
117156
```
118157

@@ -122,14 +161,68 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
122161
{
123162
"success": true,
124163
"result": {
125-
"h1": "Heading 1",
126-
"h2": "Heading 2"
164+
"products": [
165+
{
166+
"name": "Workers",
167+
"link": "https://developers.cloudflare.com/workers/"
168+
},
169+
{
170+
"name": "Pages",
171+
"link": "https://developers.cloudflare.com/pages/"
172+
},
173+
{
174+
"name": "R2",
175+
"link": "https://developers.cloudflare.com/r2/"
176+
},
177+
{
178+
"name": "Images",
179+
"link": "https://developers.cloudflare.com/images/"
180+
},
181+
{
182+
"name": "Stream",
183+
"link": "https://developers.cloudflare.com/stream/"
184+
},
185+
{
186+
"name": "Build a RAG app",
187+
"link": "https://developers.cloudflare.com/workers-ai/tutorials/build-a-retrieval-augmented-generation-ai/"
188+
},
189+
{
190+
"name": "Workers AI",
191+
"link": "https://developers.cloudflare.com/workers-ai/"
192+
},
193+
{
194+
"name": "Vectorize",
195+
"link": "https://developers.cloudflare.com/vectorize/"
196+
},
197+
{
198+
"name": "AI Gateway",
199+
"link": "https://developers.cloudflare.com/ai-gateway/"
200+
},
201+
{
202+
"name": "AI Playground",
203+
"link": "https://playground.ai.cloudflare.com/"
204+
},
205+
{
206+
"name": "Access",
207+
"link": "https://developers.cloudflare.com/cloudflare-one/policies/access/"
208+
},
209+
{
210+
"name": "Tunnel",
211+
"link": "https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/"
212+
},
213+
{
214+
"name": "Gateway",
215+
"link": "https://developers.cloudflare.com/cloudflare-one/policies/gateway/"
216+
},
217+
{
218+
"name": "Browser Isolation",
219+
"link": "https://developers.cloudflare.com/cloudflare-one/policies/browser-isolation/"
220+
},
221+
{
222+
"name": "Replace your VPN",
223+
"link": "https://developers.cloudflare.com/learning-paths/replace-vpn/concepts/"
224+
}
225+
]
127226
}
128227
}
129228
```
130-
131-
## Potential use-cases
132-
133-
1. **Extract movie data:** Retrieve details like name, genre, and release date for the top 10 action movies from the IMDB top 250 list by supplying the appropriate IMDB link and JSON schema.
134-
2. **Weather information:** Fetch current weather conditions for a location (such as., Edinburgh) using a weather website link (like from BBC Weather).
135-
3. **Trending news:** Extract top trending posts on Hacker News by providing the Hacker News link along with a JSON schema that includes post title and body.

0 commit comments

Comments
 (0)