@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

package/.docs/organized/code-examples/with-resumable-stream.md

@@ -1,667 +0,0 @@
-# Example: with-resumable-stream
-
-## app/api/chat/resume/[streamId]/route.ts
-
-```typescript
-import { UI_MESSAGE_STREAM_HEADERS } from "ai";
-import { RESUMABLE_STREAM_ID_HEADER } from "assistant-stream/resumable";
-import { getResumableStreamContext } from "@/lib/resumable-context";
-
-export const maxDuration = 60;
-
-export async function GET(
-  _req: Request,
-  context: { params: Promise<{ streamId: string }> },
-) {
-  const { streamId } = await context.params;
-  const ctx = await getResumableStreamContext();
-  const stream = await ctx.resume(streamId);
-
-  if (!stream) {
-    return new Response(JSON.stringify({ error: "stream not found" }), {
-      status: 404,
-      headers: { "Content-Type": "application/json" },
-    });
-  }
-
-  return new Response(stream, {
-    headers: {
-      ...UI_MESSAGE_STREAM_HEADERS,
-      [RESUMABLE_STREAM_ID_HEADER]: streamId,
-    },
-  });
-}
-
-```
-
-## app/api/chat/route.ts
-
-```typescript
-import { createOpenAI } from "@ai-sdk/openai";
-import {
-  type JSONSchema7,
-  streamText,
-  convertToModelMessages,
-  createUIMessageStream,
-  JsonToSseTransformStream,
-  type UIMessage,
-  tool,
-  stepCountIs,
-  zodSchema,
-} from "ai";
-import { RESUMABLE_STREAM_ID_HEADER } from "assistant-stream/resumable";
-import { z } from "zod";
-import { getResumableStreamContext } from "@/lib/resumable-context";
-
-export const maxDuration = 60;
-
-export async function POST(req: Request) {
-  const {
-    messages,
-    system,
-    tools,
-  }: {
-    id?: string;
-    messages: UIMessage[];
-    system?: string;
-    tools?: Record<string, { description?: string; parameters: JSONSchema7 }>;
-  } = await req.json();
-
-  const streamId = crypto.randomUUID();
-
-  const sourceBody = process.env["OPENAI_API_KEY"]
-    ? await buildOpenAIBody({
-        messages,
-        ...(system && { system }),
-        ...(tools && { tools }),
-      })
-    : buildMockBody({ messages });
-
-  const context = await getResumableStreamContext();
-  const stream = await context.run(streamId, () => sourceBody);
-
-  return new Response(stream, {
-    headers: {
-      "Content-Type": "text/event-stream",
-      "Cache-Control": "no-cache",
-      Connection: "keep-alive",
-      [RESUMABLE_STREAM_ID_HEADER]: streamId,
-    },
-  });
-}
-
-function convertFrontendTools(
-  tools: Record<string, { description?: string; parameters: JSONSchema7 }>,
-): Record<string, ReturnType<typeof tool>> {
-  return Object.fromEntries(
-    Object.entries(tools).map(([name, t]) => [
-      name,
-      tool({
-        ...(t.description ? { description: t.description } : {}),
-        inputSchema: t.parameters as never,
-      }),
-    ]),
-  );
-}
-
-async function buildOpenAIBody({
-  messages,
-  system,
-  tools,
-}: {
-  messages: UIMessage[];
-  system?: string;
-  tools?: Record<string, { description?: string; parameters: JSONSchema7 }>;
-}): Promise<ReadableStream<Uint8Array>> {
-  const openai = createOpenAI({
-    apiKey: process.env["OPENAI_API_KEY"]!,
-    ...(process.env["OPENAI_BASE_URL"] && {
-      baseURL: process.env["OPENAI_BASE_URL"],
-    }),
-  });
-  const result = streamText({
-    model: openai("gpt-5.6-luna"),
-    messages: await convertToModelMessages(messages),
-    ...(system ? { system } : {}),
-    stopWhen: stepCountIs(10),
-    tools: {
-      ...convertFrontendTools(tools ?? {}),
-      get_current_weather: tool({
-        description: "Get the current weather",
-        inputSchema: zodSchema(z.object({ city: z.string() })),
-        execute: async ({ city }) => `The weather in ${city} is sunny`,
-      }),
-      slow_count: tool({
-        description: "Count slowly to N",
-        inputSchema: zodSchema(
-          z.object({ to: z.number().int().min(1).max(50) }),
-        ),
-        execute: async ({ to }) => {
-          await new Promise((r) => setTimeout(r, to * 200));
-          return `counted to ${to}`;
-        },
-      }),
-    },
-  });
-
-  const response = result.toUIMessageStreamResponse();
-  if (!response.body) throw new Error("expected response body");
-  return response.body;
-}
-
-function buildMockBody({
-  messages,
-}: {
-  messages: UIMessage[];
-}): ReadableStream<Uint8Array> {
-  const lastUserText =
-    messages
-      .filter((m) => m.role === "user")
-      .at(-1)
-      ?.parts.flatMap((p) =>
-        p.type === "text" ? [(p as { type: "text"; text: string }).text] : [],
-      )
-      .join(" ") ?? "your message";
-
-  const text =
-    `(mock response. set OPENAI_API_KEY for the real model)\n\n` +
-    `you said: ${lastUserText}\n\n` +
-    `here is a slow stream you can interrupt mid-flight by reloading the page. ` +
-    `the resumable layer keeps the producer running on the server, so when ` +
-    `the browser reconnects it continues right where it left off, with no ` +
-    `wasted tokens and no lost progress. ` +
-    `lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ` +
-    `tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim ` +
-    `veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ` +
-    `commodo consequat. duis aute irure dolor in reprehenderit in voluptate ` +
-    `velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint ` +
-    `occaecat cupidatat non proident, sunt in culpa qui officia deserunt ` +
-    `mollit anim id est laborum.\n\n` +
-    `done.`;
-
-  const messageId = `msg-${crypto.randomUUID()}`;
-  const textPartId = `text-${crypto.randomUUID()}`;
-  const tokens = text.match(/\S+\s*|\s+/g) ?? [text];
-
-  const uiStream = createUIMessageStream({
-    execute: async ({ writer }) => {
-      writer.write({ type: "start", messageId });
-      writer.write({ type: "start-step" });
-      writer.write({ type: "text-start", id: textPartId });
-      for (const tok of tokens) {
-        await new Promise((r) => setTimeout(r, 250));
-        writer.write({
-          type: "text-delta",
-          id: textPartId,
-          delta: tok,
-        });
-      }
-      writer.write({ type: "text-end", id: textPartId });
-      writer.write({ type: "finish-step" });
-      writer.write({ type: "finish" });
-    },
-  });
-
-  return uiStream
-    .pipeThrough(new JsonToSseTransformStream())
-    .pipeThrough(new TextEncoderStream());
-}
-
-```
-
-## app/globals.css
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../../../packages/ui/src";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-```
-
-## app/layout.tsx
-
-```tsx
-import type { Metadata } from "next";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "Resumable Stream Example",
-  description:
-    "Demonstrates assistant-stream/resumable: persist an in-flight LLM response so the client can reload mid-stream and pick up where it left off.",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className="h-dvh">{children}</body>
-    </html>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { useMemo } from "react";
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import {
-  AssistantChatTransport,
-  createResumableSessionStorage,
-  useChatRuntime,
-} from "@assistant-ui/react-ai-sdk";
-import { Thread } from "@/components/assistant-ui/thread";
-
-const storage = createResumableSessionStorage();
-
-export default function Home() {
-  const transport = useMemo(
-    () =>
-      new AssistantChatTransport({
-        api: "/api/chat",
-        resumable: {
-          storage,
-          resumeApi: (streamId) => `/api/chat/resume/${streamId}`,
-        },
-      }),
-    [],
-  );
-
-  const runtime = useChatRuntime({ transport });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <div className="h-full">
-        <Thread />
-      </div>
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide",
-  "registries": {
-    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
-  }
-}
-
-```
-
-## lib/resumable-context.ts
-
-```typescript
-import {
-  createInMemoryResumableStreamStore,
-  createResumableStreamContext,
-  type ResumableStreamContext,
-  type ResumableStreamStore,
-} from "assistant-stream/resumable";
-
-const GLOBAL_KEY = Symbol.for("assistant-ui.example.resumable-context");
-
-type GlobalSlot = typeof globalThis & {
-  [GLOBAL_KEY]?: Promise<ResumableStreamContext>;
-};
-
-const slot = globalThis as GlobalSlot;
-
-export function getResumableStreamContext(): Promise<ResumableStreamContext> {
-  if (slot[GLOBAL_KEY]) return slot[GLOBAL_KEY];
-  const promise = (async () => {
-    const store = await createStore();
-    return createResumableStreamContext({ store });
-  })();
-  // clear the cache on rejection so the next request retries connecting.
-  promise.catch(() => {
-    if (slot[GLOBAL_KEY] === promise) {
-      delete slot[GLOBAL_KEY];
-    }
-  });
-  slot[GLOBAL_KEY] = promise;
-  return promise;
-}
-
-async function createStore(): Promise<ResumableStreamStore> {
-  const url = process.env["REDIS_URL"];
-  if (!url) {
-    return createInMemoryResumableStreamStore();
-  }
-
-  const { createClient } = await import("redis");
-  const { createRedisResumableStreamStore } =
-    await import("assistant-stream/resumable/redis");
-
-  const client = createClient({ url });
-  client.on("error", (err) => {
-    console.error("[resumable-stream] redis client error:", err);
-  });
-  await client.connect();
-  return createRedisResumableStreamStore(client);
-}
-
-```
-
-## next.config.js
-
-```javascript
-import { withAui } from "@assistant-ui/next";
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-resumable-stream",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev --webpack",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.40",
-    "@ai-sdk/react": "^4.0.65",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-ai-sdk": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@assistant-ui/store": "workspace:*",
-    "@assistant-ui/tap": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "ai": "^7.0.62",
-    "assistant-stream": "workspace:*",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.31.0",
-    "next": "^16.3.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "redis": "^6.2.1",
-    "tailwind-merge": "^3.6.0",
-    "zod": "^4.4.3"
-  },
-  "devDependencies": {
-    "@assistant-ui/next": "workspace:*",
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# with-resumable-stream
-
-Demonstrates `assistant-stream/resumable`: persist an in-flight LLM response on the server so the client can reload or lose its connection mid-stream and pick up where it left off.
-
-## How it works
-
-1. Each `POST /api/chat` mints a new UUIDv4 `streamId` server-side and returns it in the `x-resumable-stream-id` header. `AssistantChatTransport` reads that header on the browser and stores the latest pending id in `sessionStorage`.
-2. The route runs `streamText`, then pipes the byte body through `context.run(streamId, () => uiMessageStreamBody)`. The bytes are persisted in the configured store while being streamed to the client.
-3. If the client disconnects mid-stream, the server-side producer task keeps running and continues to append bytes to the store.
-4. On page load, if `sessionStorage` still has a stream id, the client calls `chat.resumeStream()`. The transport's `resumable` adapter rewrites the AI SDK reconnect request to `GET /api/chat/resume/[streamId]`, which calls `context.resume(streamId)` and replays the persisted bytes (plus any new ones) to the reconnecting client.
-5. When the response stream closes naturally, the transport detects the AI SDK `finish` SSE event in the body and clears the stored id. Cancellation does not clear the id, so a reload mid-stream still finds it on next mount.
-
-## Quick start
-
-```sh
-cp .env.example .env.local
-# Optional: put your OPENAI_API_KEY in .env.local for the real model. Without
-# it, the example falls back to a slow built-in mock so you can demo resume.
-pnpm install
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000), send a prompt, then reload the page mid-response. The same answer keeps filling in.
-
-## Client integration
-
-The browser side is wired through two helpers from `@assistant-ui/react-ai-sdk`:
-
-- `createResumableSessionStorage()` returns a small `sessionStorage`-backed storage object for the pending stream id. Pass `{ key }` to namespace per route. Use `localStorage` instead if you want a stream that survives full browser restarts (and accept the cross-tab race that comes with it).
-- `AssistantChatTransport` accepts a `resumable` option. When set, the transport captures the `x-resumable-stream-id` response header, watches the SSE body for the `finish` event so the stored id is cleared on natural completion (cancellation leaves it intact), and redirects `chat.resumeStream()` reconnects to the configured `resumeApi`.
-
-The example fires `chat.resumeStream()` from a one-shot `useEffect` when storage already has an id at mount time. If you switch to `useChatRuntime`, that resume call is wired automatically.
-
-## Server methods
-
-The `ResumableStreamContext` returned by `createResumableStreamContext` exposes:
-
-- `run(streamId, makeStream)`: producer-or-consumer entrypoint. Auto-elects the role via the store, so concurrent callers with the same id share the persisted output.
-- `resume(streamId)`: strict consumer; returns `null` when the stream does not exist.
-- `requireResume(streamId)`: same as `resume`, but throws `ResumableStreamError("missing")` instead of returning `null`.
-- `status(streamId)`: probe the lifecycle state without opening a reader.
-- `delete(streamId)`: remove all state for a stream.
-
-## Storage
-
-By default the example uses `createInMemoryResumableStreamStore` from `assistant-stream/resumable`. The store is memoized on `globalThis` via `Symbol.for`, so it survives Next.js hot reload but not full server restart. Default TTL is 24h; configure with `defaultTtlMs` if you want shorter eviction.
-
-To use Redis instead, set `REDIS_URL` in `.env.local`:
-
-```sh
-REDIS_URL=redis://localhost:6379
-OPENAI_API_KEY=your-api-key-here
-```
-
-The example will use the `assistant-stream/resumable/redis` adapter automatically. With Redis, resumable state survives server restarts (until the per-stream TTL expires; default 24h).
-
-You can run a local Redis quickly with Docker:
-
-```sh
-docker run -d --name redis -p 6379:6379 redis:7-alpine
-```
-
-## Production checklist
-
-`GET /api/chat/resume/[streamId]` in this example serves any caller who knows the stream id. UUIDv4 is unguessable in practice, but the id leaks into response headers, `sessionStorage`, browser history, and access logs. Before deploying:
-
-- Gate the resume endpoint with the same auth your chat endpoint uses.
-- Bind `streamId` to the requesting user at creation time and reject mismatches before calling `context.resume`.
-- On serverless platforms that kill the request handler when the response returns (Vercel, Cloudflare), pass `waitUntil` from `next/server` (`after`) when constructing the context. Otherwise the producer task is interrupted and resume cannot recover the rest of the stream.
-
-## Files of interest
-
-- `lib/resumable-context.ts`: picks the store based on `REDIS_URL` and memoizes a single `ResumableStreamContext` across module reloads.
-- `app/api/chat/route.ts`: POST endpoint that mints a fresh `streamId`, runs `streamText` (or a mock), and wraps the response body in `context.run`.
-- `app/api/chat/resume/[streamId]/route.ts`: GET endpoint that calls `context.resume` and replays the persisted bytes.
-- `app/page.tsx`: wires `useChat` with `AssistantChatTransport`'s `resumable` adapter and triggers `chat.resumeStream()` on mount when a pending id exists.
-
-## Related documentation
-
-- [assistant-ui documentation](https://www.assistant-ui.com/docs)
-- [AI SDK reconnect API](https://sdk.vercel.ai/docs)
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"],
-      "@/components/assistant-ui/*": [
-        "../../packages/ui/src/components/assistant-ui/*"
-      ],
-      "@/components/ui/*": [
-        "../../packages/ui/src/components/ui/base/*",
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/components/ui/radix/*": [
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
-      "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-