diff --git a/components/code.tsx b/components/code.tsx index e1ac7fc8..0815bf7f 100644 --- a/components/code.tsx +++ b/components/code.tsx @@ -9,11 +9,18 @@ interface CodeGroupProps { isOSFile?: boolean; isLocalHostedFile?: boolean; hasCopy?: boolean; + osBlocks: ReactNode; + codeBlocks: ReactNode; } interface CodeBlockProps { filename: string; dataLanguage?: string; + local?: boolean; + children: React.ReactNode; + windows?: boolean; + mac?: boolean; + ubuntu?: boolean; } type CodeBoxProps = { @@ -23,6 +30,8 @@ type CodeBoxProps = { children?: React.ReactNode; isOSFile?: boolean; isLocalHostedFile?: boolean; + osBlocks: ReactNode; + codeBlocks: ReactNode; }; type CodeBlock = { @@ -260,52 +269,84 @@ const agentType = [ export const CustomPre: React.FC = ({ hasCopyCode, - children, isLocalHostedFile, isOSFile, - filename, + codeBlocks, + osBlocks, }) => { const [isCopied, setIsCopied] = useState(false); const codeRef = useRef(null); - const [selectedType, setSelectedType] = useState( - filename[0].includes("local") ? agentType[0].name : agentType[1].name, - ); - const [selectedOS, setSelectedOS] = useState("windows"); - - const renderChild = () => { - return React.Children.map(children, (child) => { + const renderCodeChild = () => { + return React.Children.map(codeBlocks, (child) => { if (React.isValidElement(child)) { - return matchFilename(child.props.filename) ? child : null; + return child; } return null; }); }; + const child = renderCodeChild(); + const localHostdType = + child?.length === 1 && !child[0]?.props?.local + ? agentType[1].name + : agentType[0].name; + const [selectedType, setSelectedType] = useState(localHostdType); + const [selectedOS, setSelectedOS] = useState("windows"); + const filteredAgentType = - isLocalHostedFile && filename.length == 2 + child?.length === 2 ? agentType - : agentType.filter( - (type) => - type.label === (filename[0].includes("local") ? "local" : "hosted"), + : agentType.filter((agent) => + child?.length === 1 && child[0]?.props?.local + ? agent.label === "local" + : agent.label === "hosted", ); - const matchFilename = (filename: string): boolean => { - const regexMap = { - self_hosted: /local/i, - agentverse: /hosted/i, - windows: /windows/i, - mac: /mac/i, - ubuntu: /ubuntu/i, - }; + const renderCodeBlock = () => { + return React.Children.map(codeBlocks, (child) => { + if (React.isValidElement(child)) { + if (selectedType === "Self hosted" && child?.props?.local) { + return codeBlocks && child?.props?.children; + } else if (selectedType === "Agentverse" && !child?.props?.local) { + return codeBlocks && child?.props?.children; + } + } + return null; + }); + }; - return ( - regexMap[selectedType.split(" ").join("_").toLowerCase()]?.test( - filename, - ) || regexMap[selectedOS.toLowerCase()]?.test(filename) - ); + const renderOsBlock = () => { + return React.Children.map(osBlocks, (child) => { + if (React.isValidElement(child)) { + if (selectedOS === "windows" && child?.props?.windows) { + return codeBlocks && child?.props?.children; + } else if (selectedOS === "mac" && child?.props?.mac) { + return codeBlocks && child?.props?.children; + } else if (selectedOS === "ubuntu" && child?.props?.ubuntu) { + return codeBlocks && child?.props?.children; + } + } + return null; + }); }; + useEffect(() => { + if (codeRef.current) { + const preTags = codeRef.current.querySelectorAll("pre"); + + for (const preTag of preTags) { + if (isLocalHostedFile) { + preTag.style.paddingTop = "80px"; + } else if (isOSFile) { + preTag.style.paddingTop = "45px"; + } else { + preTag.style.paddingTop = "0px"; + } + } + } + }, [isLocalHostedFile, selectedType, codeBlocks, isOSFile, selectedOS]); + const handleCopy = () => { const codeElements = codeRef.current?.querySelectorAll("code"); const codeText = [...(codeElements ?? [])] @@ -322,8 +363,16 @@ export const CustomPre: React.FC = ({ return (
-
-
+
+
{isLocalHostedFile && ( = ({ style={{ overflowX: "scroll", width: "100%" }} ref={codeRef} > - {renderChild()} + {isOSFile ? renderOsBlock() : renderCodeBlock()}
@@ -385,9 +434,6 @@ export const CustomPre: React.FC = ({ ); }; -const isLocalOrHosted = (name?: string) => - name?.startsWith("local-") || name?.startsWith("hosted-"); - export const ModifiedPre = ({ children, filename, @@ -397,8 +443,6 @@ export const ModifiedPre = ({ filename?: string; hasCopyCode?: boolean; }) => { - const osMenu = ["windows", "mac", "ubuntu"]; - const [isCopied, setIsCopied] = useState(false); const codeRef = useRef(null); @@ -416,66 +460,42 @@ export const ModifiedPre = ({ } }; - const shouldApplyPreNormal = Boolean(filename && isLocalOrHosted(filename)); - - if (osMenu.includes(filename || "")) { - return ( -
- - {filename?.replace(/^(local-|hosted-)/, "")} - -
{children}
-
- ); - } - return ( - 
-      {isLocalOrHosted(filename) ? (
-        filename && (
-          
-            {filename.replace(/^(local-|hosted-)/, "")}
-          
-        )
-      ) : (
-        

-          {filename && (
-            
-              {filename.replace(/^(local-|hosted-)/, "")}
-            
-          )}
-          {hasCopyCode && (
-            

-              {isCopied ? (
-                <>
-                  
-                    
-                  
-                  Copied
-                
-              ) : (
-                
-              )}
-            

-          )}
-        

-      )}
+    
+      

+        {filename && {filename}}
+        {hasCopyCode && (
+          

+            {isCopied ? (
+              <>
+                
+                  
+                
+                Copied
+              
+            ) : (
+              // 
+              <>
+            )}
+          

+        )}
+      

       
{children}

     

   );
@@ -487,25 +507,56 @@ export const CodeGroup: React.FC = ({
   isLocalHostedFile,
   hasCopy,
 }) => {
-  const renderFileName = () => {
-    return React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        return child.props.filename;
-      }
-      return null;
-    });
-  };
-  const filename = renderFileName();
+  const codeBlocks = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement => {
+      return React.isValidElement(child) && "local" in child.props;
+    },
+  );
+
+  const osBlocks = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement => {
+      if (!React.isValidElement(child)) return false;
+
+      const { props } = child;
+      return "windows" in props || "mac" in props || "ubuntu" in props;
+    },
+  );
+
+  const [firstChild] = React.Children.toArray(children);
+  if (React.isValidElement(firstChild)) {
+    const modifiedFirstChild = React.cloneElement(
+      firstChild as React.ReactElement,
+      {
+        isLocalHostedFile,
+        isOSFile,
+        hasCopy,
+        codeBlocks,
+        osBlocks,
+      },
+    );
+
+    return modifiedFirstChild;
+  }
+
+  return children;
+};
+
+export const DocsCode: React.FC = ({
+  codeBlocks,
+  isLocalHostedFile,
+  isOSFile,
+  hasCopy,
+  osBlocks,
+}) => {
   return (
     

       
-        {children}
-      
+        codeBlocks={codeBlocks}
+        osBlocks={osBlocks}
+      />
     

   );
 };
diff --git a/pages/examples/advanced/async-loops.mdx b/pages/examples/advanced/async-loops.mdx
index 52fbae01..1253a347 100644
--- a/pages/examples/advanced/async-loops.mdx
+++ b/pages/examples/advanced/async-loops.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Agent Asynchronous Loops
 
@@ -19,7 +19,8 @@ In this example, we demonstrate how to use agents to communicate and exchange st
 
 
 
-    ```py copy filename="local-external_loop_attach.py"
+
+    ```py copy filename="external_loop_attach.py"
     import asyncio
     import contextlib
 
@@ -67,14 +68,15 @@ In this example, we demonstrate how to use agents to communicate and exchange st
         with contextlib.suppress(KeyboardInterrupt):
             loop.run_forever()
     ```
+    
 
     This script demonstrates how to run an agent using an external event loop. For this example to run correctly, remember to provide a `seed` phrase to the agent. It initializes an agent and attaches it to a loop where it performs continuous background work (`coro()` function) alongside the agent's operations. You can choose to run either the agent or the entire `bureau` with the external loop. This approach provides greater flexibility when integrating the agent with other asynchronous tasks.
 
 #### Script 2
 
 
-
-    ```py copy filename="local-external_loop_run.py"
+
+    ```py copy filename="external_loop_run.py"
     import asyncio
 
     from uagents import Agent, Bureau, Context
@@ -120,6 +122,7 @@ In this example, we demonstrate how to use agents to communicate and exchange st
         # > when starting the external loop from the bureau
         # bureau.run()
     ```
+    
 
 
     This script shows how to run an agent with its own **internal event loop**. For this example to run correctly, remember to provide a `seed` phrase to the agent. The agent is initialized with the `loop`, and both the agent and its background coroutine (`coro()` function) run within the same loop. This setup simplifies the integration by keeping everything within a single event `loop`, which can be advantageous for applications where you want the agent's lifecycle tightly coupled with its event handling function.
diff --git a/pages/examples/advanced/open-dialogue-chitchat.mdx b/pages/examples/advanced/open-dialogue-chitchat.mdx
index 93728dd7..ef28250b 100644
--- a/pages/examples/advanced/open-dialogue-chitchat.mdx
+++ b/pages/examples/advanced/open-dialogue-chitchat.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Open Dialogue Chit-Chat
 
@@ -26,21 +26,25 @@ This script sets up the `ChitChatDialogue` class, This system includes nodes rep
 - Create a python file `chitchat.py` in `Dialogues` directory.
 
 
-    
-
-        ```py copy filename="mac"
-        touch chitchat.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > chitchat.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch chitchat.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > chitchat.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch chitchat.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch chitchat.py
+    ```
+    
 
-    
+
 
 - Import required libraries.
 
@@ -206,24 +210,29 @@ The contents of this script are to be shared between the agents that want to use
 
 
 
-
+
     ```py copy filename="mac"
     touch agent1.py
     ```
-
+
+
     ```py copy filename="windows"
     echo. > agent1.py
     ```
+
 
+
     ```py copy filename="ubuntu"
     touch agent1.py
     ```
+    
 
 
 
 
+    
 
-    ```python copy filename="local-agent1.py"
+    ```python copy filename="agent1.py"
     # Import required libraries
     import json
 
@@ -337,30 +346,35 @@ The contents of this script are to be shared between the agents that want to use
         print(f"Agent address: {agent.address}")
         agent.run()
     ```
+    
 
 
 - Create Python `agent2.py` script:
 
 
-
+
     ```py copy filename="mac"
     touch agent2.py
     ```
-
+
+
     ```py copy filename="windows"
     echo. > agent2.py
     ```
-    
+
+
+
     ```py copy filename="ubuntu"
     touch agent2.py
     ```
-    
+    
 
 
 
 
+    
 
-    ```python copy filename="local-agent2.py"
+    ```python copy filename="agent2.py"
     """Chit chat dialogue example"""
 
     from asyncio import sleep
@@ -478,6 +492,7 @@ The contents of this script are to be shared between the agents that want to use
         print(f"Agent address: {agent.address}")
         agent.run()
     ```
+    
 
     
       Remember to update the agent's address to communicate to each other and seed phrase of own choice. 
diff --git a/pages/examples/advanced/predefined-dialogue-chitchat.mdx b/pages/examples/advanced/predefined-dialogue-chitchat.mdx
index 9f3390bb..38208c60 100644
--- a/pages/examples/advanced/predefined-dialogue-chitchat.mdx
+++ b/pages/examples/advanced/predefined-dialogue-chitchat.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Predefined Dialogue Chit-Chat
 
@@ -25,21 +25,25 @@ This example illustrates an automated dialogue scenario using a hardcoded dialog
 - Open a terminal and create a directory using `mkdir Dialogues` and navigate into it with `cd Dialogues`.
 - Create a python file `hardcoded_chitchat.py` in `Dialogues` directory:
 
-    
-
-        ```py copy filename="mac"
-        touch chitchat.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > chitchat.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch chitchat.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > chitchat.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch chitchat.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch chitchat.py
+    ```
+    
 
-    
+
   
 - Import required libraries.
 
@@ -242,8 +246,9 @@ These two agents use the `hardcoded_chitchat` dialogue system to automate the in
     - Copy the following script into `agent1.py`:
     
 
+    
 
-        ```python copy filename="local-agent1.py"
+        ```python copy filename="agent1.py"
         # Import required libraries
         import json
 
@@ -299,6 +304,7 @@ These two agents use the `hardcoded_chitchat` dialogue system to automate the in
             agent.run()  # Running agent
 
         ```
+        
 
 ### Setting up `agent2`
 
@@ -308,8 +314,8 @@ These two agents use the `hardcoded_chitchat` dialogue system to automate the in
     - Paste the following code into `agent2.py`:
 
 
-
-        ```python copy filename="local-agent2.py"
+    
+        ```python copy filename="agent2.py"
         """Chit chat dialogue example"""
 
         from asyncio import sleep
@@ -361,6 +367,7 @@ These two agents use the `hardcoded_chitchat` dialogue system to automate the in
             print(f"Agent address: {agent.address}")
             agent.run()
         ```
+        
 
     
       Remember to update the agent's address to communicate to each other and seed phrase of own choice. 
diff --git a/pages/examples/getting-started/first-agent.mdx b/pages/examples/getting-started/first-agent.mdx
index f60e46a2..d0fb5016 100644
--- a/pages/examples/getting-started/first-agent.mdx
+++ b/pages/examples/getting-started/first-agent.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Create your first Agent
 
@@ -22,8 +22,8 @@ Let's get started and explore the basic concepts you need to develop your first
 ## The agent
 
 
-
-        ```py copy filename="local-agent.py"
+    
+        ```py copy filename="agent.py"
         # Import necessary classes from the uAgents library
         from uagents import Agent, Context
 
@@ -40,8 +40,10 @@ Let's get started and explore the basic concepts you need to develop your first
         if __name__ == "__main__":
             agent.run()
         ```
+        
 
-        ```py copy filename="hosted-agent.py"
+        
+        ```py copy filename="agent.py"
         # Import necessary classes from the uAgents library
         from uagents import Agent, Context
         # Function to be called when the agent is started
@@ -50,10 +52,11 @@ Let's get started and explore the basic concepts you need to develop your first
             # Print a greeting message with the agent's name and its address
             print(f"Hello, I'm agent {ctx.name} and my address is {agent.address}.")
         ```
+        
 
 
 ## Expected Output
 
 ```
 Hello, I'm agent alice and my address is agent1qtx288pfqm9e5qausyzdy6zmmn65ytwygqdq2h7d4g0q80ft04rygg96jtt.
-```
+```
\ No newline at end of file
diff --git a/pages/examples/intermediate/agent-and-function-api.mdx b/pages/examples/intermediate/agent-and-function-api.mdx
index 83f6fb78..42a4cd77 100644
--- a/pages/examples/intermediate/agent-and-function-api.mdx
+++ b/pages/examples/intermediate/agent-and-function-api.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Agents and Functions Creation using APIs
 
@@ -29,7 +29,10 @@ This example provides details on how to create Agents and respective Agent Funct
     - Create a python file `agent.py` in this directory and include the following sample script in the Python file.
 
 
-    ```python copy filename="local-agent.py"
+      
+    ```python copy filename="agent.py"
+    from uagents import Agent, Bureau, Context, Model
+    from uagents.setup import fund_agent_if_low
     import requests
     from ai_engine import UAgentResponse, UAgentResponseType
 
@@ -92,8 +95,10 @@ This example provides details on how to create Agents and respective Agent Funct
 
     location_agent.run()
     ```
+    
 
-    ```python copy filename="hosted-agent.py"
+
+    ```python copy filename="agent.py"
     import requests
     from ai_engine import UAgentResponse, UAgentResponseType
 
@@ -134,6 +139,7 @@ This example provides details on how to create Agents and respective Agent Funct
 
     agent.include(location_protocol)
     ```
+    
 
 
 - Create a python file with name `agent_create.py`.
diff --git a/pages/examples/intermediate/agents-cleaning-demo.mdx b/pages/examples/intermediate/agents-cleaning-demo.mdx
index 7b574f6e..1133f990 100644
--- a/pages/examples/intermediate/agents-cleaning-demo.mdx
+++ b/pages/examples/intermediate/agents-cleaning-demo.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Cleaning service with Agents
 
@@ -30,8 +30,8 @@ The protocol ensures the provider's services are available to the user's locatio
 Here is the full code:
 
 
-
-```py copy filename="local-__init__.py"
+
+```py copy filename="__init__.py"
 from datetime import datetime, timedelta
 from typing import List
 
@@ -144,6 +144,7 @@ async def handle_book_request(ctx: Context, sender: str, msg: ServiceBooking):
     # send the response
     await ctx.send(sender, BookingResponse(success=success))
 ```
+
 
 
 #### models.py
@@ -157,7 +158,8 @@ We now need to define the data structure for the cleaning service application. W
 * `Availability`: to define the provider's service schedule, including maximum service distance, start and end times, and minimum hourly price.
 
 Here is the full code:
-
+
+
 ```py copy filename="models.py"
 from enum import IntEnum
 
@@ -197,12 +199,14 @@ class Availability(models.Model):
     time_end = fields.DatetimeField()
     min_hourly_price = fields.FloatField(default=0.0)
 ```
+
+
 
 ### Agents
 #### The Cleaner Agent
 
-
-```py copy filename="local-cleaner.py"
+
+```py copy filename="cleaner.py"
 from datetime import datetime
 
 from protocols.cleaning import cleaning_proto
@@ -255,12 +259,14 @@ async def shutdown(_ctx: Context):
 if __name__ == "__main__":
     cleaner.run()
 ```
+
 
 
 #### User
 
 
-```py copy filename="local-user.py"
+
+```py copy filename="user.py"
 from datetime import datetime, timedelta
 
 from protocols.cleaning import (
@@ -336,4 +342,5 @@ async def handle_book_response(ctx: Context, _sender: str, msg: BookingResponse)
 if __name__ == "__main__":
     user.run()
 ```
+
 
diff --git a/pages/examples/intermediate/agents-interval-task.mdx b/pages/examples/intermediate/agents-interval-task.mdx
index 2d542642..18b08ea6 100644
--- a/pages/examples/intermediate/agents-interval-task.mdx
+++ b/pages/examples/intermediate/agents-interval-task.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Interval task with Agents
 
@@ -17,8 +17,9 @@ This example shows how to use the uAgents Framework library to set up an interva
 
 ### The agent
 
- 
-    ```py copy filename="local-interval-task.py"
+
+ 
+    ```py copy filename="interval-task.py"
     from uagents import Agent, Context
 
     alice = Agent(name="alice", seed="alice recovery phrase")
@@ -30,12 +31,14 @@ This example shows how to use the uAgents Framework library to set up an interva
     if __name__ == "__main__":
         alice.run()
     ```
-    
-    ```py copy filename="hosted-interval-task.py"
+    
+     
+    ```py copy filename="interval-task.py"
     from uagents import Agent, Context
 
     @agent.on_interval(period=2.0)
     async def say_hello(ctx: Context):
         ctx.logger.info(f'hello, my name is {ctx.name}')
     ```
+    
 
\ No newline at end of file
diff --git a/pages/examples/intermediate/agents-with-docker.mdx b/pages/examples/intermediate/agents-with-docker.mdx
index 181be4d0..0f02729e 100644
--- a/pages/examples/intermediate/agents-with-docker.mdx
+++ b/pages/examples/intermediate/agents-with-docker.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Running an Agent with Docker
 
@@ -45,7 +45,9 @@ This example demonstrates a simple agent-based communication system using the uA
 
 
 
-```py copy filename="local-agent.py"
+    
+
+```py copy filename="agent.py"
 
 from uagents import Agent, Bureau, Context, Model
 
@@ -116,6 +118,7 @@ bureau.add(data_receiver)
 if __name__ == "__main__":
     bureau.run()
 ```
+
 
 
 ### `Dockerfile`
diff --git a/pages/examples/intermediate/broadcast.mdx b/pages/examples/intermediate/broadcast.mdx
index 4d5caa3a..942d6b98 100644
--- a/pages/examples/intermediate/broadcast.mdx
+++ b/pages/examples/intermediate/broadcast.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Agents broadcast
 
@@ -20,7 +20,9 @@ This file can be run on any platform supporting Python, with the necessary insta
 
 
 
-```python copy filename="local-broadcast.py"
+    
+
+```python copy filename="broadcast.py"
 from uagents import Agent, Bureau, Context, Model, Protocol
 
 # create agents
@@ -69,6 +71,7 @@ bureau.add(charles)
 if __name__ == "__main__":
     bureau.run()
 ```
+
 
 ### Expected output
 
diff --git a/pages/examples/intermediate/coin-toss.mdx b/pages/examples/intermediate/coin-toss.mdx
index 70fe3a2d..87f216c5 100644
--- a/pages/examples/intermediate/coin-toss.mdx
+++ b/pages/examples/intermediate/coin-toss.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Register a coin toss agent as a Function
 
@@ -28,8 +28,9 @@ To enable this on [DeltaV ↗️](/concepts/ai-engine/deltav) you will need to c
 ### The agent
 
 
-
-```python copy filename="local-agent.py"
+    
+
+```python copy filename="agent.py"
 import random
 from uagents import Agent, Context, Model, Field, Protocol
 from uagents.setup import fund_agent_if_low
@@ -81,6 +82,9 @@ coin_toss_agent.include(coin_toss_protocol, publish_manifest=True)
 if __name__ == "__main__":
     coin_toss_agent.run()
 ```
+
+
+
 
 ```python copy filename="hosted-agent.py"
 import random
@@ -112,4 +116,5 @@ async def toss_coin(ctx: Context, sender: str, msg: CoinToss):
 
 agent.include(coin_toss_protocol, publish_manifest=True)
 ```
+
 
diff --git a/pages/examples/intermediate/dice-roll.mdx b/pages/examples/intermediate/dice-roll.mdx
index dc94f18d..caa1a79c 100644
--- a/pages/examples/intermediate/dice-roll.mdx
+++ b/pages/examples/intermediate/dice-roll.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Register a dice roll agent as a Function
 
@@ -28,7 +28,8 @@ To enable this on [DeltaV ↗️](/concepts/ai-engine/deltav) you will need to c
 ### The agent
 
 
-```py copy filename="local-agent.py"
+
+```py copy filename="agent.py"
 import random
 from uagents import Agent, Context, Model, Field, Protocol
 from uagents.setup import fund_agent_if_low
@@ -73,8 +74,10 @@ dice_roll_agent.include(dice_roll_protocol, publish_manifest=True)
 if __name__ == "__main__":
     dice_roll_agent.run()
 ```
+
 
-```py copy filename="hosted-agent.py"
+ 
+```py copy filename="agent.py"
 import random
 # third party modules used in this example
 from uagents import Field
@@ -97,4 +100,5 @@ async def roll_dice(ctx: Context, sender: str, msg: DiceRoll):
 
 agent.include(dice_roll_protocol, publish_manifest=True)
 ```
+
 
diff --git a/pages/examples/intermediate/hugging-face-agent.mdx b/pages/examples/intermediate/hugging-face-agent.mdx
index 47df01e0..3292afa5 100644
--- a/pages/examples/intermediate/hugging-face-agent.mdx
+++ b/pages/examples/intermediate/hugging-face-agent.mdx
@@ -24,8 +24,9 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
 #### Hugging Face System Agent
 
 
+    
 
-        ```python copy filename="local-agent.py"
+        ```python copy filename="agent.py"
         # Here we demonstrate how we can create a hugging face system agent that is compatible with DeltaV.
 
         # Importing required libraries.
@@ -78,7 +79,11 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
         hf_agent.run()
     ```
 
-    ```python copy filename="hosted-agent.py"
+    
+
+    
+
+    ```python copy filename="agent.py"
         # Here we demonstrate how we can create a hugging face system agent that is compatible with DeltaV.
 
         # After running this agent, it can be registered to DeltaV on Agentverse. For registration you will have to use the agent's address.
@@ -109,13 +114,16 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
         # Include the Hugging Face protocol in your agent.
         agent.include(hf_protocol)
     ```
+    
 
 
 #### Hugging Face Request Agent
 
 
 
-        ```python copy filename="local-agent.py"
+    
+
+        ```python copy filename="agent.py"
         # Here we demonstrate how we can create a hugging face request agent that is compatible with DeltaV.
 
         # After running this agent, it can be registered to DeltaV on Agentverse. For registration you will have to use the agent's address.
@@ -184,8 +192,11 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
 
         hf_request_agent.run()
     ```
+    
 
-    ```python copy filename="hosted-agent.py"
+    
+
+    ```python copy filename="agent.py"
         # Here we demonstrate how we can create a hugging face request agent that is compatible with DeltaV.
 
         # After running this agent, it can be registered to DeltaV on Agentverse. For registration you will have to use the agent's address.
@@ -231,12 +242,15 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
         # Include the Hugging Face protocol in your agent.
         agent.include(hfprotocol, publish_manifest = True)
     ```
+    
 
 #### Model List Agent
 
 
 
-        ```python copy filename="local-agent.py"
+    
+
+        ```python copy filename="agent.py"
         # Here we demonstrate how we can create a model list agent that is compatible with DeltaV.
 
         # Importing required libraries.
@@ -315,8 +329,11 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
 
         model_list_agent.run()
     ```
+    
+
+    
 
-    ```python copy filename="hosted-agent.py"
+    ```python copy filename="agent.py"
         # Here we demonstrate how we can create a model list agent that is compatible with DeltaV.
 
         # After running this agent, it can be registered to DeltaV on Agentverse. For registration you will have to use the agent's address.
@@ -376,4 +393,5 @@ This system shows how to integrate the Hugging Face API with an Agentverse Agent
         # Include model_list protocol in agent.
         agent.include(model_list_protocol, publish_manifest = True)
     ```
+    
 
\ No newline at end of file
diff --git a/pages/examples/intermediate/langchain-rag.mdx b/pages/examples/intermediate/langchain-rag.mdx
index 756558ad..d9cbffe7 100644
--- a/pages/examples/intermediate/langchain-rag.mdx
+++ b/pages/examples/intermediate/langchain-rag.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Langchain RAG Agent
 
@@ -132,8 +132,9 @@ class RagRequest(Model):
 This agent answers questions by fetching and summarizing information from a given website. It checks and scrapes URLs, uses LangChain to find important documents, and generates answers with OpenAI's GPT-4o-mini model.
 
 
+    
 
-```python copy filename="local-langchain_rag_agent.py"
+```python copy filename="langchain_rag_agent.py"
 import traceback
 from uagents import Agent, Context, Protocol
 import validators
@@ -272,6 +273,7 @@ if __name__ == "__main__":
     agent.run()
 
 ```
+
 
 
 ### Langchain user agent
@@ -279,8 +281,8 @@ if __name__ == "__main__":
 The agent is designed to ask a predefined question to a RAG agent at regular intervals and handle the responses.
 
 
-
-```python copy filename="local-langchain_rag_user.py"
+
+```python copy filename="langchain_rag_user.py"
 from uagents import Agent, Context, Protocol
 from messages.requests import RagRequest
 from ai_engine import UAgentResponse
@@ -325,8 +327,11 @@ if __name__ == "__main__":
     rag_user.run()
 
 ```
+
+
+
 
-```python copy filename="hosted-langchain_rag_user.py"
+```python copy filename="langchain_rag_user.py"
 from uagents import Agent, Context, Protocol, Field
 from ai_engine import UAgentResponse
 
@@ -369,6 +374,7 @@ async def handle_data(ctx: Context, sender: str, data: UAgentResponse):
 agent.include(rag_user)
 
 ```
+
 
 
 ```python copy filename="main.py"
diff --git a/pages/examples/intermediate/local-agent-langchain.mdx b/pages/examples/intermediate/local-agent-langchain.mdx
index 67535db7..3b3edd3a 100644
--- a/pages/examples/intermediate/local-agent-langchain.mdx
+++ b/pages/examples/intermediate/local-agent-langchain.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Locally Hosted Agent with LangChain Integration
 
@@ -26,7 +26,9 @@ This guide demonstrates how to run an agent on your own hardware or infrastructu
 
 
 
-```py copy filename="local-agent.py"
+    
+
+```py copy filename="agent.py"
 from langchain_community.tools import WikipediaQueryRun
 from langchain_community.utilities import WikipediaAPIWrapper
 from uagents.setup import fund_agent_if_low
@@ -70,6 +72,7 @@ async def load_dalle(ctx: Context, sender: str, msg: WikiReq):
 WikiAgent.include(wiki_protocol, publish_manifest=True)
 WikiAgent.run()
 ```
+
 
 ### Register Agent Function
 
diff --git a/pages/examples/intermediate/local-agent-registration.mdx b/pages/examples/intermediate/local-agent-registration.mdx
index 05a660ff..6de3f52b 100644
--- a/pages/examples/intermediate/local-agent-registration.mdx
+++ b/pages/examples/intermediate/local-agent-registration.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Register a local agent as a Function
 
@@ -27,7 +27,8 @@ This file can be run on any platform supporting Python, with the necessary insta
 ### The script
 
 
-```py copy filename="local-agent.py"
+     
+```py copy filename="agent.py"
 from uagents.setup import fund_agent_if_low
 from uagents import Agent, Context, Protocol, Model
 import random
@@ -65,8 +66,10 @@ dungeons.include(dice_roll_protocol, publish_manifest=True)
 
 dungeons.run()
 ```
+
 
-```py copy filename="hosted-agent.py"
+ 
+```py copy filename="agent.py"
 from uagents import Agent, Context, Protocol, Model
 import random
 from uagents import Field
@@ -91,6 +94,7 @@ async def roll_dice(ctx: Context, sender: str, msg: Request):
 
 agent.include(dice_roll_protocol, publish_manifest=True)
 ```
+
 
 
 ### Register Agent Function
diff --git a/pages/examples/intermediate/local-communication.mdx b/pages/examples/intermediate/local-communication.mdx
index e0e283d8..2fe24ebf 100644
--- a/pages/examples/intermediate/local-communication.mdx
+++ b/pages/examples/intermediate/local-communication.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Local Network Interaction
 
@@ -18,7 +18,8 @@ This file can be run on any platform supporting Python, with the necessary insta
 
 
 
-```py copy filename="local-agent_1.py"
+ 
+```py copy filename="agent_1.py"
 from uagents import Agent, Context, Model
 
 # NOTE: Run agent1.py before running agent2.py
@@ -43,8 +44,10 @@ async def message_handler(ctx: Context, sender: str, msg: Message):
 if __name__ == "__main__":
     bob.run()
 ```
+
 
-```py copy filename="hosted-agent_1.py"
+ 
+```py copy filename="agent_1.py"
 from uagents import Agent, Context, Model
 
 # NOTE: Run agent1.py before running agent2.py
@@ -59,13 +62,14 @@ async def message_handler(ctx: Context, sender: str, msg: Message):
     # send the response
     await ctx.send(sender, Message(message="Hello there alice."))
 ```
+
 
 
 ### Agent 2
 
 
-
-```py copy filename="local-agent_2.py"
+ 
+```py copy filename="agent_2.py"
 from uagents import Agent, Context, Model
 
 class Message(Model):
@@ -93,8 +97,10 @@ async def message_handler(ctx: Context, sender: str, msg: Message):
 if __name__ == "__main__":
     alice.run()
 ```
+
 
-```py copy filename="hosted-agent_2.py"
+ 
+```py copy filename="agent_2.py"
 from uagents import Agent, Context, Model
 
 class Message(Model):
@@ -112,6 +118,7 @@ async def send_message(ctx: Context):
 async def message_handler(ctx: Context, sender: str, msg: Message):
     ctx.logger.info(f"Received message from {sender}: {msg.message}")
 ```
+
 
 
 ### Expected output
diff --git a/pages/examples/intermediate/mailbox-agents.mdx b/pages/examples/intermediate/mailbox-agents.mdx
index e38ad00f..de7e384b 100644
--- a/pages/examples/intermediate/mailbox-agents.mdx
+++ b/pages/examples/intermediate/mailbox-agents.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Agents communication using Agentverse Mailbox feature
 
@@ -21,7 +21,8 @@ A **Mailbox** allows your agent to receive messages sent to its address even whe
 
 
 
-    ```py copy filename="local-agent_1.py"
+    
+    ```py copy filename="agent_1.py"
     from uagents import Agent, Context, Model
     from uagents.setup import fund_agent_if_low
 
@@ -56,13 +57,14 @@ A **Mailbox** allows your agent to receive messages sent to its address even whe
     if __name__ == "__main__":
         agent.run()
    ```
+   
 
 
 ### Agent 2: Agentverse Agent
 
 
-
-    ```py copy filename="hosted-agent_2.py"
+ 
+    ```py copy filename="agent_2.py"
     from uagents import Agent, Context, Model
 
     class Message(Model):
@@ -80,6 +82,7 @@ A **Mailbox** allows your agent to receive messages sent to its address even whe
     async def on_message(ctx: Context, sender: str, msg: Message):
         ctx.logger.info(f"Received message from {sender}: {msg.message}")
    ```
+   
 
 ### Output
 
diff --git a/pages/examples/intermediate/multiple-agents.mdx b/pages/examples/intermediate/multiple-agents.mdx
index f1c785f4..12e68f80 100644
--- a/pages/examples/intermediate/multiple-agents.mdx
+++ b/pages/examples/intermediate/multiple-agents.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Multiple agents communication
 
@@ -13,10 +13,9 @@ This file can be run on any platform supporting Python, with the necessary insta
 - [Creating an interval task ↗️](/guides/agents/interval-task)
 
 #### The agent
-
 
-
-```py copy filename="local-agents.py"
+ 
+```py copy filename="agents.py"
 from uagents import Agent, Bureau, Context
 
 alice = Agent(name="alice")
@@ -37,4 +36,5 @@ bureau.add(bob)
 if __name__ == "__main__":
     bureau.run()
 ```
+
 
\ No newline at end of file
diff --git a/pages/examples/intermediate/name-service.mdx b/pages/examples/intermediate/name-service.mdx
index 0c2ad1c4..4f48ef45 100644
--- a/pages/examples/intermediate/name-service.mdx
+++ b/pages/examples/intermediate/name-service.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Agents Name Service
 
@@ -63,8 +63,8 @@ if __name__ == "__main__":
 ### Agent 2
 
 
-
-```py copy filename="local-agent_2.py"
+ 
+```py copy filename="agent_2.py"
 from uagents.setup import fund_agent_if_low
 from uagents import Agent, Context, Model
 
@@ -102,6 +102,7 @@ async def alice_interval_handler(ctx: Context):
     ctx.logger.info(f"Sending message to {bob_name}...")
     await ctx.send(bob_name, Message(message="Hello there bob."))
 ```
+
 
 
 ## Expected output
diff --git a/pages/examples/intermediate/news-reading-system.mdx b/pages/examples/intermediate/news-reading-system.mdx
index 2a55e0b4..0c76bb51 100644
--- a/pages/examples/intermediate/news-reading-system.mdx
+++ b/pages/examples/intermediate/news-reading-system.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Using News API to build network of Primary and Secondary functions
 
@@ -20,8 +20,9 @@ This file can be run on any platform supporting Python, with the necessary insta
 #### News Reading Agent
 
 
+    
 
-    ```python copy filename="local-agent.py"
+    ```python copy filename="agent.py"
 
     # Here we demonstrate how we can create a news reading system agent that is compatible with DeltaV
 
@@ -75,8 +76,11 @@ This file can be run on any platform supporting Python, with the necessary insta
 
     news_agent.run()
     ```
+
 
-    ```python copy filename="hosted-agent.py"
+    
+
+    ```python copy filename="agent.py"
 
     # Here we demonstrate how we can create a news reading system agent that is compatible with DeltaV
 
@@ -109,12 +113,14 @@ This file can be run on any platform supporting Python, with the necessary insta
     # Include the Generate News protocol in your agent
     agent.include(news_protocol)
     ```
+    
 
 #### News Generating Agent
 
 
 
-    ```python copy filename="local-agent.py"
+
+    ```python copy filename="agent.py"
     # Here we demonstrate how we can create a news generating agent that is compatible with DeltaV.
 
     # Import required libraries
@@ -190,8 +196,9 @@ This file can be run on any platform supporting Python, with the necessary insta
 
     generate_news_agent.run()
     ```
-
-    ```python copy filename="hosted-agent.py"
+
+
+    ```python copy filename="agent.py"
     # Here we demonstrate how we can create a news generating agent that is compatible with DeltaV.
     # After running this agent, it can be registered to DeltaV on Agentverse My Agents tab. For registration you will have to use the agent's address.
 
@@ -245,13 +252,14 @@ This file can be run on any platform supporting Python, with the necessary insta
     # Include the Generate News protocol in your agent.
     agent.include(generate_news_protocol)
     ```
+    
 
 
 #### Generate Categorical News
 
 
-
-    ```python copy filename="local-agent.py"
+
+    ```python copy filename="agent.py"
     # Here we demonstrate how we can create a categorical news generating agent that is compatible with DeltaV.
 
     # Importing libraries
@@ -331,8 +339,10 @@ This file can be run on any platform supporting Python, with the necessary insta
 
     generate_cat_news_agent.run()
     ```
+
 
-    ```python copy filename="hosted-agent.py"
+
+    ```python copy filename="agent.py"
     # Here we demonstrate how we can create a categorical news generating agent that is compatible with DeltaV.
     # After running this agent, it can be registered to DeltaV on Agentverse My Agents tab. For registration you will have to use the agent's address.
 
@@ -390,12 +400,14 @@ This file can be run on any platform supporting Python, with the necessary insta
     # Include the Generate News protocol in your agent.
     agent.include(generate_cat_news_protocol)
     ```
+    
 
 
 #### Generate Regional News
 
 
-    ```python copy filename="local-agent.py"
+    
+    ```python copy filename="agent.py"
     # Import libraries
     import requests
     import json
@@ -489,6 +501,9 @@ This file can be run on any platform supporting Python, with the necessary insta
 
     generate_news_reg_agent.run()
     ```
+    
+
+    
 
     ```python copy filename="hosted-agent.py"
     # Import libraries
@@ -561,13 +576,14 @@ This file can be run on any platform supporting Python, with the necessary insta
     # Include the Generate Regional News protocol in your agent
     agent.include(generate_news_protocol)
     ```
+    
 
 
 #### Generate Keyword News
 
 
-
-    ```python copy filename="local-agent.py"
+
+    ```python copy filename="agent.py"
     # Import libraries
     import requests
     from uagents import Agent, Context, Model, Field, Protocol
@@ -646,8 +662,10 @@ This file can be run on any platform supporting Python, with the necessary insta
 
     generate_news_keyw_agent.run()
     ```
+
 
-    ```python copy filename="hosted-agent.py"
+
+    ```python copy filename="agent.py"
     # Import libraries
     import requests
     import json
@@ -703,4 +721,5 @@ This file can be run on any platform supporting Python, with the necessary insta
     # Include the Generate Keyword News protocol in your agent
     agent.include(generate_news_keyw_protocol)
     ```
+    
 
\ No newline at end of file
diff --git a/pages/examples/intermediate/on-query-proxy.mdx b/pages/examples/intermediate/on-query-proxy.mdx
index 9856d75b..e33f8cc7 100644
--- a/pages/examples/intermediate/on-query-proxy.mdx
+++ b/pages/examples/intermediate/on-query-proxy.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Query an agent using a proxy API
 
@@ -18,8 +18,8 @@ This example shows how to query an agent using a proxy API.
 #### The agent
 
 
-
-```py copy filename="local-agent.py"
+ 
+```py copy filename="agent.py"
 from uagents import Agent, Context, Model
 
 class TestRequest(Model):
@@ -53,8 +53,11 @@ async def query_handler(ctx: Context, sender: str, _query: TestRequest):
 if __name__ == "__main__":
     agent.run()
 ```
+
+
+ 
 
-```py copy filename="hosted-agent.py"
+```py copy filename="agent.py"
 from uagents import Agent, Context, Model
 
 class TestRequest(Model):
@@ -78,6 +81,7 @@ async def query_handler(ctx: Context, sender: str, _query: TestRequest):
     except Exception:
         await ctx.send(sender, Response(text="fail"))
 ```
+
 
 
 The agent is created using the `Agent` class from `uagents` library. It is initialized with a `name`, `seed`, `port`, and `endpoint`.
diff --git a/pages/examples/intermediate/on-query.mdx b/pages/examples/intermediate/on-query.mdx
index 81e59b1e..d45e069a 100644
--- a/pages/examples/intermediate/on-query.mdx
+++ b/pages/examples/intermediate/on-query.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # On Query decorator example
 
@@ -24,8 +24,8 @@ This documentation outlines the steps to set up and enable communication between
 This agent handles queries related to job searches using SerpAPI. It provides information about available jobs for a job title specified by the user.
 
 
-
-```py copy filename="local-JobSearchAgent.py"
+  
+```py copy filename="JobSearchAgent.py"
 # import required libraries
 import json
 
@@ -124,6 +124,7 @@ async def query_handler(ctx: Context, sender: str, msg: Request):
 if __name__ == "__main__":
     SearchAgent.run()
 ```
+
 
 Please update agent's secret phrase and serpapi API key. You can find serpapi API key on [SerpAPI API key ↗️](https://serpapi.com/)
 
diff --git a/pages/examples/intermediate/on_query_example.mdx b/pages/examples/intermediate/on_query_example.mdx
index 01cc6556..11cce62b 100644
--- a/pages/examples/intermediate/on_query_example.mdx
+++ b/pages/examples/intermediate/on_query_example.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components' 
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 ##  Shopping Assistance Agent using `on_query`
 
@@ -41,7 +41,8 @@ class ShoppingAssistResponse(Model):
  - **Shopping Assistance Agent :** This code defines a shopping assistant agent using the uAgents framework. The agent listens for incoming `ShoppingRequest` messages, processes them by sending the user's question to OpenAI's GPT-4 API for a response, and then sends the generated response back to the sender as a `ShoppingAssistResponse`.
 
 
-```py copy filename="local-agent.py"
+    
+```py copy filename="agent.py"
 from uagents import Agent, Context
 from uagents.setup import fund_agent_if_low
 from models import ShoppingAssistResponse, ShoppingRequest
@@ -133,8 +134,11 @@ if __name__ == "__main__":
     agent.run()
 
 ```
+
 
-```py copy filename="hosted-agent.py"
+
+
+```py copy filename="agent.py"
 from uagents import Agent, Context
 import requests
 import json
@@ -216,6 +220,7 @@ async def handler(ctx: Context, sender: str, msg: ShoppingRequest):
     await ctx.send(sender, ShoppingAssistResponse(answer=response))
 
 ```
+
 
 
    You need to have an OpenAI API key to run this example. You can get it from [OpenAI ↗️](https://openai.com/) .
diff --git a/pages/examples/intermediate/postgres-database-with-an-agent.mdx b/pages/examples/intermediate/postgres-database-with-an-agent.mdx
index 4f7c5939..a2c5b2c3 100644
--- a/pages/examples/intermediate/postgres-database-with-an-agent.mdx
+++ b/pages/examples/intermediate/postgres-database-with-an-agent.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Utilize the PostgreSQL database with the Agent
     
@@ -225,8 +225,9 @@ This script sets up and runs two agents, `db_insert_agent` and `db_fetch_agent`,
 3. **Fetching Data**: `db_fetch_agent` will fetch and log all employee details upon request.
 
 
+
 
-```py copy filename="local-main.py"
+```py copy filename="main.py"
 from db.db_connection import create_connection
 from uagents import Agent, Context, Bureau
 from db.models.models import Employees, GetEmployees
@@ -362,6 +363,7 @@ if __name__ == "__main__":
     bureau.run()
 
 ```
+
 
 
 This constant file initializes a dictionary for storing employee data and configures the database connection parameters using environment variables. It also defines a constant for the address of the database fetch agent.
diff --git a/pages/examples/intermediate/react_example.mdx b/pages/examples/intermediate/react_example.mdx
index ff9b0387..c9b19f0e 100644
--- a/pages/examples/intermediate/react_example.mdx
+++ b/pages/examples/intermediate/react_example.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components' 
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # React app with agents 'on_query' decorator
 
@@ -165,8 +165,10 @@ In this section we will setup agents and as well as flask app which will respond
     - **News and URL agent:** Fetches news articles titles and url for them as well.
 
 
+
+    
  
-   ```python copy filename="local-news_agent.py"
+   ```python copy filename="news_agent.py"
    # Import Required libraries
    import requests
    import os
@@ -292,8 +294,10 @@ In this section we will setup agents and as well as flask app which will respond
    if __name__ == "__main__":
        NewsAgent.run() 
    ```
+   
 
-    ```python copy filename="hosted-news_agent.py"
+
+    ```python copy filename="news_agent.py"
    # Import Required libraries
    import requests
    from uagents import Agent, Context, Model
@@ -402,6 +406,7 @@ In this section we will setup agents and as well as flask app which will respond
            # Ensure the error message is sent as a string
            await ctx.send(sender, ErrorResponse(error=str(error_message)))
    ```
+   
 
    
        Get your [Alphavantage ↗️](https://www.alphavantage.co/) and [Gnews ↗️](https://gnews.io/) API keys and update it in the virtual environment.
@@ -410,8 +415,8 @@ In this section we will setup agents and as well as flask app which will respond
    - **WebScraper agent:** Scraps the webpage content for the given url.
 
 
-
-      ```python copy filename="local-webscraper_agent.py"
+
+      ```python copy filename="webscraper_agent.py"
       # Import Required libraries
       import requests
       import aiohttp
@@ -490,13 +495,14 @@ In this section we will setup agents and as well as flask app which will respond
       if __name__ == "__main__":
           webScraperAgent.run()
       ```
+      
 
 
    - **Sentiment agent:** Provides sentiment of news content provided using HF API and finBERT model.
 
 
-
-      ```python copy filename="local-sentiment_agent.py"
+
+      ```python copy filename="sentiment_agent.py"
       # Import Required libraries
       import requests
       from uagents import Agent, Context, Model
@@ -572,6 +578,7 @@ In this section we will setup agents and as well as flask app which will respond
       if __name__ == "__main__":
           SentimentAgent.run()
       ```
+      
 
 
     
diff --git a/pages/examples/intermediate/running-an-agent-on-agentverse.mdx b/pages/examples/intermediate/running-an-agent-on-agentverse.mdx
index 061a871d..0c058e99 100644
--- a/pages/examples/intermediate/running-an-agent-on-agentverse.mdx
+++ b/pages/examples/intermediate/running-an-agent-on-agentverse.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Run Agents on Agentverse
 
@@ -59,8 +59,9 @@ Whenever you create a local agent, you can either run a it on the Agentverse by
 Let's consider the following local agent code:
 
 
+    
 
-    ```py copy filename="local-agent.py"
+    ```py copy filename="agent.py"
     from uagents.setup import fund_agent_if_low
     from uagents import Agent, Context, Protocol, Model
 
@@ -88,6 +89,7 @@ Let's consider the following local agent code:
 
     agent.run()
     ```
+    
 
 
 The agent is initialized with an **endpoint** and a **port** so that it can receive messages, and other agents know where to send them.
@@ -116,6 +118,8 @@ Let's consider the following local agent example:
 
 
 
+    
+
     ```py copy filename="agent.py"
     from uagents import Agent, Context, Model, Protocol
 
@@ -142,6 +146,7 @@ Let's consider the following local agent example:
     if __name__ == "__main__":
         agent.run()
     ```
+    
 
 You can create a Mailbox by retrieving your **local agent address** and head over to the **Agentverse: My Agents** tab. Click on **Local Agents** and click on **Connect Local Agent** button. Provide the address and name of the local agent you wish to retrieve and wait for confirmation. You will then be able to see a **Mailbox API Key**. Copy and paste it within your local agent code by filling up the `AGENT_MAILBOX_KEY` field inline and restart the agent.
 
diff --git a/pages/examples/intermediate/send-tokens-agents.mdx b/pages/examples/intermediate/send-tokens-agents.mdx
index 71bbbec6..e853ff9e 100644
--- a/pages/examples/intermediate/send-tokens-agents.mdx
+++ b/pages/examples/intermediate/send-tokens-agents.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Send tokens with Agents
 
@@ -20,6 +20,7 @@ This example shows how to use Agents to make them send tokens to each other.
 ### The agent
 
 
+    
     ```py copy filename="local-sending_tokens.py"
     from uagents import Agent, Bureau, Context, Model
     from uagents.network import wait_for_tx_to_complete
@@ -80,7 +81,9 @@ This example shows how to use Agents to make them send tokens to each other.
     if __name__ == "__main__":
         bureau.run()
     ```
+    
 
+
 ### Expected output
 
     ```
diff --git a/pages/examples/intermediate/sending-and-verifying-token-transactions-with-agent.mdx b/pages/examples/intermediate/sending-and-verifying-token-transactions-with-agent.mdx
index 588c8982..e176c6cb 100644
--- a/pages/examples/intermediate/sending-and-verifying-token-transactions-with-agent.mdx
+++ b/pages/examples/intermediate/sending-and-verifying-token-transactions-with-agent.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Sending and verifying token transactions with Agent
 
@@ -85,8 +85,9 @@ This example demonstrates how to build a simple agent-based system for transferr
    - Upon receiving the transaction receipt, `transaction_initiator` sends a `VerificationRequest` to the `verification_agent`. The `verification_agent` checks the transaction status on the blockchain and logs the result.
 
 
+
 
-```py copy filename="local-transaction.py"
+```py copy filename="transaction.py"
 from uagents import Agent, Bureau, Context, Model
 from web3 import Web3
 from dotenv import load_dotenv
@@ -279,6 +280,7 @@ if __name__ == "__main__":
     bureau.run()
 
 ```
+
 
 
 ### Poetry Dependencies
diff --git a/pages/examples/intermediate/simple-agent-communication.mdx b/pages/examples/intermediate/simple-agent-communication.mdx
index ebeafd2d..397f91f6 100644
--- a/pages/examples/intermediate/simple-agent-communication.mdx
+++ b/pages/examples/intermediate/simple-agent-communication.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Agents communication
 
@@ -15,7 +15,8 @@ This file can be run on any platform supporting Python, with the necessary insta
 
 #### The agent
 
-    ```py copy filename="local-agents_communication.py"
+ 
+    ```py copy filename="agents_communication.py"
     from uagents import Agent, Bureau, Context, Model
 
     class Message(Model):
@@ -43,4 +44,5 @@ This file can be run on any platform supporting Python, with the necessary insta
     if __name__ == "__main__":
         bureau.run()
     ```
-
\ No newline at end of file
+
+
diff --git a/pages/examples/intermediate/storage.mdx b/pages/examples/intermediate/storage.mdx
index aa1f7a1d..3e5bc27a 100644
--- a/pages/examples/intermediate/storage.mdx
+++ b/pages/examples/intermediate/storage.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Agents storage
 
@@ -14,8 +14,8 @@ This file can be run on any platform supporting Python, with the necessary insta
 
 ### The agent
 
-
-    ```py copy filename="local-storage.py"
+
+    ```py copy filename="storage.py"
     from uagents import Agent, Context
 
     agent = Agent(name="bob")
@@ -33,8 +33,10 @@ This file can be run on any platform supporting Python, with the necessary insta
     if __name__ == "__main__":
         agent.run()
     ```
+
 
-    ```py copy filename="hosted-storage.py"
+
+    ```py copy filename="storage.py"
     from uagents import Agent, Context
 
     @agent.on_event("startup")
@@ -47,4 +49,5 @@ This file can be run on any platform supporting Python, with the necessary insta
         ctx.logger.info(f"My count is: {current_count}")
         ctx.storage.set("count", current_count + 1)
     ```
+    
 
\ No newline at end of file
diff --git a/pages/examples/intermediate/table-booking-demo.mdx b/pages/examples/intermediate/table-booking-demo.mdx
index d5a62b99..b6616e1f 100644
--- a/pages/examples/intermediate/table-booking-demo.mdx
+++ b/pages/examples/intermediate/table-booking-demo.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Table booking service with Agents
 
@@ -22,7 +22,8 @@ This example shows how to use Agents to create a table booking service at a rest
 #### Query table
 
 
-    ```py copy filename="local-query.py"
+    
+    ```py copy filename="query.py"
     from typing import List
 
     from uagents import Context, Model, Protocol
@@ -75,8 +76,10 @@ This example shows how to use Agents to create a table booking service at a rest
         total_queries = int(ctx.storage.get("total_queries") or 0)
         await ctx.send(sender, TotalQueries(total_queries=total_queries))
     ```
+
 
-    ```py copy filename="hosted-query.py"
+
+    ```py copy filename="query.py"
     from typing import List
 
     from uagents import Context, Model, Protocol
@@ -129,13 +132,15 @@ This example shows how to use Agents to create a table booking service at a rest
         total_queries = int(ctx.storage.get("total_queries") or 0)
         await ctx.send(sender, TotalQueries(total_queries=total_queries))
     ```
+    
 
 
 #### Book table
 
 
 
-    ```py copy filename="local-book.py"
+
+    ```py copy filename="book.py"
     from uagents import Context, Model, Protocol
     from .query import TableStatus
 
@@ -171,8 +176,10 @@ This example shows how to use Agents to create a table booking service at a rest
         # send the response
         await ctx.send(sender, BookTableResponse(success=success))
     ```
+    
 
-    ```py copy filename="hosted-book.py"
+
+    ```py copy filename="book.py"
     from uagents import Context, Model, Protocol
     from query import TableStatus
 
@@ -208,6 +215,7 @@ This example shows how to use Agents to create a table booking service at a rest
         # send the response
         await ctx.send(sender, BookTableResponse(success=success))
     ```
+    
 
 
 ### The Agents
@@ -215,7 +223,8 @@ This example shows how to use Agents to create a table booking service at a rest
 #### Restaurant
 
 
-    ```py copy filename="local-restaurant.py"
+    
+    ```py copy filename="restaurant.py"
     from uagents import Agent, Context
     from uagents.setup import fund_agent_if_low
     from protocols.book import book_proto
@@ -246,8 +255,10 @@ This example shows how to use Agents to create a table booking service at a rest
     if __name__ == "__main__":
         restaurant.run()
     ```
+
 
-    ```py copy filename="hosted-restaurant.py"
+
+    ```py copy filename="restaurant.py"
     from uagents import Agent, Context
     from book import book_proto
     from query import query_proto, TableStatus
@@ -266,13 +277,15 @@ This example shows how to use Agents to create a table booking service at a rest
     for (number, status) in TABLES.items():
         agent._storage.set(number, status.dict())
     ```
+    
 
 
 #### Customer/user
 
 
 
-    ```py copy filename="local-user.py"
+
+    ```py copy filename="user.py"
     from protocols.book import BookTableRequest, BookTableResponse
     from protocols.query import (
         QueryTableRequest,
@@ -339,8 +352,10 @@ This example shows how to use Agents to create a table booking service at a rest
     if __name__ == "__main__":
         user.run()
     ```
+
 
-    ```py copy filename="hosted-user.py"
+
+    ```py copy filename="user.py"
     from book import BookTableRequest, BookTableResponse
     from query import (
         QueryTableRequest,
@@ -394,6 +409,7 @@ This example shows how to use Agents to create a table booking service at a rest
 
         ctx.storage.set("completed", True)
     ```
+    
 
 ### Expected output
 
diff --git a/pages/examples/intermediate/verify-messages.mdx b/pages/examples/intermediate/verify-messages.mdx
index bfd9b57a..57cd68ca 100644
--- a/pages/examples/intermediate/verify-messages.mdx
+++ b/pages/examples/intermediate/verify-messages.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Verify messages with Agents
 
@@ -19,7 +19,8 @@ This example shows how to use Agents to make them verify authenticity of message
 ### The agent
 
 
-    ```py copy filename="local-message_verification.py"
+    
+    ```py copy filename="message_verification.py"
     import hashlib
     from uagents import Agent, Bureau, Context, Model
     from uagents.crypto import Identity
@@ -79,9 +80,9 @@ This example shows how to use Agents to make them verify authenticity of message
     if __name__ == "__main__":
         bureau.run()
     ```
+    
 
 ### Expected output
-
     ```
     [  bob]: Alice's message verified!
     [  bob]: Received message from agent1qf5gfqm48k9acegez3sg82ney2aa6l5fvpwh3n3z0ajh0nam3ssgwnn5me7: hello there bob
diff --git a/pages/examples/intermediate/wallet-messaging.mdx b/pages/examples/intermediate/wallet-messaging.mdx
index dc55c7a9..8d33e6a4 100644
--- a/pages/examples/intermediate/wallet-messaging.mdx
+++ b/pages/examples/intermediate/wallet-messaging.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code"
+import { CodeGroup, DocsCode } from "../../../components/code"
 
 # Communicating with other agents wallet
 
@@ -89,7 +89,8 @@ In this example we will create two agents locally using `uagents` library and ma
 This section presents the entire script in one block, allowing users to easily copy and paste it for testing or deployment.
 
 
-    ```py filename="local-wallet_messaging.py"
+     
+    ```py filename="wallet_messaging.py"
     from uagents import Agent, Bureau, Context
     from uagents.wallet_messaging import WalletMessage
 
@@ -119,6 +120,7 @@ This section presents the entire script in one block, allowing users to easily c
     bureau.add(bob)
     bureau.run()
     ```
+    
 
 ### Script Execution
 
diff --git a/pages/guides/agent-courses/agents-for-ai.mdx b/pages/guides/agent-courses/agents-for-ai.mdx
index e2ed4fbc..d4b0f867 100644
--- a/pages/guides/agent-courses/agents-for-ai.mdx
+++ b/pages/guides/agent-courses/agents-for-ai.mdx
@@ -1,6 +1,6 @@
 import { Callout } from 'nextra/components'
 import PackageVersion from 'components/package-version'
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Agents 101 for AI Engine
 
@@ -107,21 +107,25 @@ In this guide, our first agent takes any text and returns a sentiment of content
 We need to create a Python file for this example.
 We can do this by running:
 
-    
-
-        ```py copy filename="mac"
-        touch sentiment_agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > sentiment_agent.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch sentiment_agent.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > sentiment_agent.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch sentiment_agent.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch sentiment_agent.py
+    ```
+    
 
-    
+
 
     ```py copy filename="sentiment_agent.py"
     from uagents import Agent, Context, Protocol, Model
@@ -323,21 +327,25 @@ Okay, take a quick break then let's create the second Agent; it's time to introd
 
 The next agent in the chain is the **Summary agent**. Let's name the script `web_summary_agent.py`. To do so run:
 
-    
-
-        ```py copy filename="mac"
-        touch web_summary_agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > web_summary_agent.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch web_summary_agent.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > web_summary_agent.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch web_summary_agent.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch web_summary_agent.py
+    ```
+    
 
-    
+
 
 This Agent has the same structure as the sentiment Agent we previously defined.
 
diff --git a/pages/guides/agent-courses/introductory-course.mdx b/pages/guides/agent-courses/introductory-course.mdx
index 80572be0..b7098ada 100644
--- a/pages/guides/agent-courses/introductory-course.mdx
+++ b/pages/guides/agent-courses/introductory-course.mdx
@@ -1,6 +1,6 @@
 import { Callout } from 'nextra/components'
 import PackageVersion from 'components/package-version'
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Agents 101
 
@@ -204,21 +204,25 @@ The agents registered in the Almanac provide service endpoints for remote commun
 
 Creating your first agent is a straightforward process. First of all, we need to create a Python file for this example. We can do this by running:
 
-    
-
-        ```py copy filename="mac"
-        touch alice_agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > alice_agent.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch alice_agent.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > alice_agent.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch alice_agent.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch alice_agent.py
+    ```
+    
 
-    
+
 
 We can now code our agent. Let's start by importing the required modules. In our case, we would need to import the `Agent` module from the `uagents` library, and proceed to instantiate the agent by providing a `name`. The following code exemplifies the creation of the simplest possible agent:
 
@@ -337,21 +341,25 @@ We can now introduce a second agent to demonstrate how two agents can interact w
 
 Let's create a new Python file for these agents:
 
-    
-
-        ```py copy filename="mac"
-        touch duo_agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > duo_agent.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch duo_agent.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > duo_agent.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch duo_agent.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch duo_agent.py
+    ```
+    
 
-    
+
 
 The script will look as follows:
 
@@ -396,21 +404,25 @@ We can now show how to enable effective communication between different agents.
 
 Let's create a new script for this example:
 
-    
-
-        ```py copy filename="mac"
-        touch agent_communication.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > agent_communication.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch agent_communication.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > agent_communication.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch agent_communication.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch agent_communication.py
+    ```
+    
 
-    
+
 
 We can now define the `Message` data model and our two agents:
 
@@ -489,21 +501,25 @@ We first import modules, then initialize our agents and include a function ensur
 
 Let's create a Python script for this example:
 
-    
-
-        ```py copy filename="mac"
-        touch almanac_registration.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > almanac_registration.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch almanac_registration.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > almanac_registration.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch almanac_registration.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch almanac_registration.py
+    ```
+    
 
-    
+
 
 We will have what follows:
 
@@ -543,21 +559,25 @@ In this example, we provide scripts for two agents. To establish a line of remot
 
 We can start with `alice` agent. Let's create a Python script for it:
 
-    
-
-        ```py copy filename="mac"
-        touch remote_alice.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > remote_alice.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch remote_alice.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > remote_alice.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch remote_alice.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch remote_alice.py
+    ```
+    
 
-    
+
 
 We first import the required modules. We then use the `Model` class to define a `Message` data model for messages to be exchanged between our agents. We also need to provide Bob's address as a recipient address for reference. We can then create our agent `alice`, by providing the needed information for registration. We need to make sure it has enough balance in its wallet. We then proceed and define its functions. Remember that you need to provide the `RECIPIENT_ADDRESS`, `name`, `port`, `seed` and `endpoint` parameters to correctly run this agent and code.
 
@@ -595,21 +615,25 @@ The script would be as follows:
 
 Similarly, we need to define a script for `bob` so to create a remote communication with `alice` agent. Let's create a Python script for it:
 
-    
-
-        ```py copy filename="mac"
-        touch remote_bob.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > remote_bob.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch remote_bob.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > remote_bob.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch remote_bob.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch remote_bob.py
+    ```
+    
 
-    
+
 
 Instead of creating and manually writing out the same script we can copy and rename Alice's script and modify the agent's `name`, `seed`, `port`, decorator as well as the message content:
 
@@ -678,21 +702,25 @@ An example is provided below. In this example we have a full script for an agent
 
 We first create the Python file containing the script. Run: 
 
-    
-
-        ```py copy filename="mac"
-        touch storage.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > storage.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch storage.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > storage.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch storage.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch storage.py
+    ```
+    
 
-    
+
 
 The script for this example is:
 
diff --git a/pages/guides/agents/advanced/agents-async-loops.mdx b/pages/guides/agents/advanced/agents-async-loops.mdx
index 5df485d2..1c0250d8 100644
--- a/pages/guides/agents/advanced/agents-async-loops.mdx
+++ b/pages/guides/agents/advanced/agents-async-loops.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Agent Asynchronous Loops
 
@@ -25,21 +25,25 @@ The first script depicts how to **attach an agent to an external event loop** an
 
 First of all, let's create a Python script:
 
-    
-
-        ```py copy filename="mac"
-        touch external_loop_attach.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > external_loop_attach.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch external_loop_attach.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > external_loop_attach.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch external_loop_attach.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch external_loop_attach.py
+    ```
+    
 
-    
+
 
 Now, paste the below code into it:
 
@@ -110,21 +114,25 @@ The goal of the second script is to create an agent that runs tasks inside an ex
 
 Let's start by creating a Python script:
 
-    
-
-        ```py copy filename="mac"
-        touch external_loop_run.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > external_loop_run.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch external_loop_run.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > external_loop_run.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch external_loop_run.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch external_loop_run.py
+    ```
+    
 
-    
+
 
 Then, let's paste the below code into it:
 
diff --git a/pages/guides/agents/advanced/message-verification.mdx b/pages/guides/agents/advanced/message-verification.mdx
index 4c0230de..1380bd16 100644
--- a/pages/guides/agents/advanced/message-verification.mdx
+++ b/pages/guides/agents/advanced/message-verification.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # How to use agents to verify messages
 
@@ -27,21 +27,25 @@ Make sure you have read the following resources before going on with this guide:
 
 2. In here, let's create a Python script for this task and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch message_verification.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > message_verification.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch message_verification.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > message_verification.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch message_verification.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch message_verification.py
+    ```
+    
 
-    
+
    
 3. We now need to import the necessary classes from `uagents` (`Agent`, `Bureau`, `Context`, and `Model`), `uagents.crypto` (`Identity`) and `hashlib`. Then we would need to define the messages format using the `Message` class as a subclass of `Model`:
 
diff --git a/pages/guides/agents/advanced/name-service.mdx b/pages/guides/agents/advanced/name-service.mdx
index a5a89aa6..494a12f6 100644
--- a/pages/guides/agents/advanced/name-service.mdx
+++ b/pages/guides/agents/advanced/name-service.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Agents Name Service
 
@@ -18,39 +18,47 @@ First of all, we need to create 2 Python scripts for our two agents using the fo
 
     Bob:
 
-    
-
-        ```py copy filename="mac"
-        touch agent_1.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > agent_1.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch agent_1.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > agent_1.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch agent_1.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch agent_1.py
+    ```
+    
 
-    
+
 
     Alice:
+    
+
+
+    ```py copy filename="mac"
+    touch agent_2.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > agent_2.py
+    ```
+
 
-    
-
-        ```py copy filename="mac"
-        touch agent_2.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > agent_2.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch agent_2.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch agent_2.py
+    ```
+    
 
-    
+
 
 ### Bob
 
diff --git a/pages/guides/agents/advanced/register-in-almanac.mdx b/pages/guides/agents/advanced/register-in-almanac.mdx
index 515e351f..712c2edf 100644
--- a/pages/guides/agents/advanced/register-in-almanac.mdx
+++ b/pages/guides/agents/advanced/register-in-almanac.mdx
@@ -1,5 +1,5 @@
 import {Callout} from 'nextra/components'
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Registering in Almanac Contract
 
@@ -25,21 +25,25 @@ Make sure you have read the following resources before going on with this guide:
 
 1. First of all, create a Python script and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch registration.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > registration.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch registration.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > registration.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch registration.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch registration.py
+    ```
+    
 
-    
+
    
 2. Then, import the `Agent` class from the `uagents` library to create our agent, and the `fund_agent_if_low` class from the `uagents.setup` module. This function will check if you have enough tokens to register in the Almanac contract, if not it will add testnet tokens to your `Fetch Network address`. Then, create an agent, `alice`, you need to provide the `name`, `seed`, `port` and `endpoint` parameters to correctly run it! The code will look similar to the following:
 
diff --git a/pages/guides/agents/getting-started/create-a-uagent.mdx b/pages/guides/agents/getting-started/create-a-uagent.mdx
index eeb7ae7d..20d21361 100644
--- a/pages/guides/agents/getting-started/create-a-uagent.mdx
+++ b/pages/guides/agents/getting-started/create-a-uagent.mdx
@@ -1,4 +1,5 @@
 import { CodeGroup } from "../../../../components/code";
+import { DocsCode } from "../../../../components/code";
 
 # Creating your first agent
 
@@ -25,28 +26,32 @@ Make sure you have read the following resources before going on with this guide:
 
 1. Let's create a Python script for this task, and name it by running:
 
-    
-
+
+     
         ```py copy filename="mac"
         touch agent.py
         ```
+        
 
+    
         ```py copy filename="windows"
         echo. > agent.py
         ```
+        
 
+    
         ```py copy filename="ubuntu"
         touch agent.py
         ```
-
-    
+        
+
 
 2. We then need to import the `Agent` and `Context` classes from the `uagents` library, and then create an agent using the class `Agent`:
 
-   ```py copy
-   from uagents import Agent, Context
-   agent = Agent(name="alice", seed="secret_seed_phrase")
-   ```
+```py copy
+from uagents import Agent, Context
+agent = Agent(name="alice", seed="secret_seed_phrase")
+```
 
    It is optional but useful to include a `seed` parameter when creating an agent to set fixed [addresses ↗️](/guides/agents/getting-uagent-address). Otherwise, random addresses will be generated every time you run the agent. Your address is kind of important, as this is how other agents will identify you.
 
diff --git a/pages/guides/agents/getting-started/getting-uagent-address.mdx b/pages/guides/agents/getting-started/getting-uagent-address.mdx
index bb0066e4..6df3a27a 100644
--- a/pages/guides/agents/getting-started/getting-uagent-address.mdx
+++ b/pages/guides/agents/getting-started/getting-uagent-address.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Agents address
 
@@ -33,21 +33,26 @@ You can print the `uAgent address` related to your agent in the following way:
 
 1. First of all, create a Python script and name it:
 
-    
 
-        ```py copy filename="mac"
-        touch uagent-address.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > uagent-address.py
-        ```
+
+    
+    ```py copy filename="mac"
+    touch uagent-address.py
+    ```
+    
 
-        ```py copy filename="ubuntu"
-        touch uagent-address.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > uagent-address.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch uagent-address.py
+    ```
+    
+
    
 2. We then need to import the `Agent` class from the `uagents` library to create an agent, `alice`. Then, using the `print()` function, we will print the related `uAgent address`. Importantly, remember that the `seed` parameter is used, when creating an agent, to set fixed addresses, otherwise a random address will be generated every time you run the agent:
 
@@ -77,21 +82,25 @@ You can print the `Fetch network address` related to your agent in the following
 
 1. Let's create a Python script, and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch fetch-address.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > fetch-address.py
-        ```
+
+
+```py copy filename="mac"
+touch fetch-address.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch fetch-address.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > fetch-address.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch fetch-address.py
+    ```
+    
+
    
 2. As before, we first need to import the `Agent` class from the `uagents` library to create an Agent, `alice`. Then, using the `print()` function, we will print the related `Fetch Network address`:
 
@@ -129,21 +138,25 @@ In this guide, we aim at showing how to create an agent being able to say hello
 
 1. First of all, you need to create a Python script and name it: 
 
-    
-
-        ```py copy filename="mac"
-        touch my_agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > my_agent.py
-        ```
+
+
+```py copy filename="mac"
+touch my_agent.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch my_agent.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > my_agent.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch my_agent.py
+    ```
+    
+
 
 2. We then need to import the necessary classes `Agent` and `Context` from the `uagents` library, and then create an instance of the `Agent` class, `alice`. Below you can see the `agent` object being initialized:
 
diff --git a/pages/guides/agents/intermediate/communicating-with-other-agents.mdx b/pages/guides/agents/intermediate/communicating-with-other-agents.mdx
index 4f0adf3c..3aca8ce0 100644
--- a/pages/guides/agents/intermediate/communicating-with-other-agents.mdx
+++ b/pages/guides/agents/intermediate/communicating-with-other-agents.mdx
@@ -1,5 +1,5 @@
 import {Callout} from 'nextra/components'
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Communicating with other agents
 
@@ -40,21 +40,25 @@ The first step to better understand how agents communicate is to introduce how 2
 
 1. First of all, let's create a Python script for this task:
 
-    
-
-        ```py copy filename="mac"
-        touch agents_communication.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > agents_communication.py
-        ```
+
+
+```py copy filename="mac"
+touch agents_communication.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch agents_communication.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > agents_communication.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch agents_communication.py
+    ```
+    
+
    
 2. Then, we import  `Agent`, `Context`, `Bureau`, and `Model` from the uagents library and we then define the message structure for messages to be exchanged between the agents using the class `Model`:
 
@@ -185,39 +189,47 @@ The first step would be to create two different Python scripts for this task, ea
 
     Slaanesh:
 
-    
-
-        ```py copy filename="mac"
-        touch remote_agents_slaanesh.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > remote_agents_slaanesh.py
-        ```
+
+
+```py copy filename="mac"
+touch remote_agents_slaanesh.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch remote_agents_slaanesh.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > remote_agents_slaanesh.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch remote_agents_slaanesh.py
+    ```
+    
+
 
     Sigmar:
 
-    
-
-        ```py copy filename="mac"
-        touch remote_agents_sigmar.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > remote_agents_sigmar.py
-        ```
+
+
+```py copy filename="mac"
+touch remote_agents_sigmar.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch remote_agents_sigmar.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > remote_agents_sigmar.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch remote_agents_sigmar.py
+    ```
+    
+
 Let's start by defining the script for **sigmar**.
 
 #### Sigmar
diff --git a/pages/guides/agents/intermediate/handlers.mdx b/pages/guides/agents/intermediate/handlers.mdx
index 50e85317..e249c2d3 100644
--- a/pages/guides/agents/intermediate/handlers.mdx
+++ b/pages/guides/agents/intermediate/handlers.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Agent Handlers
 
@@ -38,21 +38,25 @@ Make sure you have read the following resources before going on with this guide:
 
 1. Let's create a Python script for this task, and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch interval-task.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > interval-task.py
-        ```
+
+
+```py copy filename="mac"
+touch interval-task.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch interval-task.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > interval-task.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch interval-task.py
+    ```
+    
+
    
 2. Then import the necessary classes from `uagents` library, `Agent` and `Context`, and create our agent:
 
@@ -128,21 +132,25 @@ We now showcase a scenario where three agents, named `alice`, `bob`, and `charle
 
 1. First of all, let's create a Python script for this task, and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch broadcast.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > broadcast.py
-        ```
+
+
+```py copy filename="mac"
+touch broadcast.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch broadcast.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > broadcast.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch broadcast.py
+    ```
+    
+
    
 2. We then need to import the `Agent`, `Bureau`, `Context`, `Model`, and `Protocol` classes from the `uagents` library, and the `fund_agent_if_low` from `uagents.setup`. Then, let's create the 3 different agents using the class `Agent`. Each agent is initialized with a unique name and a seed phrase for wallet recovery. Additionally, if an agent's wallet balance is low, the `fund_agent_if_low()` function is called to add funds to their wallet:
 
@@ -356,21 +364,25 @@ Let's explore the Proxy code script step-by-step:
 1. First of all navigate to directory where you want to create your project.
 2. Create a Python script name `on_query.py` by running:
 
-    
-
-        ```py copy filename="mac"
-        touch on_query.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > on_query.py
-        ```
+
+
+```py copy filename="mac"
+touch on_query.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch on_query.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > on_query.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch on_query.py
+    ```
+    
+
    
 3. We need to import `json`, `fastapi`, `uagent`'s `Model` and `query`. Then we would need to define the query format using the `TestRequest` class as a subclass of `Model`:
 
diff --git a/pages/guides/agents/intermediate/langchain-rag-agent.mdx b/pages/guides/agents/intermediate/langchain-rag-agent.mdx
index 066eef7e..b17e4dc2 100644
--- a/pages/guides/agents/intermediate/langchain-rag-agent.mdx
+++ b/pages/guides/agents/intermediate/langchain-rag-agent.mdx
@@ -1,6 +1,6 @@
 import {Callout} from 'nextra/components'
 import PackageVersion from 'components/package-version'
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Build a LangChain RAG Agent
 
@@ -121,21 +121,25 @@ You'll need several Python packages for the project. These can be managed effici
 
 We now need to define the `requests.py` file under the `messages` folder in the project. 
 
-    
+
+
+```py copy filename="mac"
+touch requests.py
+```
+
 
-        ```py copy filename="mac"
-        touch requests.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > requests.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch requests.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > requests.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch requests.py
+    ```
+    
+
 
 
 Here, the `RagRequest` message data model represents the request to retrieve an answer to an user's question from a specified document URL. The script includes an optional parameter, `deep_read`, to determine if nested pages should also be read to retrieve the answer. This parameter is set to `no` as `default`.
@@ -170,21 +174,25 @@ The script look like the following:
 
 This step involves setting up the **LangChain Retrieval-Augmented Generation (RAG) Agent** which is able to scrape web content, retrieve relevant documents, and generate answers to user queries based on that content. Let's create the file within the `agents` directory we created under `src` directory of our project and name it `langchain_rag_agent.py` by using the following command:
 
-    
+
+
+```py copy filename="mac"
+touch langchain_rag_agent.py
+```
+
 
-        ```py copy filename="mac"
-        touch langchain_rag_agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > langchain_rag_agent.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch langchain_rag_agent.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > langchain_rag_agent.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch langchain_rag_agent.py
+    ```
+    
+
 
 The agent is defined as a [local agent with a Mailbox ↗️](https://fetch.ai/docs/guides/agents/intermediate/options-for-running-local-agents#run-a-local-agent-using-a-mailbox) and it is able to answer questions by fetching and summarizing information from a given website URL.
 
@@ -352,21 +360,25 @@ We are now ready to define the **LangChain User Agent** which interacts with the
 
 Create a file for this agent:
 
-    
+
+
+```py copy filename="mac"
+touch langchain_rag_user.py
+```
+
 
-        ```py copy filename="mac"
-        touch langchain_rag_user.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > langchain_rag_user.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch langchain_rag_user.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > langchain_rag_user.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch langchain_rag_user.py
+    ```
+    
+
 
 The script looks as follows:
 
@@ -432,21 +444,25 @@ Finally, the LangChain RAG user protocol is then included using the `.include()`
 
 We are now ready to define the main script for our project. In the `src` folder of our project we create a Python script named `main.py` using the following command:
 
-    
+
+
+```py copy filename="mac"
+touch main.py
+```
+
 
-        ```py copy filename="mac"
-        touch main.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > main.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch main.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > main.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch main.py
+    ```
+    
+
 
 We then define the code within this one which looks like the one provided here below:
 
diff --git a/pages/guides/agents/intermediate/send-tokens.mdx b/pages/guides/agents/intermediate/send-tokens.mdx
index cd689ad3..a03a30b6 100644
--- a/pages/guides/agents/intermediate/send-tokens.mdx
+++ b/pages/guides/agents/intermediate/send-tokens.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 
 # How to use agents to send tokens
@@ -28,21 +28,25 @@ Make sure you have read the following resources before going on with this guide:
 
 1. First of all, create a Python script for this task, and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch sending_tokens.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > sending_tokens.py
-        ```
+
+
+```py copy filename="mac"
+touch sending_tokens.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch sending_tokens.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > sending_tokens.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch sending_tokens.py
+    ```
+    
+
    
 2. Then, import the necessary modules from `uagents`, `uagents.network`, and `uagents.setup`. Let's then define two data models: `PaymentRequest` and `TransactionInfo`. We then need to set up the values for the `AMOUNT` and `DENOM` variables, which define the default amount and denomination for the payment requests:
 
diff --git a/pages/guides/agents/intermediate/storage-function.mdx b/pages/guides/agents/intermediate/storage-function.mdx
index f7aff701..c90ad084 100644
--- a/pages/guides/agents/intermediate/storage-function.mdx
+++ b/pages/guides/agents/intermediate/storage-function.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Using agents storage function
 
@@ -21,21 +21,25 @@ Make sure you have read the following resources before going on with this guide:
 
 1. To start let's create a Python script and name it `storage.py`, we can do this in terminal with the following command:
 
-    
+
+
+```py copy filename="mac"
+touch storage.py
+```
+
 
-        ```py copy filename="mac"
-        touch storage.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > storage.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch storage.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > storage.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch storage.py
+    ```
+    
+
    
 2. Then, we need to open the script in the text editor of choice and import the necessary classes, `Agent` and `Context`, from the `uagents` library.
 
diff --git a/pages/guides/agents/quickstart.mdx b/pages/guides/agents/quickstart.mdx
index d5e27128..7c924d43 100644
--- a/pages/guides/agents/quickstart.mdx
+++ b/pages/guides/agents/quickstart.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Quick Start Guide for uAgents Framework
 
@@ -60,22 +60,25 @@ We should create something simple to get started, below the most basic of agents
 
 Create a new Python script:
 
-    
-
-        ```py copy filename="mac"
-        touch interval_task.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > interval_task.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch interval_task.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch interval_task.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > interval_task.py
+    ```
+
 
-    
+
+    ```py copy filename="ubuntu"
+    touch interval_task.py
+    ```
+    
 
+
 Open `interval_task.py` in your text editor and add the following code:
 
     ```py copy filename="interval_task.py"
@@ -119,37 +122,46 @@ This guide will walk you through creating a simple interaction between two agent
 
 Create 2 new Python scripts:
 
-    
-
-        ```py copy filename="mac"
-        touch SenderAgent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > SenderAgent.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch SenderAgent.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch SenderAgent.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > SenderAgent.py
+    ```
+
 
-    
+
+    ```py copy filename="ubuntu"
+    touch SenderAgent.py
+    ```
+    
 
-    
+
 
-        ```py copy filename="mac"
-        touch ReceiverAgent.py
-        ```
 
-        ```py copy filename="windows"
-        echo. > ReceiverAgent.py
-        ```
+
+
+    ```py copy filename="mac"
+    touch ReceiverAgent.py
+    ```
+
+
+    ```py copy filename="windows"
+    echo. > ReceiverAgent.py
+    ```
+
 
-        ```py copy filename="ubuntu"
-        touch ReceiverAgent.py
-        ```
+
+    ```py copy filename="ubuntu"
+    touch ReceiverAgent.py
+    ```
+    
 
-    
+
 
 Open `SenderAgent.py` in your text editor and add the following code:
 
diff --git a/pages/guides/apis/agent-function-creation-apis.mdx b/pages/guides/apis/agent-function-creation-apis.mdx
index c9f46511..de4cd4ec 100644
--- a/pages/guides/apis/agent-function-creation-apis.mdx
+++ b/pages/guides/apis/agent-function-creation-apis.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Agents and Functions Creation using APIs
 
@@ -24,37 +24,46 @@ This guide shows how to create **Agents** and **Agent Functions** in Agentverse
     1. Open terminal and create a directory `agents` using: `mkdir agents`.
     2. Create two Python files, `agent.py` and `agent_create.py`, in this directory and include the following sample scripts within them. You can do this using:
 
-    
-
-        ```py copy filename="mac"
-        touch agent.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > agent.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch agent.py
-        ```
+
+
+```py copy filename="mac"
+touch agent.py
+```
+
 
-    
+
+    ```py copy filename="windows"
+    echo. > agent.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch agent.py
+    ```
+    
+
 
-        ```py copy filename="mac"
-        touch agent_create.py
-        ```
 
-        ```py copy filename="windows"
-        echo. > agent_create.py
-        ```
+
+
+```py copy filename="mac"
+touch agent_create.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch agent_create.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > agent_create.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch agent_create.py
+    ```
+    
+
 
 
     3. Fill in the scripts with the code presented here below for each one of them:
diff --git a/pages/guides/apis/secret-management-apis.mdx b/pages/guides/apis/secret-management-apis.mdx
index cadfe06f..2bf983d2 100644
--- a/pages/guides/apis/secret-management-apis.mdx
+++ b/pages/guides/apis/secret-management-apis.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../components/code";
+import { CodeGroup, DocsCode } from "../../../components/code";
 
 # Adding Secret to Agents using Agentverse APIs
 
@@ -26,21 +26,25 @@ This guide provides details on how to use the [Agentverse hosting APIs ↗️](/
 
 1. Create a Python script and name it `agent-secret.py` using:
 
-    
-
-        ```py copy filename="mac"
-        touch agent-secret.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > agent-secret.py
-        ```
+
+
+```py copy filename="mac"
+touch agent-secret.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch agent-secret.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > agent-secret.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch agent-secret.py
+    ```
+    
+
 
 2. Within the script have just created, import the `requests` library:
 
diff --git a/pages/guides/fetch-network/cosmpy/use-cases/liquidity-pool.mdx b/pages/guides/fetch-network/cosmpy/use-cases/liquidity-pool.mdx
index 57f36763..51dca923 100644
--- a/pages/guides/fetch-network/cosmpy/use-cases/liquidity-pool.mdx
+++ b/pages/guides/fetch-network/cosmpy/use-cases/liquidity-pool.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../../components/code";
 
 # Liquidity pool
 
@@ -10,21 +10,25 @@ This Liquidity pool interaction guide provides a practical demonstration of inte
 
 1. Let's start by creating a Python script for this and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_liquidity_pool.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_liquidity_pool.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_liquidity_pool.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_liquidity_pool.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_liquidity_pool.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_liquidity_pool.py
+    ```
+    
+
    
 2. Let's then import the needed modules:
 
diff --git a/pages/guides/fetch-network/cosmpy/use-cases/oracles.mdx b/pages/guides/fetch-network/cosmpy/use-cases/oracles.mdx
index 8ead24ee..f142b583 100644
--- a/pages/guides/fetch-network/cosmpy/use-cases/oracles.mdx
+++ b/pages/guides/fetch-network/cosmpy/use-cases/oracles.mdx
@@ -1,6 +1,6 @@
-import { CodeGroup } from "../../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../../components/code";
 
-# Oracles 🔮
+# Oracles
 
 ## Introduction
 
@@ -21,21 +21,25 @@ We initially need to download the binaries for both contracts, which can be done
 
 1. First of all, create a Python script and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_oracle.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_oracle.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_oracle.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_oracle.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_oracle.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_oracle.py
+    ```
+    
+
    
 2. We would then also require the following imports:
 
@@ -237,21 +241,25 @@ Now, we will write a script that deploys a contract that can request the oracle
 
 1. Let's first create a Python script and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_oracle_client.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_oracle_client.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_oracle_client.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_oracle_client.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_oracle_client.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_oracle_client.py
+    ```
+    
+
 
 2. We start by importing the needed classes and define a `REQUEST_INTERVAL_SECONDS` variable:
 
diff --git a/pages/guides/fetch-network/cosmpy/use-cases/stake-auto-compounder.mdx b/pages/guides/fetch-network/cosmpy/use-cases/stake-auto-compounder.mdx
index 5a0d4700..96572676 100644
--- a/pages/guides/fetch-network/cosmpy/use-cases/stake-auto-compounder.mdx
+++ b/pages/guides/fetch-network/cosmpy/use-cases/stake-auto-compounder.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../../components/code";
 
 # Stake auto-compounder
 
@@ -79,21 +79,25 @@ Below we provide a step-by-step guide to create an auto compounder using the `co
 
 1. First of all, create a Python script and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_compounder.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_compounder.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_compounder.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_compounder.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_compounder.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_compounder.py
+    ```
+    
+
 
 2. We need to import the necessary modules, including `argparse`, `time`, and various modules from the `cosmpy.aerial` package:
 
diff --git a/pages/guides/fetch-network/cosmpy/use-cases/swap_automation.mdx b/pages/guides/fetch-network/cosmpy/use-cases/swap_automation.mdx
index 7833a5cb..a528170a 100644
--- a/pages/guides/fetch-network/cosmpy/use-cases/swap_automation.mdx
+++ b/pages/guides/fetch-network/cosmpy/use-cases/swap_automation.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../../components/code";
 
 # Swap automation 🔄
 
@@ -10,21 +10,25 @@ The following guide demonstrates an automated swapping strategy for a liquidity
 
 1. Let's start by creating a Python script and name it:
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_swap_automation.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_swap_automation.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_swap_automation.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_swap_automation.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_swap_automation.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_swap_automation.py
+    ```
+    
+
 
 2. Let's then import the needed classes:
 
diff --git a/pages/guides/fetch-network/cosmpy/use-cases/wallet-top-up.mdx b/pages/guides/fetch-network/cosmpy/use-cases/wallet-top-up.mdx
index 39b8b8f5..aa755e94 100644
--- a/pages/guides/fetch-network/cosmpy/use-cases/wallet-top-up.mdx
+++ b/pages/guides/fetch-network/cosmpy/use-cases/wallet-top-up.mdx
@@ -1,4 +1,4 @@
-import { CodeGroup } from "../../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../../components/code";
 
 # Wallet top-up 💵
 
@@ -12,21 +12,25 @@ The following guide is about how to top-up a wallet using the CosmPy library. To
 
 1. Let's start by creating a Python script for this:
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_authz.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_authz.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_authz.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_authz.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_authz.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_authz.py
+    ```
+    
+
 
 2. First of all, we need to import the necessary classes:
 
@@ -246,21 +250,25 @@ We are now ready to write a Python script which automates the process of topping
 
 1. Let's create a Python script for this and name it: 
 
-    
-
-        ```py copy filename="mac"
-        touch aerial_topup.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > aerial_topup.py
-        ```
+
+
+```py copy filename="mac"
+touch aerial_topup.py
+```
+
 
-        ```py copy filename="ubuntu"
-        touch aerial_topup.py
-        ```
+
+    ```py copy filename="windows"
+    echo. > aerial_topup.py
+    ```
+    
 
-    
+
+    ```py copy filename="ubuntu"
+    touch aerial_topup.py
+    ```
+    
+
 
 2. Let's then import the needed modules such as `argparse` for command-line argument parsing and modules from the `cosmpy` library for blockchain interaction:
 
diff --git a/pages/references/uagents/uagents-protocols/agent-protocols.mdx b/pages/references/uagents/uagents-protocols/agent-protocols.mdx
index 9722df96..3b3f587a 100644
--- a/pages/references/uagents/uagents-protocols/agent-protocols.mdx
+++ b/pages/references/uagents/uagents-protocols/agent-protocols.mdx
@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { CodeGroup } from "../../../../components/code";
+import { CodeGroup, DocsCode } from "../../../../components/code";
 
 # Agents protocols
 
@@ -21,21 +21,25 @@ Let's use a _simple restaurant table booking request_ as an example to better un
 
    and 
 
-    
-
-        ```py copy filename="mac"
-        touch book.py
-        ```
-
-        ```py copy filename="windows"
-        echo. > book.py
-        ```
-
-        ```py copy filename="ubuntu"
-        touch book.py
-        ```
-
-    
+
+
+```py copy filename="mac"
+touch book.py
+```
+
+
+
+    ```py copy filename="windows"
+    echo. > book.py
+    ```
+    
+
+
+    ```py copy filename="ubuntu"
+    touch book.py
+    ```
+    
+
 
 2. We import from `uagents` library the necessary classes `Context`, `Model`, and `Protocol`. Then, need to define the type of messages that the handler will receive and send:
 
diff --git a/styles/globals.css b/styles/globals.css
index 52e1dd01..2f473b64 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1672,6 +1672,10 @@ video {
   padding-top: 2rem;
 }
 
+.nx-pt-20 {
+  padding-top: 5rem;
+}
+
 .nx-text-left {
   text-align: left;
 }