Skip to content

Commit b3db164

Browse files
vfanelleValerie FanelleValerie Fanelle
authored
New Overview Page for Arcade's Reference Documentation (#483)
* Getting main code to work due to error loading new Arcade Docs logo * Added an overview for the API and Arcade MCP reference documentation * Address Rachel Lee's PR feedback: Removing animatino on pop-up cards and changing MCP Client SDK CTA buttons' text to follow 'View [type] Reference' format as earlier buttons. * Reverting back to the original Arcade logo * Removing extra agent framework folders from sidebar * Fold Arcade Clients from the side and top nav bars into the overview reference page --------- Co-authored-by: Valerie Fanelle <[email protected]> Co-authored-by: Valerie Fanelle <[email protected]>
1 parent 91ca9d1 commit b3db164

File tree

10 files changed

+182
-38
lines changed

10 files changed

+182
-38
lines changed

‎app/en/_meta.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,13 @@ const meta: MetaRecord = {
1616
title: "MCP Servers",
1717
href: "/mcp-servers",
1818
},
19-
clients: {
20-
type: "page",
21-
title: "Clients",
22-
href: "/home/arcade-clients",
23-
},
2419
reference: {
2520
type: "page",
2621
title: "API Reference",
27-
href: "https://reference.arcade.dev/",
22+
href: "/references",
23+
},
24+
references: {
25+
display: "hidden",
2826
},
2927
};
3028

‎app/en/home/_meta.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,6 @@ export const meta: MetaRecord = {
9696
"arcade-cli": {
9797
title: "Arcade CLI",
9898
},
99-
"arcade-clients": {
100-
title: "Arcade Clients",
101-
},
10299
"-- Hosting options": {
103100
type: "separator",
104101
title: "Hosting options",

‎app/en/home/arcade-clients/page.mdx‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎app/en/home/faq/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ We're always looking for new tools and MCP Servers! If you have a tool that you
2020

2121
## What is the difference between the Arcade CLI and the Arcade Clients?
2222

23-
The [Arcade CLI](/home/arcade-cli) is a command line tool that makes it easy to build, test, and deploy your own tools to production. The [Arcade Client libraries](/home/arcade-clients) are what you will use within your own agents and applications to call the tools.
23+
The [Arcade CLI](/home/arcade-cli) is a command line tool that makes it easy to build, test, and deploy your own tools to production. The [Arcade Client libraries](/references) are what you will use within your own agents and applications to call the tools.
2424

2525
## What is the difference between personal API keys and project API keys?
2626

‎app/en/home/glossary/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ graph TD
141141

142142
The 'Arcade client' is the SDK that you use to interact with the Arcade platform. It is how your agent lists and calls tools, tied back to your project via an API key. We offer clients for many popular languages and frameworks, including Python, JavaScript, and more.
143143

144-
_Learn more about [the Arcade clients](/home/arcade-clients)._
144+
_Learn more about [the Arcade clients](/references)._
145145

146146
### Arcade Engine
147147

‎app/en/home/use-tools/types-of-tools/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Arcade offers two types of tools:
1010
- Starter tools
1111
- Optimized tools
1212

13-
The distinction is merely a matter of how they are designed. Both types of tools can be used seamlessly in the same way. There is no difference in their interfaces, the way they are called, or how you interact with them through the Arcade [Dashboard](https://api.arcade.dev/dashboard/) or the Arcade [SDK clients](/home/arcade-clients).
13+
The distinction is merely a matter of how they are designed. Both types of tools can be used seamlessly in the same way. There is no difference in their interfaces, the way they are called, or how you interact with them through the Arcade [Dashboard](https://api.arcade.dev/dashboard/) or the Arcade [SDK clients](/references).
1414

1515
Before we understand the two types, let's first understand the background for why we need to differentiate between them.
1616

‎app/en/references/_meta.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { MetaRecord } from "nextra";
2+
3+
export const meta: MetaRecord = {
4+
"*": {
5+
theme: {
6+
breadcrumb: false,
7+
layout: "full",
8+
toc: false,
9+
copyPage: false,
10+
},
11+
},
12+
};
13+
14+
export default meta;

‎app/en/references/page.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
"use client";
2+
import { Button } from "@arcadeai/design-system";
3+
import Link from "next/link";
4+
5+
export default function APIReferencePage() {
6+
return (
7+
<div className="container mx-auto px-4 py-12">
8+
<div className="mx-auto max-w-4xl">
9+
<h1 className="mb-4 font-extrabold text-4xl text-gray-900 tracking-tight md:text-5xl dark:text-white">
10+
API Reference
11+
</h1>
12+
<p className="mb-12 text-gray-600 text-lg dark:text-gray-300">
13+
Complete reference documentation for Arcade's APIs and SDKs.
14+
</p>
15+
16+
<div className="space-y-8">
17+
{/* Engine API Section */}
18+
<div className="rounded-lg border border-gray-200 bg-white p-8 shadow-sm transition-all hover:border-[#ee175e]/30 hover:shadow-md dark:border-gray-800 dark:bg-[rgba(17,17,17,0.8)]">
19+
<h3 className="mb-4 font-bold text-2xl text-gray-900 dark:text-white">
20+
Engine API
21+
</h3>
22+
<p className="mb-6 text-gray-600 leading-relaxed dark:text-gray-300">
23+
The Engine API is Arcade's REST API for orchestrating tools,
24+
managing authentication, and controlling agent workflows at
25+
runtime. Use this API to integrate Arcade's tool execution and
26+
permission management into your agent applications.
27+
</p>
28+
<div className="flex flex-wrap gap-3">
29+
<Button
30+
asChild
31+
className="bg-primary text-white hover:bg-primary/90"
32+
>
33+
<Link href="https://reference.arcade.dev/">
34+
View API Reference
35+
</Link>
36+
</Button>
37+
</div>
38+
</div>
39+
40+
{/* MCP Server SDK Section */}
41+
<div className="rounded-lg border border-gray-200 bg-white p-8 shadow-sm transition-all hover:border-[#ee175e]/30 hover:shadow-md dark:border-gray-800 dark:bg-[rgba(17,17,17,0.8)]">
42+
<h3 className="mb-4 font-bold text-2xl text-gray-900 dark:text-white">
43+
MCP Server SDK
44+
</h3>
45+
<p className="mb-6 text-gray-600 leading-relaxed dark:text-gray-300">
46+
Arcade's MCP SDK provides a FastAPI-like interface for building
47+
custom Model Context Protocol servers. Use this SDK to create your
48+
own tools and expose them through the standardized MCP protocol.
49+
</p>
50+
<div className="flex flex-wrap gap-3">
51+
<Button
52+
asChild
53+
className="bg-primary text-white hover:bg-primary/90"
54+
>
55+
<Link href="https://reference.arcade.dev/mcp">
56+
View SDK Reference
57+
</Link>
58+
</Button>
59+
</div>
60+
</div>
61+
62+
{/* Arcade Clients Section */}
63+
<div className="rounded-lg border border-gray-200 bg-white p-8 shadow-sm transition-all hover:border-[#ee175e]/30 hover:shadow-md dark:border-gray-800 dark:bg-[rgba(17,17,17,0.8)]">
64+
<h3 className="mb-4 font-bold text-2xl text-gray-900 dark:text-white">
65+
Arcade Clients
66+
</h3>
67+
<p className="mb-6 text-gray-600 leading-relaxed dark:text-gray-300">
68+
Arcade provides clients for several languages. These clients make
69+
it easy to use Arcade's tools within your agents and applications.
70+
</p>
71+
72+
<div className="space-y-6">
73+
{/* Python Client */}
74+
<div>
75+
<h4 className="mb-2 font-semibold text-gray-900 text-lg dark:text-white">
76+
Python Client
77+
</h4>
78+
<p className="mb-2 text-gray-600 text-sm dark:text-gray-300">
79+
Install with:
80+
</p>
81+
<code className="mb-3 block rounded bg-gray-100 px-3 py-2 font-mono text-sm dark:bg-gray-900">
82+
pip install arcadepy
83+
</code>
84+
<a
85+
className="text-primary text-sm hover:underline"
86+
href="https://github.com/ArcadeAI/arcade-py"
87+
rel="noopener noreferrer"
88+
target="_blank"
89+
>
90+
Learn more about the Python Client
91+
</a>
92+
</div>
93+
94+
{/* JavaScript / TypeScript Client */}
95+
<div>
96+
<h4 className="mb-2 font-semibold text-gray-900 text-lg dark:text-white">
97+
JavaScript / TypeScript Client
98+
</h4>
99+
<p className="mb-2 text-gray-600 text-sm dark:text-gray-300">
100+
Install with:
101+
</p>
102+
<code className="mb-3 block rounded bg-gray-100 px-3 py-2 font-mono text-sm dark:bg-gray-900">
103+
npm install @arcadeai/arcadejs
104+
</code>
105+
<a
106+
className="text-primary text-sm hover:underline"
107+
href="https://github.com/ArcadeAI/arcade-js"
108+
rel="noopener noreferrer"
109+
target="_blank"
110+
>
111+
Learn more about the JavaScript / TypeScript Client
112+
</a>
113+
</div>
114+
115+
{/* Go Client */}
116+
<div>
117+
<h4 className="mb-2 font-semibold text-gray-900 text-lg dark:text-white">
118+
Go Client
119+
</h4>
120+
<p className="mb-2 text-gray-600 text-sm dark:text-gray-300">
121+
Install with:
122+
</p>
123+
<code className="mb-3 block rounded bg-gray-100 px-3 py-2 font-mono text-sm dark:bg-gray-900">
124+
go get -u 'github.com/ArcadeAI/arcade-go'
125+
</code>
126+
<a
127+
className="text-primary text-sm hover:underline"
128+
href="https://github.com/ArcadeAI/arcade-go"
129+
rel="noopener noreferrer"
130+
target="_blank"
131+
>
132+
Learn more about the Go Client
133+
</a>
134+
</div>
135+
</div>
136+
137+
<p className="mt-6 text-gray-500 text-sm italic dark:text-gray-400">
138+
Note: MCP-compatible versions of these clients are in development
139+
and will be documented soon.
140+
</p>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
);
146+
}

‎app/layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "Arcade Docs",
5+
description: "Arcade - AI platform for developers",
6+
};
7+
8+
export default function RootLayout({
9+
children,
10+
}: {
11+
children: React.ReactNode;
12+
}) {
13+
return children;
14+
}

‎next-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3+
/// <reference types="next/navigation-types/compat/navigation" />
34
/// <reference path="./.next/types/routes.d.ts" />
45

56
// NOTE: This file should not be edited

0 commit comments

Comments
 (0)