From e139c12a67f055d2e4aa2642b41c7c70ba487aa0 Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Tue, 6 Aug 2024 16:52:05 -0700 Subject: [PATCH] docs: twoslash annotations for custom-rest (#650) --- apps/docs/content/docs/reference/meta.json | 1 - .../content/docs/runtimes/custom-rest.mdx | 34 ++++++++++++------- apps/docs/next.config.mjs | 3 ++ apps/docs/package.json | 1 + pnpm-lock.yaml | 3 ++ 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/apps/docs/content/docs/reference/meta.json b/apps/docs/content/docs/reference/meta.json index c0409dfa1..998ef12fd 100644 --- 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 index c3eb5201c..673e112ee 100644 --- 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 = () => 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 ( - - {children} - + {children} - ) + ); } ``` @@ -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 index 4a1918cf4..4ecad9692 100644 --- 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 index 9b2b65442..51b5c08b6 100644 --- 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 index 86cfd6963..66861b8f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,6 +98,9 @@ importers: next: specifier: ^14.2.5 version: 14.2.5(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + openai: + specifier: ^4.54.0 + version: 4.54.0 react: specifier: ^18.3.1 version: 18.3.1