docs: twoslash annotations for custom-rest (#650)

Yonom · Aug 6, 2024 · e139c12 · e139c12
1 parent 14adf89
commit e139c12
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 13 deletions.
diff --git a/apps/docs/content/docs/reference/meta.json b/apps/docs/content/docs/reference/meta.json
@@ -1,5 +1,4 @@
 {
   "title": "Reference",
-  "root": true,
   "pages": ["runtime", "context", "integrations", "..."]
 }
diff --git a/apps/docs/content/docs/runtimes/custom-rest.mdx b/apps/docs/content/docs/runtimes/custom-rest.mdx
@@ -35,9 +35,7 @@ npm install @assistant-ui/react
 
 Update the `MyModelAdapter` below to integrate with your own custom API.
 
-`@/app/MyRuntimeProvider.tsx`
-
-```tsx twoslash
+```tsx twoslash {1,11,17} title="@/app/MyRuntimeProvider.tsx"
 "use client";
 
 import type { ReactNode } from "react";
@@ -97,25 +95,31 @@ export function MyRuntimeProvider({
 
 `@/app/layout.tsx`
 
-```tsx {1,11,17}
-import { MyRuntimeProvider } from '@/app/MyRuntimeProvider';
+```tsx {1,11,17} twoslash
+// @filename: /app/MyRuntimeProvider.tsx
+
+import type { FC, PropsWithChildren } from "react";
+
+export const MyRuntimeProvider: FC<PropsWithChildren> = () => null;
 
-...
+// @filename: index.tsx
+
+// ---cut---
+import type { ReactNode } from "react";
+import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <MyRuntimeProvider>
       <html lang="en">
-        <body className={inter.className}>
-          {children}
-        </body>
+        <body>{children}</body>
       </html>
     </MyRuntimeProvider>
-  )
+  );
 }
 ```
 
@@ -126,7 +130,13 @@ export default function RootLayout({
 
 Declare the `run` function as an `AsyncGenerator` (`async *run`). This allows you to `yield` the results as they are generated.
 
-```tsx {2, 11-13}
+```tsx twoslash {2, 11-13} title="@/app/MyRuntimeProvider.tsx"
+import { ChatModelAdapter } from "@assistant-ui/react";
+import { OpenAI } from "openai";
+
+const openai = new OpenAI();
+
+// ---cut---
 const MyModelAdapter: ChatModelAdapter = {
   async *run({ messages, abortSignal, config }) {
     const stream = await openai.chat.completions.create({

diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
@@ -11,6 +11,9 @@ const withMDX = createMDX({
           twoslashOptions: {
             compilerOptions: {
               jsx: 12,
+              paths: {
+                "@/*": ["./*"],
+              },
             },
           },
         }),

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -33,6 +33,7 @@
     "geist": "^1.3.1",
     "lucide-react": "^0.424.0",
     "next": "^14.2.5",
+    "openai": "^4.54.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml