Enhance SDK examples page with engaging components

api-playground/adding-sdk-examples.mdx

@@ -4,10 +4,20 @@
 keywords: ["x-codeSamples", "SDK examples"]
 ---
 
+<Tip>
+Give developers exactly what they need—ready-to-use code snippets in their favorite programming language.
+</Tip>
+
 If your users interact with your API using an SDK rather than directly through a network request, you can use the `x-codeSamples` extension to add code samples to your OpenAPI document and display them in your OpenAPI pages.
 
+This powerful feature lets you showcase multiple SDK implementations side-by-side, making it effortless for developers to integrate with your API.
+
 Add this property to any request method. It has the following schema.
 
+<Info>
+You can add multiple code samples per endpoint to show different use cases or programming languages.
+</Info>
+
 <ParamField body="lang" type="string" required>
   The language of the code sample.
 </ParamField>
@@ -20,7 +30,43 @@
   The source code of the sample.
 </ParamField>
 
-Here is an example of code samples for a plant tracking app, which has both a Bash CLI tool and a JavaScript SDK.
+## Example
+
+Here's a complete example showing code samples for a plant tracking app with both a Bash CLI tool and a JavaScript SDK.
+
+<CodeGroup>
+
+```yaml Plant tracker SDK examples
+paths:
+  /plants:
+    get:
+      # ...
+      x-codeSamples:
+        - lang: bash
+          label: List all unwatered plants
+          source: |
+            planter list -u
+        - lang: javascript
+          label: List all unwatered plants
+          source: |
+            const planter = require('planter');
+            planter.list({ unwatered: true });
+        - lang: bash
+          label: List all potted plants
+          source: |
+            planter list -p
+        - lang: javascript
+          label: List all potted plants
+          source: |
+            const planter = require('planter');
+            planter.list({ potted: true });
+```
+
+</CodeGroup>
+
+<Check>
+Your SDK examples will automatically appear in the API Playground, allowing developers to switch between languages and use cases.
+</Check>
 
 ```yaml
 paths: