introducing new Vercel AI SDK

#nextjs #javascript #webdev #ai

What is the new frontend AI library?
How to start new AI web app?

npm i ai

TL;DR:

build your own custom AI Chat on your website fast
Streaming First UI Helpers
edge-ready software development kit for AI apps
built with React and Svelte.

'use client'

import { useChat } from 'ai/react'

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div>
      {messages.length > 0
        ? messages.map(m => (
            <div key={m.id}>
              {m.role === 'user' ? 'User: ' : 'AI: '}
              {m.content}
            </div>
          ))
        : null}

      <form onSubmit={handleSubmit}>
        <input          
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  )
}