reformatting the quickstart

Author: nearestnabors

app/en/home/quickstart/page.mdx

@@ -6,53 +6,69 @@ description: "Learn how to get started with Arcade's Hosted Tools"
 import { Steps, Tabs, Callout } from "nextra/components";
 import { SignupLink } from "@/app/_components/analytics";
 
-# Arcade Quickstart
+# Arcade's Hosted Tools Quickstart
 
-<div className="grid grid-cols-1 md:grid-cols-[4fr_3fr] gap-8">
-  <div>
-<strong>Build AI agents that actually take action.</strong>
+Arcade gives your AI agents the power to act. With Arcade's Hosted Tools, your AI can send Gmail, update Notion, message in Slack, and more.
 
-Most AI apps are stuck in read-only mode. Arcade gives your AI the power to act — send Gmail, update Notion, message in Slack, and more.
+<GuideOverview>
+<GuideOverview.Outcomes>
 
-In this quickstart, you'll:
+Build and run an MCP Server with tools that you define.
+
+</GuideOverview.Outcomes>
+
+<GuideOverview.Prerequisites>
+
+- An <SignupLink linkLocation="docs:call-tools-directly">Arcade account</SignupLink>
+- An [Arcade API key](/home/api-keys)
+- The [`uv` package manager](https://docs.astral.sh/uv/getting-started/installation/)
+
+</GuideOverview.Prerequisites>
+
+<GuideOverview.YouWillLearn>
 
 - Install the Arcade client
 - Authenticate your first real-world tool
 - Run your first tool call using the arcade client
 
-This it's the foundation to build full agents. Real tools. Real actions. Real fast.
-Ready to start? Follow the Quickstart below.
-
-  </div>
-  <iframe
-   className="aspect-video w-full max-w-[900px] rounded-xl shadow-2xl"
-   src="https://www.youtube.com/embed/USoqJOOUP6c?si=ontrjjatjmqMfTHN"
-   title="Arcade Quickstart"
-   allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-   referrerPolicy="strict-origin-when-cross-origin"
-   ></iframe>
-</div>
+</GuideOverview.YouWillLearn>
+</GuideOverview>
 
 <Steps>
 
-### Prerequisites
-
-1. Create an <SignupLink linkLocation="docs:call-tools-directly">Arcade account</SignupLink>
-1. Get an [Arcade API key](/home/api-keys) and take note, you'll need it in the next steps.
-
 ### Install the Arcade client
 
+In your terminal, run the following command to install the `arcade-mcp` package:
+
 <Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
-  <Tabs.Tab>```python pip install arcadepy ```</Tabs.Tab>
-  <Tabs.Tab>```javascript npm install @arcadeai/arcadejs ```</Tabs.Tab>
+
+  <Tabs.Tab>
+
+```bash
+uv pip install arcadepy
+```
+
+  </Tabs.Tab>
+
+  <Tabs.Tab>
+
+```bash
+npm install @arcadeai/arcadejs
+```
+
+  </Tabs.Tab>
+
 </Tabs>
 
 ### Instantiate and use the client
 
 <Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
+
 <Tabs.Tab>
+
 Create a new script called `example.py`:
-```python
+
+```python filename="example.py"
 from arcadepy import Arcade
 
 # You can also set the `ARCADE_API_KEY` environment variable instead of passing it as a parameter.
@@ -98,11 +114,15 @@ user_id=user_id,
 
 print(response.output.value)
 
-````
+```
+
 </Tabs.Tab>
+
 <Tabs.Tab>
+
 Create a new script called `example.mjs`:
-```javascript
+
+```javascript filename="example.mjs"
 import Arcade from "@arcadeai/arcadejs";
 
 // You can also set the `ARCADE_API_KEY` environment variable instead of passing it as a parameter.
@@ -132,7 +152,7 @@ const authResponse = await client.tools.authorize({
 
 if (authResponse.status !== "completed") {
   console.log(
-    `Click this link to authorize: \`${authResponse.url}\`.  The process will continue once you have authorized the app.`,
+    `Click this link to authorize: \`${authResponse.url}\`. The process will continue once you have authorized the app.`
   );
   // Wait for the user to authorize the app
   await client.auth.waitForCompletion(authResponse.id);
@@ -149,21 +169,31 @@ const response_github = await client.tools.execute({
 });
 
 console.log(response_github.output.value);
-````
+```
 
 </Tabs.Tab>
+
 </Tabs>
 
 ### Run the code
 
 <Tabs items={["Python", "JavaScript"]} storageKey="preferredLanguage">
+
   <Tabs.Tab>
-    ```bash python3 example.py > The square root of 625 is 25 > Successfully
-    starred the repository ArcadeAI/arcade-ai ```
+
+```bash
+python3 example.py > The square root of 625 is 25 > Successfully
+starred the repository ArcadeAI/arcade-ai
+```
+
   </Tabs.Tab>
   <Tabs.Tab>
-    ```bash node example.mjs > The square root of 625 is 25 > Successfully
-    starred the repository ArcadeAI/arcade-ai ```
+
+    ```bash
+    node example.mjs > The square root of 625 is 25 > Successfully
+    starred the repository ArcadeAI/arcade-ai
+    ```
+
   </Tabs.Tab>
 </Tabs>