Updated structure of component pages and added a new section for self-hosted

Author: bsyedumar

docs/agent-studio/components/_category_.json

@@ -1,4 +1,5 @@
 {
 	"label": "Components",
-	"collapsed": true
+	"collapsed": true,
+	"position": 5
 }

docs/agent-studio/components/advanced/api-call.mdx

@@ -130,6 +130,7 @@ You paste a static token or API key into the `Authorization` header.
 OAuth is like giving your agent a *temporary pass* instead of a permanent key. The system automatically handles token refresh, so you don’t have to rotate secrets manually.  
 
 #### Supported OAuth flows
+
 | Flow | When to use | Example |
 |------|-------------|---------|
 | Authorization Code (with PKCE) | When a user needs to log in (e.g. “Login with Google”). | Connecting to Gmail, LinkedIn |

docs/agent-studio/components/advanced/async.mdx

@@ -13,6 +13,8 @@ Use the **Async** component to run parts of your workflow in the background. It'
 Without `Async`, tasks that take longer than a few minutes can fail with a timeout error. `Async` offloads these heavy jobs to a separate process, ensuring your main workflow completes instantly while the background task runs to completion.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/NmkvZboIWz4aZwjb1ruq?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Async | SmythOS" />
+
 <Spacer size="md" />
 
 ## Step 1: Define Inputs
@@ -30,8 +32,6 @@ Inputs for the `Async` component are the data you need to pass to the background
 Think of Async inputs as the parameters for your background job. If you're processing a list of users, you might have an input named `userList` of type `Array`.
 </TipCallout>
 
-<Arcade src="https://demo.arcade.software/NmkvZboIWz4aZwjb1ruq?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Async | SmythOS" />
-
 <Spacer size="md" />
 
 ## Step 2: Understand Outputs

docs/agent-studio/components/advanced/await.mdx

@@ -13,6 +13,8 @@ Use the **Await** component to pause your main workflow until one or more backgr
 `Await` bridges the gap between your main workflow and background processes. It's the key to making a workflow wait for a long-running task to complete so you can use its output in subsequent steps, like showing results to a user or making decisions based on the processed data.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/Zm414J05Em9ruNick1Uy?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Await | SmythOS" />
+
 <Spacer size="md" />
 
 ## Step 1: Set Wait Conditions
@@ -28,8 +30,6 @@ Define the criteria for when the `Await` component should stop waiting and allow
 The workflow resumes as soon as the *first* condition is met. If `Minimum Jobs Count` is 5 and `Maximum Wait Time` is 30 seconds, the flow continues at 30 seconds even if only 3 jobs have finished.
 </TipCallout>
 
-<Arcade src="https://demo.arcade.software/Zm414J05Em9ruNick1Uy?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Await | SmythOS" />
-
 <Spacer size="md" />
 
 ## Step 2: Provide Job IDs

docs/agent-studio/components/advanced/for-each.mdx

@@ -12,6 +12,8 @@ keywords: ["ForEach", "For Each", "loop array", "iterate list", "batch processin
 Manually processing lists is tedious and not scalable.  **For Each** automates the repetition so workflows stay simple and reliable, whether the list has 3 items or 3,000.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/712A7jqiMFGqgWkutOCL?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="For Each | SmythOS" />
+
 <Spacer size="md" />
 
 ## Step 1: Provide the Input Array
@@ -26,8 +28,6 @@ The component expects a single input: a JSON array.
 Pass arrays from **API Call**, **Code**, **Database**, or any previous step that returns a list.
 </TipCallout>
 
-<Arcade src="https://demo.arcade.software/712A7jqiMFGqgWkutOCL?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="For Each | SmythOS" />
-
 <Spacer size="md" />
 
 ## Step 2: Build the Loop Steps

docs/agent-studio/components/advanced/json-filter.mdx

@@ -13,6 +13,8 @@ Use the **JSON Filter** component to reduce large JSON objects to only the field
 APIs often return far more data than you need. Sending a massive JSON object to an LLM wastes tokens and risks hitting context limits. The `JSON Filter` lets you surgically remove the noise, ensuring only relevant data is passed on.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/WJpOVfU9Ll9F6NrOtjnv?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="JSON Filter | SmythOS" />
+
 <Spacer size="md" />
 
 ## Step 1: Define Filter Parameters
@@ -27,8 +29,6 @@ Specify the exact keys you want to keep from the original JSON object. All other
 To keep a nested field like `user.profile.email`, you must include all parent keys in the list: `user, user.profile, user.profile.email`.
 </TipCallout>
 
-<Arcade src="https://demo.arcade.software/WJpOVfU9Ll9F6NrOtjnv?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="JSON Filter | SmythOS" />
-
 <Spacer size="md" />
 
 ## Step 2: Provide the JSON Input

docs/agent-studio/components/advanced/llm-assistant.mdx

@@ -13,6 +13,8 @@ Use the **LLM Assistant** component to create stateful, multi-turn chat experien
 Unlike a standard LLM call, the `LLM Assistant` remembers previous messages in the same conversation. This is crucial for building chatbots and agents that can understand follow-up questions and maintain a natural conversational flow.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/feB8bIw53rxIILXr2QwP?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="LLM Assistant | SmythOS" />
+
 <Spacer size="md" />
 
 ## Step 1: Select a Model
@@ -24,8 +26,6 @@ Choose the language model that will power your assistant. You can use built-in m
 | **Model** | <Badge type="required">Yes</Badge> | The LLM used for generating responses.                                      | Defaults to SmythOS-provided models (e.g., OpenAI). You can also select other shared models like Claude or Together AI. For more, see [Billing Management](/docs/account-management/billing-management). |
 | **Custom Model** | <Badge type="optional">No</Badge>  | Connect to your own LLM provider, such as Amazon Bedrock or Google Vertex AI. | This is an enterprise feature. You will need to provide your own credentials and select a foundation model. [Contact us](https://smythos.com/talk-to-us) to enable it.                |
 
-<Arcade src="https://demo.arcade.software/feB8bIw53rxIILXr2QwP?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="LLM Assistant | SmythOS" />
-
 <Spacer size="md" />
 
 ## Step 2: Define the Behavior

docs/agent-studio/components/advanced/sleep.mdx

@@ -13,6 +13,8 @@ Use the **Sleep** component to intentionally pause a workflow for a specific dur
 Many workflows need to interact with external services that have strict usage policies (rate limits). The `Sleep` component prevents your agent from making too many requests too quickly. It's also vital for waiting for slow, asynchronous processes to complete before continuing.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/T5ojKEEAC1y7ciCqaPRg?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Sleep | SmythOS" />
+
 <Spacer size="md" />
 
 ## Step 1: Set the Delay Duration
@@ -27,8 +29,6 @@ The only setting to configure is the amount of time, in seconds, that the workfl
 You can set the delay using a variable. For example, an API response might include a `Retry-After` header. You can extract that value and pass it to the `Sleep` component to wait for the exact required duration.
 </TipCallout>
 
-<Arcade src="https://demo.arcade.software/T5ojKEEAC1y7ciCqaPRg?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Sleep | SmythOS" />
-
 <Spacer size="md" />
 
 ## Best Practices

docs/agent-studio/components/base/agent-skill.mdx

@@ -13,6 +13,9 @@ Use the **Agent Skill** component to define a reusable capability or function fo
 Agent Skills are the building blocks of a sophisticated agent. Instead of creating one massive, monolithic workflow, you can break down complex logic into smaller, named skills (e.g., `check_inventory`, `process_refund`). This makes your agent easier to debug, update, and scale.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/kwsoTMnZP38yLMH1LD3b?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Agent Skill | SmythOS"/>
+
+
 <Spacer size="md" />
 
 ## Step 1: Define the Skill's Core Details
@@ -42,8 +45,6 @@ Parameters are the inputs your skill needs to perform its function.
 | **Optional** | <Badge type="optional">No</Badge>  | Mark as true if the parameter is not always required.             |
 | **Default Value** | <Badge type="optional">No</Badge>  | A fallback value to use if no input is provided.                  |
 
-<Arcade src="https://demo.arcade.software/kwsoTMnZP38yLMH1LD3b?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="Agent Skill | SmythOS"/>
-
 <Spacer size="md" />
 
 ## Step 3: Configure Advanced Options

docs/agent-studio/components/base/api-output.mdx

@@ -13,6 +13,8 @@ Use the **API Output** component to structure and standardize the final output o
 Consistent and clean outputs are crucial for building reliable agents. The `API Output` component acts as a formal "return" statement for your workflows, making them easier to call, debug, and integrate with other systems.
 </InfoCallout>
 
+<Arcade src="https://demo.arcade.software/BDTiFUzkoQo0nVtWLfI1?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="API Output | SmythOS"/>
+
 <Spacer size="md" />
 
 ## Step 1: Define the Output Fields (Inputs)
@@ -30,7 +32,6 @@ The "inputs" of this component are actually the fields you want to include in yo
 Think of each input as a field in your final JSON response. If you want a response like `{"status": "success", "data": {...}}`, you would create two inputs named `status` and `data`.
 </TipCallout>
 
-<Arcade src="https://demo.arcade.software/BDTiFUzkoQo0nVtWLfI1?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true" title="API Output | SmythOS"/>
 
 <Spacer size="md" />