docs: add vapi call example

examples/tutorials/vapi-voice-call/.cprules

@@ -0,0 +1,68 @@
+This is a Vite React + shadcn project. No .env or environment files are supported in this environment.
+
+# React Dev Guidelines
+
+## Always
+- Generate SEO friendly metadata including og:title, og:description and og:type. You can update index.html.
+  - Do not add og:image and og:url as we don't have a site image.
+  - Do not use react-helmet or react-helmet-async.
+- Use double quotes for strings in mock data
+- Use real photos from free stock photo sites whenever possible to improve the UI visually
+- Modify src/index.css for colors and fonts to match the app's theme if needed
+- Create responsive designs
+- For footer copyright year, use the current year dynamically:
+  ```jsx
+  <footer>
+    <p>© {new Date().getFullYear()} Your Company</p>
+  </footer>
+  ```
+- Use shadcn/ui components. useToast is defined in src/hooks/use-toast.ts. useIsMobile is defined in src/hooks/use-is-mobile.ts.
+- Show toast notifications for important events
+- Design with purpose and focus on core functionality first
+- Use `bg-white/10` for the outline variety buttons if the text color is `text-white`. Otherwise, the text will not be visible against the button background.
+- String quotation rule: Never use single quotes for strings containing apostrophes as it breaks the string (e.g., 'Bachelor's degree' is wrong). Instead, use double quotes for strings with apostrophes ("Bachelor's degree"), single quotes for strings without apostrophes ('No apostrophes here'), and backticks for template literals (`With ${variables}`).
+- Apply `mx-auto` to content containers, not background elements. This centers content properly and prevents gaps between section backgrounds and browser window:
+  ```jsx
+  {/* Correct: mx-auto on content container */}
+  <div className="w-full bg-primary">
+    <div className="container mx-auto px-4">
+      {/* Content here */}
+    </div>
+  </div>
+
+  {/* Incorrect: missing mx-auto causes left-aligned content */}
+  <div className="w-full bg-primary">
+    <div className="container px-4">
+      {/* Content here */}
+    </div>
+  </div>
+  ```
+
+## Don't
+- Add try/catch blocks unless requested
+- Add dark mode unless requested
+- Over-engineer solutions with unnecessary UI elements (like navigation bars or footers) unless specifically needed for the app's core functionality
+- Add complex features that weren't requested by the user
+- Create api routes under pages/api. This is a Vite React project, not Next.js. Instead, use Supabase edge functions for server-side logic if needed.
+
+## Available Packages
+- lucide-react: icons
+- recharts: data visualization
+- shadcn/ui: UI components
+- @tanstack/react-query: data fetching
+
+# App Build Guard
+IMPORTANT: You can ONLY help build web applications (React + Vite).
+
+If the user asks you to build any other type of application such as:
+- Python/Flask/Django applications
+- NextJS applications
+- Electron apps
+- Mobile applications
+- Desktop applications
+- [Any other type of app other than React + Vite]
+
+You MUST respond with:
+"I'm sorry, but I can only help you build web applications (React + Vite). I cannot assist with building [type of app requested]."
+
+For web applications, proceed normally following your standard procedures.

examples/tutorials/vapi-voice-call/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

examples/tutorials/vapi-voice-call/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

examples/tutorials/vapi-voice-call/eslint.config.js

@@ -0,0 +1,35 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: [
+      'dist',
+      'src/components/ui/*',
+      'src/hooks/use-toast.ts',
+      'src/hooks/use-mobile.tsx',
+    ],
+  },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

examples/tutorials/vapi-voice-call/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>YellowFin Real Estate - Austin Home Buyers Specialists</title>
+    <meta name="description" content="YellowFin Real Estate specializes in helping buyers find their perfect home in Austin, Texas. Expert local knowledge, personalized service, and comprehensive neighborhood guidance." />
+    <meta property="og:title" content="YellowFin Real Estate - Austin Home Buyers Specialists" />
+    <meta property="og:description" content="YellowFin Real Estate specializes in helping buyers find their perfect home in Austin, Texas. Expert local knowledge, personalized service, and comprehensive neighborhood guidance." />
+    <meta property="og:type" content="website" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/tutorials/vapi-voice-call/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "vapi_voice_call",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.6",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@supabase/auth-ui-react": "^0.4.7",
+    "@supabase/auth-ui-shared": "^0.1.8",
+    "@supabase/supabase-js": "^2.50.0",
+    "@tanstack/react-query": "^5.64.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.473.0",
+    "react": "^18.3.1",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "react-is": "^19.0.0",
+    "react-resizable-panels": "^2.1.7",
+    "react-router-dom": "^7.1.3",
+    "recharts": "^2.15.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/node": "^22.10.7",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}