Add How to get an Api key page.

ArcadeAI · Feb 20, 2025 · 964a057 · 964a057
1 parent 684020d
commit 964a057
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 15 deletions.
diff --git a/pages/home/_meta.tsx b/pages/home/_meta.tsx
@@ -42,6 +42,9 @@ export default {
   quickstart: {
     title: "Quickstart",
   },
+  "api-keys": {
+    title: "How to get an API key",
+  },
   "use-tools": {
     title: "Tool Calling",
   },

diff --git a/pages/home/api-keys.mdx b/pages/home/api-keys.mdx
@@ -0,0 +1,84 @@
+---
+title: "Getting Your API Key"
+description: "Learn how to obtain and manage your Arcade API key"
+---
+
+import { Steps, Tabs } from "nextra/components";
+
+# Getting Your API Key
+
+
+Before you begin, you'll need an Arcade account - if you haven't created one yet, you can [sign up here](https://api.arcade.dev/signup). Once you have an account, you can generate API keys through either our dashboard or CLI.
+
+
+<Tabs items={["Dashboard", "CLI"]}>
+
+
+<Tabs.Tab>
+
+### Using the Dashboard
+
+<div className="flex justify-center my-4">
+  <video 
+    src="/videos/API_Keys.mp4"
+    autoPlay
+    muted
+    playsInline
+    className="w-full max-w-[900px] rounded-xl shadow-2xl"
+    controls
+  ></video>
+</div>
+
+<Steps>
+### Navigate to API Keys page
+Visit the [API Keys page](https://api.arcade.dev/dashboard/api-keys) in Arcade Dashboard.
+
+### Create a new API key
+1. Click the `Create API Key` button in the top right
+2. Enter a descriptive name to help identify your key
+3. Click `Create API Key` to generate your key
+
+### Save your API key securely
+1. Copy your API key immediately - it will only be shown once
+2. Store it securely
+3. You can always generate new keys if needed
+
+</Steps>
+
+</Tabs.Tab>
+
+<Tabs.Tab>
+
+### Using the CLI
+
+<Steps>
+
+### Install and login
+1. Install the Arcade CLI:
+```bash
+pip install arcade-ai
+```
+2. Start the login process:
+```bash
+arcade login
+```
+
+### Complete setup
+The CLI will automatically:
+- Print your API key to the console
+- Save your credentials to `~/.arcade/credentials.yaml`
+
+</Steps>
+
+</Tabs.Tab>
+</Tabs>
+
+<Warning type="warning">
+  API keys are administrator credentials. Anyone who has your API key can make requests to Arcade as you. Always store your API keys in a safe place, such as system environment variables, and never commit them to version control, share them publicly, or use them in browser or frontend code.
+</Warning>
+## Next Steps
+
+Once you have your API key, you can:
+- [Start using tools](use-tools/call-tools-directly)
+- [Call tools with LLMs](use-tools/call-tools-with-models)
+- [Create custom tools](custom-tools) 
diff --git a/pages/home/custom-tools.mdx b/pages/home/custom-tools.mdx
@@ -19,14 +19,7 @@ Let's set up Arcade and give it a try!
 
 ### Obtain an API key
 
-Install the Arcade CLI and SDK and log in. Your Arcade API key will be printed to the console as well as saved to `~/.arcade/credentials.yaml`.
-
-```bash
-pip install arcade-ai
-arcade login
-```
-
-<Tip>Obtaining an API key through the Arcade dashboard is coming soon!</Tip>
+You'll need an Arcade API key to get started. Visit the [How to get an API key](/home/api-keys) page to create one if you haven't already.
 
 ### Try `arcade chat`
 

diff --git a/pages/home/langchain/use-arcade-tools.mdx b/pages/home/langchain/use-arcade-tools.mdx
@@ -23,6 +23,9 @@ pip install langchain-arcade langchain-openai langgraph
 
 Provide your Arcade and OpenAI API keys. You can store them in environment variables or directly in your code:
 
+> Need an Arcade API key? Visit the [How to get an API key](/home/api-keys) page to create one.
+
+
 ```python
 import os
 

diff --git a/pages/home/langchain/user-auth-interrupts.mdx b/pages/home/langchain/user-auth-interrupts.mdx
@@ -23,6 +23,8 @@ pip install langchain-arcade langchain-openai langgraph
 
 Make sure you have set your Arcade API key (and any other relevant keys) in the environment, or assign them directly in the code:
 
+> Need an Arcade API key? Visit the [How to get an API key](/home/api-keys) page to create one.
+
 ```python
 import os
 

diff --git a/pages/home/use-tools/call-tools-directly.mdx b/pages/home/use-tools/call-tools-directly.mdx
@@ -21,12 +21,17 @@ You still get the benefits of Arcade managing authorization and tool execution,
 
 ### Set environment variables
 
-You can find your API key in `~/.arcade/credentials.yaml`.
+You can find your Arcade API key in one of these locations:
+
+- [Arcade Dashboard](https://api.arcade.dev/dashboard/api-keys) under API Keys
+- `~/.arcade/credentials.yaml`
 
 ```bash
 export ARCADE_API_KEY=<your-api-key>
 ```
 
+> Need an Arcade API key? Visit the [How to get an API key](/home/api-keys) page to create one.
+
 ### Initialize the client
 
 Import and initialize the Arcade client. The client automatically uses the `ARCADE_API_KEY` environment variable.

diff --git a/pages/home/use-tools/call-tools-with-models.mdx b/pages/home/use-tools/call-tools-with-models.mdx
@@ -25,6 +25,8 @@ Create a new file in your favorite editor. If you followed the OpenAI quickstart
 
 Use the OpenAI client, and change the base URL and API key to point to Arcade:
 
+> Need an Arcade API key? Visit the [How to get an API key](/home/api-keys) page to create one.
+
 <Tabs items={["Python", "JavaScript"]}>
 <Tabs.Tab>
 

diff --git a/public/videos/API_Keys.mp4 b/public/videos/API_Keys.mp4
diff --git a/src/components/pages/quickstart/Prerequisites/openai.mdx b/src/components/pages/quickstart/Prerequisites/openai.mdx
@@ -4,8 +4,7 @@ import { Steps, Tabs } from "nextra/components"; import { Info } from "lucide-re
 - Arcade API key
 
 <Tip>
-  To obtain an API key, please refer to the [SDK
-  installation](/home/custom-tools/) page.
+  To obtain an API key, please refer to the [How to get an API key](/home/api-keys) page.
 </Tip>
 
 ### Install and use Arcade

diff --git a/src/components/pages/quickstart/Prerequisites/python.mdx b/src/components/pages/quickstart/Prerequisites/python.mdx
@@ -5,8 +5,7 @@ import { Info } from "lucide-react";
 - Arcade API key
 
 <Tip>
-  To obtain an API key, please refer to the [SDK
-  installation](/home/custom-tools/) page.
+  To obtain an API key, please refer to the [How to get an API key](/home/api-keys) page.
 </Tip>
 
 ### Install and use Arcade

diff --git a/src/components/pages/quickstart/Prerequisites/typescript.mdx b/src/components/pages/quickstart/Prerequisites/typescript.mdx
@@ -5,8 +5,7 @@ import { Info } from "lucide-react";
 - Arcade API key
 
 <Tip>
-  To obtain an API key, please refer to the [SDK
-  installation](/home/custom-tools/) page.
+  To obtain an API key, please refer to the [How to get an API key](/home/api-keys) page.
 </Tip>
 
 ### Install and use Arcade