Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions app/en/get-started/about-arcade/page.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
```mdx
---
title: "How Arcade helps with Agent Authorization"
description: "Learn how Arcade helps with auth and tool calling"
---

<!-- Editorial: Structure - Added proper opening sentence and restructured intro paragraph to follow 10/20/70 format; Terminology - Changed "MCP Servers" to "MCP servers" -->

import { Tabs } from "nextra/components";

# About Arcade

Applications that use models to perform tasks (_agentic applications_) commonly require access to sensitive data and services. Authentication complexities often hinder AI from performing tasks that require user-specific information, like what emails you recently received or what's coming up on your calendar.

To retrieve this information, agentic applications need to be able to authenticate and authorize access to external services you use like Gmail or Google Calendar.

Authenticating to retrieve information, however, is not the only challenge. Agentic applications also need to authenticate to **act** on your behalf - like sending an email or updating your calendar.
Arcade provides an authorization system that handles OAuth 2.0, API keys, and user tokens needed by AI agents to access external services through tools.

Without auth, AI agents are severely limited in what they can do.
Applications that use models to perform tasks (_agentic applications_) commonly require access to sensitive data and services. Authentication complexities often hinder AI from performing tasks that require user-specific information, like what emails you recently received or what's coming up on your calendar. To retrieve this information, agentic applications need to be able to authenticate and authorize access to external services you use like Gmail or Google Calendar. Authenticating to retrieve information, however, is not the only challenge. Agentic applications also need to authenticate to **act** on your behalf - like sending an email or updating your calendar. Without auth, AI agents are severely limited in what they can do.

## How Arcade solves this

Expand All @@ -27,7 +26,7 @@ With Arcade, developers can now create agents that can _act as the end users of

## Auth permissions and scopes

Each tool in Arcade's MCP Servers has a set of required permissions - or, more commonly referred to in OAuth 2.0, **scopes**. For example, the [`Gmail.SendEmail`](/resources/integrations/productivity/gmail#gmailsendemail) tool requires the [`https://www.googleapis.com/auth/gmail.send`](https://developers.google.com/identity/protocols/oauth2/scopes#gmail) scope.
Each tool in Arcade's MCP servers has a set of required permissions - or, more commonly referred to in OAuth 2.0, **scopes**. For example, the [`Gmail.SendEmail`](/resources/integrations/productivity/gmail#gmailsendemail) tool requires the [`https://www.googleapis.com/auth/gmail.send`](https://developers.google.com/identity/protocols/oauth2/scopes#gmail) scope.

A scope is what the user has authorized someone else (in this case, the AI agent) to do on their behalf. In any OAuth 2.0-compatible service, each kind of action requires a different set of permissions. This gives the user fine-grained control over what data third-party services can access and what actions they can take in their accounts.

Expand Down Expand Up @@ -74,3 +73,4 @@ console.log(response.output.value);

</Tabs.Tab>
</Tabs>
```
66 changes: 36 additions & 30 deletions app/en/get-started/quickstarts/call-tool-agent/page.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
```mdx
---
title: "Calling tools in your agent"
description: "Learn how to call tools in your agent"
Expand All @@ -6,9 +7,13 @@ description: "Learn how to call tools in your agent"
import { Steps, Tabs, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";

# Calling tools in your agent with Arcade
<!-- Editorial: Voice and Tone - Changed "gives your AI agents the power to act" to be less marketing-focused -->

Arcade gives your AI agents the power to act. With Arcade-hosted tools, your AI-powered apps can send Gmail, update Notion, message in Slack, and more.
# Call tools in your agent with Arcade

Install and use the Arcade client to call Arcade Hosted Tools from your AI agents.

This quickstart shows developers how to integrate Arcade-hosted tools into AI applications. You'll build a workflow that chains multiple tools together: searching for news, creating a document, and sending an email. The example demonstrates both tools that require user authorization and those that don't.

<GuideOverview>
<GuideOverview.Outcomes>
Expand Down Expand Up @@ -64,7 +69,7 @@ bun install @arcadeai/arcadejs

</Tabs>

### Setup the client
### Set up the client

<Tabs items={["Python", "TypeScript"]} storageKey="preferredLanguage">

Expand Down Expand Up @@ -92,7 +97,7 @@ Create a new script called `example.ts`:
```typescript filename="example.ts"
import Arcade from "@arcadeai/arcadejs";

// You can also set the `ARCADE_API_KEY` environment variable instead of passing it as a parameter.
# You can also set the `ARCADE_API_KEY` environment variable instead of passing it as a parameter.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TypeScript comments are //

const client = new Arcade({
apiKey: "{arcade_api_key}",
});
Expand Down Expand Up @@ -178,11 +183,11 @@ async function authorize_and_run_tool({

### Implement the workflow

In this example workflow, we:
In this example workflow, the system:

- Get the latest news about MCP URL mode elicitation
- Create a Google Doc with the news
- Send a link to the Google Doc to the user
- Gets the latest news about MCP URL mode elicitation
- Creates a Google Doc with the news
- Sends a link to the Google Doc to the user

<Tabs items={["Python", "TypeScript"]} storageKey="preferredLanguage">

Expand All @@ -209,7 +214,7 @@ for search_result in news:
output += f"{search_result['link']}\n\n"

# Create a Google Doc with the news results
# If the user has not previously authorized the Google Docs tool, they will be prompted to authorize the tool call.
# If the user has not previously authorized the Google Docs tool, the system prompts to authorize the tool call.
response_create_doc = authorize_and_run_tool(
tool_name="GoogleDocs.CreateDocumentFromText",
input={
Expand Down Expand Up @@ -246,7 +251,7 @@ print(response_send_email.output.value)

```typescript filename="example.ts"
// This tool does not require authorization, so it will return the results
// without prompting the user to authorize the app.
# without prompting the user to authorize the app.
const response_search = await authorize_and_run_tool({
tool_name: "GoogleNews.SearchNewsStories",
input: {
Expand All @@ -267,7 +272,7 @@ for (const search_result of news) {
}

// Create a Google Doc with the news results
// If the user has not previously authorized the Google Docs tool, they will be prompted to authorize the tool call.
// If the user has not previously authorized the Google Docs tool, the system prompts to authorize the tool call.
const respose_create_doc = await authorize_and_run_tool({
tool_name: "GoogleDocs.CreateDocumentFromText",
input: {
Expand All @@ -282,7 +287,7 @@ const google_doc = respose_create_doc.output?.value;
// Send an email with the link to the Google Doc
const email_body = `You can find the news about MCP URL mode elicitation in the following Google Doc: ${google_doc.documentUrl}`;

// Here again, if the user has not previously authorized the Gmail tool, they will be prompted to authorize the tool call.
# Here again, if the user has not previously authorized the Gmail tool, the system prompts to authorize the tool call.
const respose_send_email = await authorize_and_run_tool({
tool_name: "Gmail.SendEmail",
input: {
Expand Down Expand Up @@ -314,7 +319,7 @@ console.log(respose_send_email.output?.value);
uv run example.py
```
```text
Success! Check your email at mateo@arcade.dev
Success Check your email at mateo@arcade.dev

You just chained 3 tools together:
1. Searched Google News for stories about MCP URL mode elicitation
Expand All @@ -333,7 +338,7 @@ console.log(respose_send_email.output?.value);
```

```text
Success! Check your email at mateo@arcade.dev
Success Check your email at mateo@arcade.dev

You just chained 3 tools together:
1. Searched Google News for stories about MCP URL mode elicitation
Expand All @@ -342,10 +347,10 @@ console.log(respose_send_email.output?.value);

Email metadata:
{
id: "19ba...",
id: "19ba",
label_ids: [ "UNREAD", "SENT", "INBOX" ],
thread_id: "19ba...",
url: "https://mail.google.com/mail/u/0/#sent/19ba...",
thread_id: "19ba",
url: "https://mail.google.com/mail/u/0/#sent/19ba",
}
```

Expand All @@ -354,11 +359,11 @@ console.log(respose_send_email.output?.value);

</Steps>

## Next Steps
## Next steps

In this simple example, we call the tool methods directly. In your real applications and agents, you'll likely be letting the LLM decide which tools to call. Learn more about using Arcade with Frameworks in the [Frameworks](/guides/agent-frameworks) section, or [how to build your own tools](/guides/create-tools/tool-basics/build-mcp-server).
In this example, the system calls the tool methods directly. In your real applications and agents, you'll likely be letting the LLM decide which tools to call. Learn more about using Arcade with frameworks in the [Frameworks](/guides/agent-frameworks) section, or [how to build your own tools](/guides/create-tools/tool-basics/build-mcp-server).

## Example Code
## Example code

<Tabs items={["Python", "TypeScript"]} storageKey="preferredLanguage">

Expand Down Expand Up @@ -413,7 +418,7 @@ for search_result in news:
output += f"{search_result['link']}\n"

# Create a Google Doc with the news results
# If the user has not previously authorized the Google Docs tool, they will be prompted to authorize the tool call.
# If the user has not previously authorized the Google Docs tool, the system prompts to authorize the tool call.
response_create_doc = authorize_and_run_tool(
tool_name="GoogleDocs.CreateDocumentFromText",
input={
Expand All @@ -440,7 +445,7 @@ response_send_email = authorize_and_run_tool(
)

# Print the response from the tool call
print(f"Success! Check your email at {user_id}\n\nYou just chained 3 tools together:\n 1. Searched Google News for stories about MCP URL mode elicitation\n 2. Created a Google Doc with the results\n 3. Sent yourself an email with the document link\n\nEmail metadata:")
print(f"Success Check your email at {user_id}\n\nYou just chained 3 tools together:\n 1. Searched Google News for stories about MCP URL mode elicitation\n 2. Created a Google Doc with the results\n 3. Sent yourself an email with the document link\n\nEmail metadata:")
print(response_send_email.output.value)
```

Expand All @@ -451,9 +456,9 @@ print(response_send_email.output.value)
import Arcade from "@arcadeai/arcadejs";

// You can also set the `ARCADE_API_KEY` environment variable instead of passing it as a parameter.
const client = new Arcade(
const client = new Arcade({
apiKey: "{arcade_api_key}",
);
});

// Arcade needs a unique identifier for your application user (this could be an email address, a UUID, etc).
// In this example, use the email you used to sign up for Arcade.dev:
Expand All @@ -466,9 +471,9 @@ async function authorize_and_run_tool({
input,
user_id,
}: {
tool_name: string,
input: any,
user_id: string,
tool_name: string;
input: any;
user_id: string;
}) {


Expand Down Expand Up @@ -518,7 +523,7 @@ for (const search_result of news) {
}

// Create a Google Doc with the news results
// If the user has not previously authorized the Google Docs tool, they will be prompted to authorize the tool call.
// If the user has not previously authorized the Google Docs tool, the system prompts to authorize the tool call.
const respose_create_doc = await authorize_and_run_tool({
tool_name: "GoogleDocs.CreateDocumentFromText",
input: {
Expand All @@ -533,7 +538,7 @@ const google_doc = respose_create_doc.output?.value;
// Send an email with the link to the Google Doc
const email_body = `You can find the news about MCP URL mode elicitation in the following Google Doc: ${google_doc.documentUrl}`;

// Here again, if the user has not previously authorized the Gmail tool, they will be prompted to authorize the tool call.
// Here again, if the user has not previously authorized the Gmail tool, the system prompts to authorize the tool call.
const respose_send_email = await authorize_and_run_tool({
tool_name: "Gmail.SendEmail",
input: {
Expand All @@ -546,10 +551,11 @@ const respose_send_email = await authorize_and_run_tool({

// Print the response from the tool call
console.log(
`Success! Check your email at ${userId}\n\nYou just chained 3 tools together:\n 1. Searched Google News for stories about MCP URL mode elicitation\n 2. Created a Google Doc with the results\n 3. Sent yourself an email with the document link\n\nEmail metadata:`
`Success Check your email at ${userId}\n\nYou just chained 3 tools together:\n 1. Searched Google News for stories about MCP URL mode elicitation\n 2. Created a Google Doc with the results\n 3. Sent yourself an email with the document link\n\nEmail metadata:`
);
console.log(respose_send_email.output?.value);
```

</Tabs.Tab>
</Tabs>
```
18 changes: 12 additions & 6 deletions app/en/get-started/quickstarts/call-tool-client/page.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
```mdx
---
title: "Call a tool in your IDE/MCP Client"
description: "Learn how to call a tool in your IDE/MCP Client"
---

<!-- Editorial: Structure - Added intro line conforming to Tutorial and Quickstart structure -->

import { Steps, Tabs, Callout } from "nextra/components";
import { SignupLink } from "@/app/_components/analytics";
import Image from "next/image";
Expand All @@ -23,6 +26,8 @@ export const MCP_GATEWAY_URL_LIGHT_HEIGHT = 498;

# Call a tool in your IDE/MCP Client

You'll learn how to create and use an MCP Gateway to call tools from multiple MCP servers in your IDE.

Tools enable your AI agents to perform actions on your behalf. For specific workflows and use cases, this may involve calling tools from multiple MCP servers. Arcade facilitates this by allowing you to create MCP Gateways to federate the tools from multiple MCP servers into a single collection for convenient management, control, and access. For example, if your agent specializes in solving specific tickets in Linear, you may want to use tools from the GitHub, Slack and Linear servers in your agent. These add up to 88 tools, which could be overwhelming for an LLM to use effectively. What you want is to get from these servers only the tools that matter for your agent. An MCP Gateway allows you to do just that: pick only the tools required for this workflow, and you can connect it to any MCP client, making it possible to port your agent to multiple platforms and IDEs, and even share it with other users.

<GuideOverview>
Expand Down Expand Up @@ -68,7 +73,7 @@ Create a coding agent using an MCP Gateway to call tools from multiple MCP serve
height={CREATE_MCP_GATEWAY_DARK_HEIGHT / IMAGE_SCALE_FACTOR}
/>

Give your MCP gateway:
Give your MCP Gateway:

- A name
- A description
Expand Down Expand Up @@ -101,7 +106,7 @@ Feel free to select any tools you want to include in your specific use case.
Once you've selected the tools you want to include in the gateway, click the "Use N tools" button in the tool picker, and then click the "Create MCP Gateway" button to create the gateway.

<Callout type="info">
You can select as many tools for your MCP Gateway as you want, but be mindful of how the MCP clients will handle the large number of tools. Some clients may not handle a large number of tools well, and may consume a significant portion of the LLM's context window. We recommend keeping the number of tools in a single MCP Gateway below 80.```
You can select as many tools for your MCP Gateway as you want, but be mindful of how the MCP clients will handle the large number of tools. Some clients may not handle a large number of tools well, and may consume a significant portion of the LLM's context window. The recommendation is to keep the number of tools in a single MCP Gateway below 80.
</Callout>

### Connect the MCP Gateway to an MCP client
Expand Down Expand Up @@ -153,7 +158,7 @@ Get the URL of your MCP Gateway by clicking the "Copy URL" button in the MCP Gat
</Tabs.Tab>
<Tabs.Tab>

1. Open the command palette (Mac: Cmd + Shift + p / Windows: Ctrl + Shift + p) and select **MCP: Add Server...**
1. Open the command palette (Mac: Cmd + Shift + p / Windows: Ctrl + Shift + p) and select **MCP: Add Server**
1. Choose **HTTP**
1. Paste the URL of your MCP Gateway.
1. Give your MCP server a name, like `mcp-arcade`
Expand All @@ -166,16 +171,17 @@ Get the URL of your MCP Gateway by clicking the "Copy URL" button in the MCP Gat
### Try it out

1. Open your IDE's chat pane.
1. Ask the agent to do something! For example, "Check the latest linear issue assigned to me. Then, create a new GitHub branch, implement the fix, and add tests. If all the tests pass, create a pull request and assign it to me."
1. Ask the agent to do something For example, "Check the latest linear issue assigned to me. Then, create a new GitHub branch, implement the fix, and add tests. If all the tests pass, create a pull request and assign it to me."

As you interact with the agent, it will call the tools from the MCP Gateway. Your agent should prompt you to visit links to authorize access to Linear and GitHub. After this, it will start using tools to carry out the task! Subsequent calls will not require authorization.
As you interact with the agent, it will call the tools from the MCP Gateway. Your agent should prompt you to visit links to authorize access to Linear and GitHub. After this, it will start using tools to carry out the task Subsequent calls will not require authorization.

</Steps>

## Next Steps
## Next steps

- Learn more about [MCP Gateways](/guides/create-tools/mcp-gateways).
- Learn how to use MCP Gateways with:
- [Cursor](/guides/tool-calling/mcp-clients/cursor)
- [Visual Studio Code](/guides/tool-calling/mcp-clients/visual-studio-code)
- Build your own MCP servers with [arcade-mcp](/get-started/quickstarts/mcp-server-quickstart).
```
Loading