diff --git a/packages/docs/mdx-components.js b/packages/docs/mdx-components.js
index 2a38842..10a9c5d 100644
--- a/packages/docs/mdx-components.js
+++ b/packages/docs/mdx-components.js
@@ -11,6 +11,7 @@ import PostEffects, { StaticPostEffects} from '@components/PostEffects'
 import ShadowCatcher from '@components/ShadowCatcher'
 import AutoRotate from '@components/AutoRotate'
 import { MotionEntity, MotionLight } from '@components/MotionEntity'
+import { Glb } from '@components/Glb'
 const docsComponents = getDocsMDXComponents()
 
 export const defaultComponents = {
@@ -26,7 +27,8 @@ export const defaultComponents = {
   StaticPostEffects,
   AutoRotate,
   MotionEntity,
-  MotionLight
+  MotionLight,
+  Glb
 }
 
 export function useMDXComponents(components) {
diff --git a/packages/docs/src/app/api/codesandbox/route.ts b/packages/docs/src/app/api/codesandbox/route.ts
index 7a224fe..3bae36e 100644
--- a/packages/docs/src/app/api/codesandbox/route.ts
+++ b/packages/docs/src/app/api/codesandbox/route.ts
@@ -1,5 +1,6 @@
-import { readFiles } from "@/docs-components/utils/file-utils";
+import { filePathRegex, readFiles } from "@/docs-components/utils/file-utils";
 import path from "path";
+import fs from 'fs/promises';
 
 
 export async function POST(request: Request) {
diff --git a/packages/docs/src/app/docs/guide/getting-started/page.mdx b/packages/docs/src/app/docs/guide/getting-started/page.mdx
index 3c77d52..52064d6 100644
--- a/packages/docs/src/app/docs/guide/getting-started/page.mdx
+++ b/packages/docs/src/app/docs/guide/getting-started/page.mdx
@@ -25,7 +25,7 @@ Here's what it should look like...
 
         <Entity>
             {/* Load our asset */}
-            <GlbAsset src='/lamborghini_vision_gt.glb' />
+            <Glb src='/lamborghini_vision_gt.glb' />
             {/* Adds some ground plane shadowing */}
             <ShadowCatcher intensity={0.9} />
         </Entity>
@@ -152,13 +152,13 @@ export default function App() {
             </Entity>
         </Entity>
         <Entity name='model' scale={[4, 4, 4]}>
-            <GlbAsset src='/lamborghini_vision_gt.glb' />
+            <Glb src='/lamborghini_vision_gt.glb' />
         </Entity>
     </Application>
 }
 ```
 
-You should now see the Lamborghini model in the scene.  Note here that we've added the `GlbAsset` component to the `Entity` that contains the model. This isn't part of the `@playcanvas/react` library, but it's a simple component that wraps the `useModel` hook to make it easier to use in a React component. You can read more about [loading assets here](/docs/guide/loading-assets).
+You should now see the Lamborghini model in the scene.  Note here that we've added the `Glb` component to the `Entity` that contains the model. This isn't part of the `@playcanvas/react` library, but it's a simple component that wraps the `useModel` hook to make it easier to use in a React component. You can read more about [loading assets here](/docs/guide/loading-assets).
 
 ### Putting it all together
 
@@ -182,9 +182,9 @@ export default function App() {
             <AutoRotate />
         </Entity>
         <Entity name='model'>
-            <GlbAsset src='/lamborghini_vision_gt.glb' >
+            <Glb src='/lamborghini_vision_gt.glb' >
                 <ShadowCatcher intensity={0.9} />
-            </GlbAsset>
+            </Glb>
         </Entity>
     </Application>
 }
diff --git a/packages/docs/src/components/Glb.tsx b/packages/docs/src/components/Glb.tsx
new file mode 100644
index 0000000..fbd07cd
--- /dev/null
+++ b/packages/docs/src/components/Glb.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Container } from "@playcanvas/react";
+import { useModel } from "./hooks/use-asset";
+import { Asset } from "playcanvas";
+
+export const Glb = ({ src, children }: { src: string, children?: React.ReactNode }) => {
+    
+    const { data: model, isLoading, error } = useModel(src);
+
+    if (isLoading) return null;
+    if (error) return null;
+
+    return <Container asset={model as Asset}>
+        {children}
+    </Container>
+}
\ No newline at end of file