feat: add Vercel AI SDK example

next-vercel-ai-sdk/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next-vercel-ai-sdk/README.md

@@ -0,0 +1,46 @@
+# Transformers.js and Vercel AI SDK example
+
+A modern Transformers.js chat application powered by [@built-in-ai/transformers-js](https://github.com/jakobhoeg/built-in-ai) and [Vercel AI SDK](https://ai-sdk.dev/). 
+This app demonstrates how to use Transformers.js models with Vercel AI SDK to quickly build a fully functional chat application.
+
+Components to check out for the implementation:
+- [page.tsx](./src/app/page.tsx)
+- [chat-transport.tsx](./src/app/chat-transport.ts)
+- [store.ts](./src/store/store.ts)
+- [models.ts](./src/app/models.ts)
+
+## Features
+
+- Run AI models directly in the browser
+- Stream and interrupt responses
+- Switch between different Transformers.js models
+- Upload and process images in conversations
+- Render reasoning for reasoning models (Qwen3)
+
+## Tech Stack
+
+- [Next.js 15](https://nextjs.org)
+- [Shadcn/ui](https://ui.shadcn.com) for modern, accessible components
+- [Zustand](https://github.com/pmndrs/zustand) for lightweight state management
+- **AI Integration**: 
+  - [Vercel AI SDK](https://ai-sdk.dev/) for chat interface and streaming
+  - [@built-in-ai/transformers-js](https://github.com/jakobhoeg/built-in-ai) model provider that works as a wrapper for Transformers.js to integreate with Vercel AI SDK. 
+
+## Getting Started
+
+1. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+2. **Run the development server**:
+   ```bash
+   npm run dev
+   ```
+
+3. **Open your browser**:
+   Navigate to [http://localhost:3000](http://localhost:3000) to see the application.
+
+## Deployment
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/huggingface/transformers.js-examples/tree/main/next-vercel-ai-sdk)

next-vercel-ai-sdk/components.json

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

next-vercel-ai-sdk/next.config.ts

@@ -0,0 +1,21 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // (Optional) Export as a static site
+  // See https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#configuration
+  output: 'export', // Feel free to modify/remove this option
+
+  // Override the default webpack configuration
+  webpack: (config) => {
+    // Ignore node-specific modules when bundling for the browser
+    // See https://webpack.js.org/configuration/resolve/#resolvealias
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "sharp$": false,
+      "onnxruntime-node$": false,
+    }
+    return config;
+  },
+};
+
+export default nextConfig;