Example

apps/docs/pages/_app.mdx

@@ -9,5 +9,4 @@ export default function Nextra({ Component, pageProps }) {
     </>
   );
 
-
 }

apps/docs/pages/docs/api.mdx

@@ -87,7 +87,7 @@ export async function POST() {
   const response = await openai.createChatCompletion({
     model: 'gpt-4',
     stream: true,
-    messages: { role: 'user', content: 'What is love?' }
+    messages: [{ role: 'user', content: 'What is love?' }]
   })
   const stream = OpenAIStream(response)
   return new StreamingTextResponse(stream, {

example/.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

example/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

example/app/api/generate/route.ts

@@ -0,0 +1,31 @@
+// app/api/generate/route.ts
+import { Configuration, OpenAIApi } from 'openai-edge'
+import { OpenAIStream, StreamingTextResponse } from '@vercel/ai-utils'
+
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY
+})
+const openai = new OpenAIApi(config)
+
+export const runtime = 'edge'
+
+export async function POST() {
+  const response = await openai.createChatCompletion({
+    model: 'gpt-4',
+    stream: true,
+    messages: [{ role: 'user', content: 'What is love?' }]
+  })
+  const stream = OpenAIStream(response, {
+    async onStart() {
+      console.log('streamin yo')
+    },
+    async onToken(token) {
+      console.log('token: ' + token)
+    },
+    async onCompletion(content) {
+      console.log('full text: ' + content)
+      // await prisma.messages.create({ content }) or something
+    }
+  })
+  return new StreamingTextResponse(stream)
+}

example/app/chat.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useChat } from '@vercel/ai-utils'
+import { nanoid } from 'nanoid'
+import { useState } from 'react'
+export function Chat() {
+  const { messages, append } = useChat({
+    initialMessages: [],
+    api: '/api/generate'
+  })
+  const [input, setInput] = useState('')
+  return (
+    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
+      {messages && messages.length
+        ? messages.map(m => <div key={m.id}>{m.content}</div>)
+        : null}
+
+      <form
+        onSubmit={e => {
+          e.preventDefault()
+          append({
+            id: nanoid(12),
+            content: input,
+            role: 'user'
+          })
+          setInput('')
+        }}
+      >
+        <input
+          className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
+          value={input}
+          placeholder="Say something..."
+          onChange={e => setInput(e.target.value)}
+        />
+      </form>
+    </div>
+  )
+}

example/app/globals.css

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

example/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>
+  )
+}

example/app/page.tsx

@@ -0,0 +1,8 @@
+import { Chat } from './chat'
+export default function Home() {
+  return (
+    <main>
+      <Chat />
+    </main>
+  )
+}

example/next.config.js

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

example/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@huggingface/inference": "^2.5.0",
+    "@types/node": "^17.0.12",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
+    "@vercel/ai-utils": "workspace:*",
+    "autoprefixer": "^10.4.14",
+    "eslint-config-next": "13.4.4-canary.11",
+    "nanoid": "^4.0.2",
+    "next": "13.4.4-canary.11",
+    "openai-edge": "^0.5.1",
+    "postcss": "^8.4.23",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.2",
+    "typescript": "5.0.4"
+  }
+}

example/postcss.config.js

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

example/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: []
+}

example/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"]
+}

packages/core/package.json

@@ -10,9 +10,9 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "build": "tsup",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "dev": "tsup --watch",
     "lint": "eslint \"src/**/*.ts*\"",
     "type-check": "tsc --noEmit",
     "prettier-check": "prettier --check \"src/**/*.ts*\"",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "eventsource-parser": "1.0.0",
-    "nanoid": "^4.0.2",
+    "nanoid": "^3.3.6",
     "swr": "2.1.5"
   },
   "devDependencies": {

packages/core/src/anthropic-stream.ts

@@ -41,5 +41,3 @@ export function AnthropicStream(
 ): ReadableStream {
   return AIStream(res, parseAnthropicStream, cb)
 }
-
-AnthropicStream.$$streamType = Symbol.for('AIStream.AnthropicStream')

packages/core/src/huggingface-stream.ts

@@ -68,5 +68,3 @@ export function HuggingFaceStream(
   })
   return stream.pipeThrough(forkedStream)
 }
-
-HuggingFaceStream.$$streamType = Symbol.for('AIStream.HuggingFaceStream')

packages/core/src/openai-stream.ts

@@ -37,5 +37,3 @@ export function OpenAIStream(
 ): ReadableStream {
   return AIStream(res, parseOpenAIStream, cb)
 }
-
-OpenAIStream.$$streamType = Symbol.for('AIStream.OpenAIStream')