docs(next): update document (#1402)

.prettierignore

@@ -5,3 +5,5 @@ lib/
 dist/
 .docusaurus/
 .source/
+# prttier doesn't support mdx3 we are using
+*.mdx

apps/next/src/app/docs/[[...slug]]/page.tsx

+import { createMetadata, metadataImage } from "@/lib/metadata";
 import { openapi, source } from "@/lib/source";
+import { Popup, PopupContent, PopupTrigger } from "fumadocs-twoslash/ui";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import {
   DocsBody,
@@ -26,6 +28,9 @@ export default async function Page(props: {
           components={{
             ...defaultMdxComponents,
             APIPage: openapi.APIPage,
+            Popup,
+            PopupContent,
+            PopupTrigger,
           }}
         />
       </DocsBody>
@@ -44,8 +49,13 @@ export async function generateMetadata(props: {
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
-  return {
-    title: page.data.title,
-    description: page.data.description,
-  };
+  return createMetadata(
+    metadataImage.withImage(page.slugs, {
+      title: page.data.title,
+      description: page.data.description,
+      openGraph: {
+        url: `/docs/${page.slugs.join("/")}`,
+      },
+    }),
+  );
 }

apps/next/src/app/docs/layout.tsx

@@ -3,6 +3,7 @@ import { AITrigger } from "@/components/ai-chat";
 import { buttonVariants } from "@/components/ui/button";
 import { source } from "@/lib/source";
 import { cn } from "@/lib/utils";
+import "fumadocs-twoslash/twoslash.css";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { MessageCircle } from "lucide-react";
 import type { ReactNode } from "react";

apps/next/src/app/og/[...slug]/og.tsx

+import type { ImageResponseOptions } from "next/dist/compiled/@vercel/og/types";
+import { ImageResponse } from "next/og";
+import type { ReactElement, ReactNode } from "react";
+
+interface GenerateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  primaryColor?: string;
+  primaryTextColor?: string;
+  site?: ReactNode;
+}
+
+export function generateOGImage(
+  options: GenerateProps & ImageResponseOptions,
+): ImageResponse {
+  const {
+    title,
+    description,
+    icon,
+    site,
+    primaryColor,
+    primaryTextColor,
+    ...rest
+  } = options;
+
+  return new ImageResponse(
+    generate({
+      title,
+      description,
+      icon,
+      site,
+      primaryTextColor,
+      primaryColor,
+    }),
+    {
+      width: 1200,
+      height: 630,
+      ...rest,
+    },
+  );
+}
+
+export function generate({
+  primaryColor = "rgba(255,150,255,0.5)",
+  primaryTextColor = "rgb(255,150,255)",
+  ...props
+}: GenerateProps): ReactElement {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        color: "white",
+        backgroundColor: "#0c0c0c",
+        backgroundImage: `linear-gradient(to right top, ${primaryColor}, ${primaryColor})`,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          padding: "4rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "16px",
+            marginBottom: "12px",
+            color: primaryTextColor,
+          }}
+        >
+          {props.icon}
+          <p
+            style={{
+              fontSize: "56px",
+              fontWeight: 600,
+            }}
+          >
+            {props.site}
+          </p>
+        </div>
+
+        <p
+          style={{
+            fontWeight: 800,
+            fontSize: "82px",
+          }}
+        >
+          {props.title}
+        </p>
+        <p
+          style={{
+            fontSize: "52px",
+            color: "rgba(240,240,240,0.7)",
+          }}
+        >
+          {props.description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface GridPatternProps {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  squares?: [x: number, y: number][];
+  strokeDasharray?: number;
+  className?: string;
+}
+
+export function GridPattern({
+  width = 100,
+  height = 100,
+  x = -1,
+  y = -1,
+  squares,
+  strokeDasharray,
+  ...props
+}: GridPatternProps): ReactElement {
+  return (
+    <svg
+      fill="rgba(156, 163, 175, 0.2)"
+      stroke="rgba(156, 163, 175, 0.2)"
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        maskImage: "radial-gradient(circle at 0% 100%, white, transparent)",
+      }}
+      viewBox="0 0 600 400"
+      {...props}
+    >
+      <defs>
+        <pattern
+          id="og-pattern"
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+        >
+          <path
+            d={`M.5 ${height.toString()}V.5H${width.toString()}`}
+            fill="none"
+            strokeWidth={1}
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect
+        width="600"
+        height="600"
+        strokeWidth={0}
+        fill="url(#og-pattern)"
+        x={x}
+        y={y}
+      />
+      {squares?.map(([itemX, itemY]) => (
+        <rect
+          strokeWidth="0"
+          key={`${itemX.toString()}-${itemY.toString()}`}
+          width={width - 1}
+          height={height}
+          x={itemX * width + 1}
+          y={itemY * (height + 1)}
+        />
+      ))}
+    </svg>
+  );
+}

apps/next/src/app/og/[...slug]/route.tsx

+import { generateOGImage } from "@/app/og/[...slug]/og";
+import { metadataImage } from "@/lib/metadata";
+import { type ImageResponse } from "next/og";
+import { readFileSync } from "node:fs";
+
+const font = readFileSync("./src/app/og/[...slug]/Geist-Regular.ttf");
+const fontBold = readFileSync("./src/app/og/[...slug]/Geist-Bold.ttf");
+
+export const GET = metadataImage.createAPI((page): ImageResponse => {
+  return generateOGImage({
+    primaryTextColor: "rgb(240,240,240)",
+    primaryColor: "#3178C6",
+    title: page.data.title,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height={120}
+        width={120}
+        viewBox="0 0 1920 1920"
+      >
+        <defs>
+          <linearGradient
+            id="linear-gradient"
+            x1="223.68"
+            y1="733.57"
+            x2="1594.48"
+            y2="1521.74"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stop-color="#f6ddd7" />
+            <stop offset=".25" stop-color="#fcabe6" />
+            <stop offset=".3" stop-color="#f3ade6" />
+            <stop offset=".38" stop-color="#ddb3e8" />
+            <stop offset=".48" stop-color="#b8bcec" />
+            <stop offset=".59" stop-color="#85caf1" />
+            <stop offset=".7" stop-color="#50d8f6" />
+            <stop offset=".76" stop-color="#50d8f6" />
+            <stop offset=".86" stop-color="#b58fe8" />
+          </linearGradient>
+        </defs>
+        <rect
+          id="SquareBG"
+          x="96"
+          y="96"
+          width="1728"
+          height="1728"
+          rx="360.19"
+          ry="360.19"
+          style={{
+            fill: "#000",
+            strokeWidth: 0,
+          }}
+        />
+        <path
+          d="M1227.57,1375.94c-3.92-4.37-7.85-8.74-11.77-13.1-27.64-30.21-41.35-65.1-30.46-111.35-104.67,33.94-205.19,41.62-308.99,17.88-2.72,31.05-3.81,59.43-8.02,87.34-5.15,34.16-13.02,67.9-19.47,101.86-2.25,11.83-4.72,23.74-5.46,35.71-2.2,35.64-1.41,71.63-6.21,106.88-2.47,18.13-14.33,34.99-21.3,50.93h-77.71l.42-.97c4.15-11.29,8.29-22.58,12.44-33.87,0,0-.21.27-.21.27,4.2-4.21,8.39-8.43,12.59-12.64l-.27.27c2.12-2.13,4.24-4.25,6.36-6.38l11.44-1.32c1.11-18.89.94-11.95,1.11-18.89.83-33.72.34-67.53-1.47-101.21-.67-12.36-6.26-24.46-9.6-36.68-2.32.06-4.64.12-6.96.18-12.39,44.7-24.78,89.41-37.17,134.11,0,0,.55-.24.55-.24-8.87,16.08-21.35,47.27-30.22,63.35-11.03,1-42.13-.92-67.88-.77,2.1-21.24,9.98-32.37,23.37-44.39,28.79-25.84,36.54-63.75,36.43-100.05-.15-50.7-6.92-101.37-10.86-152.06,5.59-10.19,8.83-23.19,17.14-30.11,56.24-46.85,102.12-102.83,144.95-161.48,41.46-56.78,83.19-113.45,122.26-171.88,43.03-64.36,87.61-128.6,97.48-208.71,72.88,7.68,142.46,25.43,207.78,60.42,19.96,10.69,45.01,11.89,67.72,17.44,8.42,6.5,20.9,11.26,24.57,19.8,18.5,43.03,36.6,86.42,51.23,130.87,17.99,54.67,22.8,110.74,13.5,168.57-11.14,69.24-41.63,128.83-80.9,185.36-6.53,9.41-8.65,21.88-12.81,32.94,0,0,.15-.18.15-.18-6.82,4.82-14.03,9.18-20.38,14.54-17.18,14.49-21.33,42.61-48.67,46.55-.37-1.49-.55-2.99-.52-4.53-1.44-2.72-2.87-5.43-4.31-8.15-9.96-18.77-19.93-37.53-29.89-56.3ZM517.28,570.6c-10.46-.44-21.29,7.69-31.95,11.86,0,0-9.76,80.82-9.76,121.49s13.91,75.15,16.27,113.41c1.68,27.25,3.01,56.38,13.57,80.73,12.68,29.21,18.19,57.44,16.61,88.5-4.38,86.3,40.37,144.69,108.96,189.16,30.85-33.52,64.34-65,91.99-100.98,55.34-72.02,102.6-149.18,128.62-237.37,5.42-18.37,8.99-37.27,14.28-59.58,2.88-2.94,8.79-8.99,14.7-15.04l-141.94-.4c-2.09-1.89-3.55-3.22-5.64-5.11l-17.96-175.16c-65.91-4.05-131.8-8.74-197.77-11.52ZM665.84,361.83c-23.76-47.96-58.65-85.02-111.51-106.14-.84,14.47-1.52,26.06-2.26,38.88-17.66-12.73-33.28-23.98-53.45-38.52,2.58,25.98,5.08,44.11,6.04,62.33,1.89,36.02-13.58,54.11-49.86,59.15-7.07.98-14.41,0-21.52.83-21.28,2.46-32.65,14.43-35.51,35.63-3.74,27.68,10.41,45.81,33.06,56.83,23.57,11.47,48.7,19.75,77.45,31.13-4.21,14.19-8.49,28.22-12.51,42.32-3.62,12.69-6.95,25.46-10.41,38.2,10.66-4.17,21.48-12.3,31.95-11.86,65.97,2.78,131.86,7.46,197.77,11.52-3.72-76.27-14.91-151.03-49.22-220.28ZM1363.96,1424.58c1.96,2.05,3.91,4.09,5.87,6.14,2.05,2.06,4.1,4.12,6.15,6.17,2.04,1.96,4.07,3.92,6.11,5.88,7.5,4.99,15,9.99,22.49,14.98,3.64-19.55,25.85-47.67,44.43-61.31,7.67-5.63,11.05-16.91,16.99-25.18,3.32-4.62,7.89-8.34,11.9-12.46-1.62-13.04-4.17-26.03-4.67-39.11-1.43-37.53.92-74.57-10.84-112.04-14.13-45-8.64-92.52-6.02-140.17,43.12-8.67,61.47-36.79,63.89-74.64,2.92-45.72-5.65-89.82-34.29-127.23-20.53-26.81-48.34-41.86-82.84-36.43-22.85,3.59-45.04,11.37-67.53,17.28,8.42,6.5,20.9,11.26,24.57,19.8,18.5,43.03,36.6,86.42,51.23,130.87,17.99,54.67,22.8,110.74,13.5,168.57-11.14,69.24-41.63,128.83-80.9,185.36-6.53,9.41-8.65,21.88-12.81,32.94,10.93,13.53,21.85,27.05,32.78,40.58ZM985.74,765.38c-6.29,81.15-44.94,149.41-87.84,215.37-37.77,58.07-75.75,116.3-118.15,170.97-30.45,39.26-68.33,72.77-102.9,108.84.47,26.74.94,53.49,1.41,80.23,5.59-10.19,8.83-23.19,17.14-30.11,56.24-46.85,102.12-102.83,144.95-161.48,41.46-56.78,83.19-113.45,122.26-171.88,43.03-64.36,87.61-128.6,97.48-208.71-24.78-1.08-49.56-2.15-74.34-3.23ZM664.54,1198.77c31.99-35.25,67.97-67.72,95.05-106.41,41.85-59.77,79.26-122.86,115.33-186.36,20.46-36.01,35.34-75.24,37.26-118.13.34-7.72,8.23-15.09,12.63-22.63-3.62.1-7.23.2-10.85.3-4.64-.95-9.28-1.91-13.91-2.86-6.49.04-12.97.07-19.46.11-5.91,6.05-11.83,12.1-14.7,15.04-5.29,22.3-8.87,41.21-14.28,59.58-26.02,88.19-73.28,165.35-128.62,237.37-27.65,35.98-61.14,67.46-91.99,100.98,11.18,7.67,22.36,15.34,33.54,23.02ZM942.72,765.23c2.4,67.42-27.68,124.69-59.91,180.03-31.13,53.43-66.12,104.74-101.63,155.44-20.89,29.83-45.84,56.84-69.42,84.74-11.1,13.13-23.27,25.36-34.96,37.99.02,12.38.03,24.75.05,37.13,34.57-36.07,72.45-69.58,102.9-108.84,42.4-54.66,80.39-112.89,118.15-170.97,42.9-65.96,81.55-134.22,87.84-215.37-14.34-.05-28.68-.1-43.03-.15ZM1405.73,1462.64c5.46,11.19,15.47,22.34,15.54,33.56.25,39.8-2.64,79.65-5.17,119.42-.22,3.52-6.45,6.66-9.89,9.98-2.3,1.72-4.61,3.44-6.91,5.16-1.99,2.12-3.98,4.24-5.97,6.35-2.17,1.91-4.35,3.81-6.52,5.72,3.41,3.84,6.65,10.81,10.25,11,20.21,1.08,40.5.52,61.67.52,17.8-43.47,23.9-85.93,17.32-130.35-1.3-8.8-3.75-19.81.05-26.59,25.92-46.24,19.03-92.21,1.8-138.62-4.01,4.12-8.58,7.84-11.9,12.46-5.94,8.27-9.32,19.55-16.99,25.18-18.58,13.64-40.79,41.76-44.43,61.31.29,1.65.67,3.28,1.15,4.89ZM924.82,765.23c-4.4,7.53-12.29,14.91-12.63,22.63-1.92,42.89-16.8,82.12-37.26,118.13-36.08,63.51-73.48,126.6-115.33,186.36-27.09,38.69-63.06,71.15-95.05,106.41,4.09,8.22,8.17,16.44,12.26,24.66,11.69-12.64,23.86-24.86,34.96-37.99,23.58-27.89,48.53-54.91,69.42-84.74,35.5-50.7,70.5-102.01,101.63-155.44,32.23-55.34,62.31-112.61,59.91-180.03-5.97,0-11.93,0-17.9,0ZM900.05,762.67c4.64.95,9.28,1.91,13.91,2.86-4.64-.95-9.28-1.91-13.91-2.86ZM733.27,759.83c1.79.85,3.59,1.7,5.38,2.55-1.6-1.25-3.4-2.1-5.38-2.55ZM479.39,702.93c1.24,2.91-1.24,5.83,0,8.74-1.24-2.91,1.24-5.83,0-8.74ZM1215.35,1588.66c-8.44,5.86-16.88,11.72-25.32,17.58-1.64,9.45-3.28,18.9-5,28.8h72.24c0-14.59-.97-27.72.34-40.61.87-8.56,2.71-18.87,8.08-24.82,47.78-52.98,66.64-115.78,65.65-185.78-6.82,4.82-14.03,9.18-20.38,14.54-17.18,14.49-21.33,42.61-48.67,46.55.78,53.28-15.32,101.04-46.93,143.74ZM1257.46,1432.24c1.44,2.72,2.87,5.43,4.31,8.15-1.44-2.72-2.87-5.43-4.31-8.15Z"
+          style={{
+            fill: "url(#linear-gradient)",
+            strokeWidth: 0,
+          }}
+        />
+      </svg>
+    ),
+    description: page.data.description,
+    site: "LlamaIndex.TS",
+    fonts: [
+      {
+        name: "Geist",
+        data: font,
+        weight: 400,
+      },
+      {
+        name: "Geist",
+        data: fontBold,
+        weight: 600,
+      },
+    ],
+  });
+});
+
+export function generateStaticParams(): {
+  slug: string[];
+}[] {
+  return metadataImage.generateParams();
+}

apps/next/src/content/docs/llamaindex/index.mdx

@@ -26,12 +26,12 @@ pnpm add llamaindex
   <Card
     title="I'm new to RAG"
     description="Learn more about RAG (Retrieval-augmented generation) using LlamaIndex.TS."
-    href="/docs/llamaindex/starter/what-is-rag"
+    href="/docs/llamaindex/setup/what-is-rag"
   />
   <Card
     title="I want to try LlamaIndex.TS"
     description="Learn how to use LlamaIndex.TS with different JS runtime and frameworks."
-    href="/docs/llamaindex/starter"
+    href="/docs/llamaindex/setup"
   />
   <Card
     title="I want to improve performance when using LlamaIndex.TS"

apps/next/src/content/docs/llamaindex/meta.json

@@ -2,5 +2,5 @@
   "title": "LlamaIndex",
   "description": "The Data framework for LLM",
   "root": true,
-  "pages": ["---Guide---", "index", "starter"]
+  "pages": ["---Guide---", "what-is-llamaindex", "index", "setup", "starter"]
 }

apps/next/src/content/docs/llamaindex/setup/cloudflare.mdx

+---
+title: With Cloudflare Worker
+description: In this guide, you'll learn how to use LlamaIndex with CloudFlare Worker
+---
+
+import {
+  SiNodedotjs,
+  SiDeno,
+  SiBun,
+  SiCloudflareworkers,
+} from "@icons-pack/react-simple-icons";
+
+Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure you understand the basics.
+
+<Card
+  title="Getting Started with LlamaIndex.TS in Node.js"
+  href="/docs/llamaindex/setup/node"
+/>
+
+Also, you need have the basic understanding of <a href='https://developers.cloudflare.com/workers/'><SiCloudflareworkers className="inline mr-2" color="#F38020" />Cloudflare Worker</a>.
+
+## Adding environment variables
+
+```ts
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const { setEnvs } = await import("@llamaindex/env");
+    setEnvs(env);
+    const { OpenAIAgent } = await import("@llamaindex/openai");
+    // Start your code here
+    return new Response("Hello, world!");
+  },
+};
+```
+
+Then, you need create `.dev.vars` and add LLM api keys for the local development, such as `OPENAI_API_KEY` for OpenAI API key.
+
+<Callout type="warn">Do not commit the api key to git repository.</Callout>
+
+## Difference between Node.js and Cloudflare Worker
+
+In Cloudflare Worker and similar serverless JS environment, you need to be aware of the following differences:
+
+- Some Node.js modules are not available in Cloudflare Worker, such as `node:fs`, `node:child_process`, `node:cluster`...
+- You are recommend to design your code using network request, such as use `fetch` API to communicate with database, insteadof a long-running process in Node.js.
+- Some of LlamaIndex.TS modules are not available in Cloudflare Worker, for example `SimpleDirectoryReader` (requires `node:fs`), Some multimodal API that relies on [`onnxruntime-node`](https://www.npmjs.com/package/onnxruntime-node)(we might port to HTTP based module in the future).
+- `@llamaindex/core` is designed to work in all JavaScript environment, including Cloudflare Worker. If you find any issue, please report to us.
+- `@llamaindex/env` is a JS environment binding module, which polyfill some Node.js/Modern Web API (for example, we have a memory based `fs` module, and Crypto API polyfill). It is designed to work in all JavaScript environment, including Cloudflare Worker.

apps/next/src/content/docs/llamaindex/setup/getting-started.mdx

+---
+title: Getting Started
+description: We support multiple JS runtime and frameworks, bundlers.
+---
+import {
+	SiNodedotjs,
+	SiTypescript,
+	SiNextdotjs,
+	SiCloudflareworkers,
+	SiVite
+} from "@icons-pack/react-simple-icons";
+
+<Cards>
+	<Card title={
+		<>
+			<SiNodedotjs className="inline" color="#5FA04E" /> Node.js
+		</>
+	} href="/docs/llamaindex/setup/node" />
+	<Card title={
+		<>
+			<SiTypescript className="inline" color="#3178C6" /> TypeScript
+		</>
+	} href="/docs/llamaindex/setup/typescript.mdx" />
+	<Card title={
+		<>
+			<SiVite className='inline' color='#646CFF' /> Vite
+		</>
+	} href="/docs/llamaindex/setup/vite" />
+	<Card
+		title={
+			<>
+				<SiNextdotjs className='inline' color='#000000' /> Next.js (React Server Component)
+			</>
+		}
+		href="/docs/llamaindex/setup/next"
+	/>
+	<Card title={
+		<>
+			<SiCloudflareworkers className='inline' color='#F38020' /> Cloudflare Workers
+		</>
+	} href="/docs/llamaindex/setup/cloudflare" />
+</Cards>

apps/next/src/content/docs/llamaindex/setup/meta.json

+{
+  "title": "Setup",
+  "description": "The setup guide",
+  "defaultOpen": true,
+  "pages": [
+    "getting-started",
+    "next",
+    "node",
+    "typescript",
+    "vite",
+    "cloudflare"
+  ]
+}

apps/next/src/content/docs/llamaindex/starter/next.mdx → apps/next/src/content/docs/llamaindex/setup/next.mdx

@@ -7,7 +7,7 @@ Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure y
 
 <Card
   title="Getting Started with LlamaIndex.TS in Node.js"
-  href="/docs/llamaindex/starter/node"
+  href="/docs/llamaindex/setup/node"
 />
 
 ## Differences between Node.js and Next.js
@@ -32,3 +32,10 @@ export default withLlamaIndex(nextConfig);
 ```
 
 If you see any dependency issues, you are welcome to open an issue on the GitHub.
+
+## Edge Runtime
+
+[Vercel Edge Runtime](https://edge-runtime.vercel.app/) is a subset of Node.js APIs. Similar to [Cloudflare Workers](./cloudflare#difference-between-nodejs-and-cloudflare-worker),
+it is a serverless platform that runs your code on the edge.
+
+Not all features of Node.js are supported in Vercel Edge Runtime, so does LlamaIndex.TS, we are working on more compatibility with all JavaScript runtimes.

apps/next/src/content/docs/llamaindex/starter/node.mdx → apps/next/src/content/docs/llamaindex/setup/node.mdx

@@ -24,11 +24,7 @@ For more information, see the [How to read environment variables from Node.js](h
 
 ## TypeScript support
 
-LlamaIndex.TS is written in TypeScript and provides type definitions.
-We recommend using [tsx](https://www.npmjs.com/package/tsx) to run TypeScript scripts.
-
-```shell
-npx tsx my-script.ts
-# or
-node --import tsx my-script.ts
-```
+<Card
+	title="Getting Started with LlamaIndex.TS in TypeScript"
+	href="/docs/llamaindex/setup/typescript"
+/>

apps/next/src/content/docs/llamaindex/setup/typescript.mdx

+---
+title: With TypeScript
+description: In this guide, you'll learn how to use LlamaIndex with TypeScript
+---
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+
+LlamaIndex.TS is written in TypeScript and designed to be used in TypeScript projects.
+
+We do lots of work on strong typing to make sure you have a great typing experience with LlamaIndex.TS.
+
+```ts twoslash
+import { PromptTemplate } from '@llamaindex/core/prompts'
+const promptTemplate = new PromptTemplate({
+  template: `Context information from multiple sources is below.
+---------------------
+{context}
+---------------------
+Given the information from multiple sources and not prior knowledge.
+Answer the query in the style of a Shakespeare play"
+Query: {query}
+Answer:`,
+	templateVars: ["context", "query"],
+});
+// @noErrors
+promptTemplate.format({
+	c
+//^|
+})
+```
+
+```ts twoslash
+import { FunctionTool } from '@llamaindex/core/tools'
+import { z } from 'zod'
+
+// ---cut-before---
+const inputSchema = z.object({
+	time: z.string(),
+	city: z.string(),
+})
+
+type Input = z.infer<typeof inputSchema>
+
+FunctionTool.from<Input>((input) => {
+// @noErrors
+	input.t
+//      ^|
+}, {
+	name: 'getWeather',
+	description: 'Get the weather information',
+	parameters: inputSchema,
+})
+```
+
+## Enable TypeScript
+
+
+```json5
+{
+  compilerOptions: {
+    // ⬇️ add this line to your tsconfig.json
+    moduleResolution: "bundler", // or "node16"
+  },
+}
+```
+
+<Accordions>
+	<Accordion
+		title="Why modify tsconfig.json"
+	>
+
+We are shipping both ESM and CJS module, and compatible with Vercel Edge, Cloudflare Workers, and other serverless platforms.
+
+So we are using [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) to support all environments.
+
+This is a kind of modern way of shipping packages, but might cause TypeScript type check to fail because of legacy module resolution.
+
+Imaging you put output file into `/dist/openai.js` but you are importing `llamaindex/openai` in your code, and set `package.json` like this:
+
+```json5
+{
+	"exports": {
+		"./openai": "./dist/openai.js"
+	}
+}
+```
+
+In old module resolution, TypeScript will not be able to find the module because it is not follow the file structure, even you run `node index.js` successfully. (on Node.js >=16)
+
+See more about [moduleResolution](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution) or
+[TypeScript 5.0 blog](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#--moduleresolution-bundler7).
+
+
+	</Accordion>
+</Accordions>
+
+
+## Run TypeScript Script in Node.js
+
+We recommend to use [tsx](https://www.npmjs.com/package/tsx) to run TypeScript script in Node.js.
+
+```shell
+node --import tsx ./my-script.ts
+```

apps/next/src/content/docs/llamaindex/setup/vite.mdx

+---
+title: With Vite
+description: In this guide, you'll learn how to use LlamaIndex with Vite
+---
+
+Before you start, make sure you have try LlamaIndex.TS in Node.js to make sure you understand the basics.
+
+<Card
+  title="Getting Started with LlamaIndex.TS in Node.js"
+  href="/docs/llamaindex/setup/node"
+/>
+
+Also, make sure you have a basic understanding of [Vite](https://vitejs.dev/).
+
+## Why mention Vite?
+
+Vite.js is widely used in building many web applications, like React.js, even for some native app like [Electron](https://www.electronjs.org/).
+
+However, it's not a ready-to-use solution for a Node.js-like application using Vite, as Vite is designed for web applications(run in browser).
+
+There's some plugin/framework based on Vite, like [Waku.gg](https://github.com/dai-shi/waku), or [Electron Vite](https://electron-vite.org/)
+
+For now, we have no clear solution for bundling LlamaIndex.TS with Vite, if you have any idea/solution, please let us know.

apps/next/src/content/docs/llamaindex/starter/getting-started.mdx

----
-title: Getting Started
-description: We support multiple JS runtime and frameworks, bundlers.
----
-
-<Cards>
-  <Card title="Node.js" href="/docs/llamaindex/starter/node" />
-  <Card title="Vite" href="/docs/llamaindex/starter/vite" />
-  <Card
-    title="Next.js (React Server Component)"
-    href="/docs/llamaindex/starter/next"
-  />
-  <Card title="Cloudflare Worker" href="/docs/llamaindex/starter/cloudflare" />
-</Cards>

apps/next/src/content/docs/llamaindex/starter/meta.json

-{
-  "title": "Starter",
-  "description": "The starter guide",
-  "defaultOpen": true,
-  "pages": ["getting-started", "next", "node"]
-}

apps/next/src/content/docs/llamaindex/what-is-llamaindex.mdx

+---
+title: What is LlamaIndex.TS
+description: LlamaIndex is the leading data framework for building LLM applications
+---
+
+import {
+  SiNodedotjs,
+  SiDeno,
+  SiBun,
+  SiCloudflareworkers,
+} from "@icons-pack/react-simple-icons";
+
+LlamaIndex is a framework for building context-augmented generative AI applications with LLMs including agents and workflows.
+
+The TypeScript implementation is designed for JavaScript server side applications using <SiNodedotjs className="inline" color="#5FA04E" /> Node.js, <SiDeno className="inline" color="#70FFAF" /> Deno, <SiBun className="inline" /> Bun, <SiCloudflareworkers className="inline" color="#F38020" /> Cloudflare Workers, and more.
+
+LlamaIndex.TS provides tools for beginners, advanced users, and everyone in between.
+
+<iframe
+  className="w-full h-[440px]"
+  aria-label="LlamaIndex.TS Starter"
+  aria-description="This is a starter example for LlamaIndex.TS, it shows the basic usage of the library."
+  src="https://stackblitz.com/github/run-llama/LlamaIndexTS/tree/main/examples?file=starter.ts"
+/>