Add Groq example (#1363)

examples/next-groq/.env.local.example

@@ -0,0 +1 @@
+GROQ_API_KEY=xxxxxxxxx

examples/next-groq/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-groq/README.md

@@ -0,0 +1,41 @@
+2# Vercel AI SDK, Next.js, and Groq Chat Example
+
+This example shows how to use the [Vercel AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) and [Groq](https://groq.com/) to create a ChatGPT-like AI-powered streaming chat bot. Groq's APIs are compatible with OpenAI's so we use the OpenAI JS SDK but change its base URL to point to Groq's API with an environment variable.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=ai-sdk-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgit.luolix.top%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-groq&env=GROQ_API_KEY&envDescription=Groq%20API%20Key&envLink=https%3A%2F%2Fwow.groq.com&project-name=vercel-ai-chat-groq&repository-name=vercel-ai-chat-groq)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example https://github.com/vercel/ai/tree/main/examples/next-groq next-groq-app
+```
+
+```bash
+yarn create next-app --example https://github.com/vercel/ai/tree/main/examples/next-groq next-groq-app
+```
+
+```bash
+pnpm create next-app --example https://github.com/vercel/ai/tree/main/examples/next-groq next-groq-app
+```
+
+To run the example locally you need to:
+
+1. Sign up at [Groq's Developer Platform](https://wow.groq.com) and create an API KEY.
+2. Set the required environment variables as shown [the example env file](./.env.local.example) but in a new file called `.env.local`
+3. `pnpm install` to install the required dependencies.
+4. `pnpm dev` to launch the development server.
+
+## Learn More
+
+To learn more about OpenAI, Next.js, and the Vercel AI SDK take a look at the following resources:
+
+- [Vercel AI SDK docs](https://sdk.vercel.ai/docs)
+- [Vercel AI Playground](https://play.vercel.ai)
+- [Groq Documentation](https://wow.groq.com/) - learn about Groq features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

examples/next-groq/app/api/chat/route.ts

@@ -0,0 +1,28 @@
+import { OpenAI } from '@ai-sdk/openai';
+import { StreamingTextResponse, experimental_streamText } from 'ai';
+
+export const runtime = 'edge';
+
+const groq = new OpenAI({
+  apiKey: process.env.GROQ_API_KEY ?? '',
+  baseURL: 'https://api.groq.com/openai/v1',
+});
+
+export async function POST(req: Request) {
+  try {
+    // Extract the `messages` from the body of the request
+    const { messages } = await req.json();
+
+    // Call the language model
+    const result = await experimental_streamText({
+      model: groq.chat('llama2-70b-4096'),
+      messages,
+    });
+
+    // Respond with the stream
+    return new StreamingTextResponse(result.toAIStream());
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+}

examples/next-groq/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/next-groq/app/layout.tsx

@@ -0,0 +1,21 @@
+import './globals.css';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/next-groq/app/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useChat } from 'ai/react';
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat();
+  return (
+    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+      {messages.length > 0
+        ? messages.map(m => (
+            <div key={m.id} className="whitespace-pre-wrap">
+              {m.role === 'user' ? 'User: ' : 'AI: '}
+              {m.content}
+            </div>
+          ))
+        : null}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+          value={input}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  );
+}

examples/next-groq/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

examples/next-groq/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "next-groq",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "latest",
+    "ai": "latest",
+    "next": "14.1.1",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.12",
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.2.4",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^7.32.0",
+    "eslint-config-next": "13.4.12",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
+    "typescript": "5.1.3"
+  }
+}

examples/next-groq/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

examples/next-groq/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+};

examples/next-groq/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

turbo.json

@@ -10,6 +10,7 @@
         "AWS_SECRET_ACCESS_KEY",
         "COHERE_API_KEY",
         "GOOGLE_API_KEY",
+        "GROQ_API_KEY",
         "HUGGINGFACE_API_KEY",
         "MISTRAL_API_KEY",
         "OPENAI_API_KEY",