add examples section

docs/examples/ai.mdx

@@ -0,0 +1,129 @@
+---
+title: "AI"
+description: "Work with AI in Cascade"
+icon: "robot"
+---
+
+## AI tool of choice
+
+Cascade uses [Open AI](https://openai.com/) as its AI tool of choice. Open AI is a cloud-based AI platform that provides access to a wide range of AI services, including text generation, image generation, and more.
+
+<Tip>
+  You need to add `OPENAI_API_KEY` to your `.env` file to use Open AI features
+  if you clone Cascade.
+</Tip>
+
+## Example of AI usage
+
+There is a simple example of AI usage in Cascade. You can find it [here](https://cascade.stackonfire.com/app/examples). It uses Open AI to generate a launch plan for a SaaS project.
+
+The integration is pretty simple and uses OpenAI function calling. The function is called `generateSaaSPlan` and it takes in a few parameters. The parameters are validated using Zod and the function returns a parsed launch plan arguments displayed in the UI.
+
+```ts
+import { z } from "zod";
+import { openai } from "~/lib/openai";
+
+import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+
+const actionableStepSchema = z.object({
+  name: z.string(),
+  description: z.string().max(200),
+});
+
+const launchPlanArgsSchema = z.object({
+  productName: z.string(),
+  productDescription: z.string(),
+  actionableSteps: z.array(actionableStepSchema),
+});
+
+export const aiRouter = createTRPCRouter({
+  generateProjectPlan: protectedProcedure
+    .input(
+      z.object({ projectName: z.string(), projectDescription: z.string() }),
+    )
+    .mutation(async ({ input }) => {
+      const completion = await openai.chat.completions.create({
+        model: "gpt-3.5-turbo",
+        messages: [
+          {
+            role: "system",
+            content:
+              "you are an AI specialised in creating plans for launching SaaS projects. Generate a comprehensive plan detailing the steps necessary for a successful launch, including market analysis, target audience identification, marketing strategies, and development roadmap.",
+          },
+          {
+            role: "user",
+            content: `I'm planning to launch a new SaaS called "${input.projectName}". It's described as "${input.projectDescription}". Based on this, could you help me formulate a detailed launch plan?`,
+          },
+        ],
+        tools: [
+          {
+            type: "function",
+            function: {
+              name: "generateSaaSPlan",
+              description:
+                "Generates a comprehensive plan for launching a SaaS project",
+              parameters: {
+                type: "object",
+                properties: {
+                  productName: {
+                    type: "string",
+                    description: "Name of the SaaS product",
+                  },
+                  productDescription: {
+                    type: "string",
+                    description: "A brief description of the SaaS product",
+                  },
+                  actionableSteps: {
+                    type: "array",
+                    description:
+                      "A list of actionable steps to take during the launch process",
+                    items: {
+                      type: "object",
+                      properties: {
+                        name: {
+                          type: "string",
+                          description:
+                            "A short, descriptive name for the actionable step",
+                        },
+                        description: {
+                          type: "string",
+                          description:
+                            "A detailed description of the actionable step. Maximum length is 200 characters. Make it relatable to the target audience and concrete.",
+                        },
+                      },
+                    },
+                  },
+                },
+                required: [
+                  "productName",
+                  "productDescription",
+                  "actionableSteps",
+                ],
+              },
+            },
+          },
+        ],
+        tool_choice: {
+          type: "function",
+          function: {
+            name: "generateSaaSPlan",
+          },
+        },
+        temperature: 0.9,
+      });
+
+      const launchPlanArgs =
+        completion.choices?.[0]?.message?.tool_calls?.[0]?.function.arguments;
+      // Parsing the launch plan arguments using Zod
+      const parsedLaunchPlanArgs = launchPlanArgs
+        ? launchPlanArgsSchema.parse(JSON.parse(launchPlanArgs))
+        : null;
+
+      return parsedLaunchPlanArgs;
+    }),
+
+  getSecretMessage: protectedProcedure.query(() => {
+    return "you can now see this secret message!";
+  }),
+});
+```

docs/examples/file-uploads.mdx

@@ -0,0 +1,18 @@
+---
+title: "File uploads"
+description: "Upload your files to the cloud with Cascade"
+icon: "upload"
+---
+
+## File storage tool of choice
+
+Cascade uses [uploadthing](https://uploadthing.dev/) as its file upload tool of choice. Uploadthing is a simple file uploader that allows you to upload files to your cloud storage.
+
+<Tip>
+You need to add `UPLOADTHING_APP_ID` & `UPLOADTHING_SECRET` to your `.env` file to use Uploadthing features if you clone Cascade.
+
+</Tip>
+
+## Setup with Cascade
+
+Cascade uses awesome work of [Sadman Sakib](https://github.com/sadmann7) to make file uploads easy. The implementation combines `react-dropzone` & `shadcn/ui` components to make the whole process as simple as possible.

docs/mint.json

@@ -58,6 +58,10 @@
     {
       "group": "Marketing",
       "pages": ["marketing/SEO", "marketing/blog", "marketing/newsletter"]
+    },
+    {
+      "group": "Examples",
+      "pages": ["examples/ai", "examples/file-uploads"]
     }
   ],
   "footerSocials": {