DEV Community

Cover image for introducing new Vercel AI SDK
Dom Sipowicz
Dom Sipowicz

Posted on

1

introducing new Vercel AI SDK

  • 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>
  )
}
Enter fullscreen mode Exit fullscreen mode

SDK docs:

Vercel AI Playgroud:


Godspeed

PS. Follow me on Twitter or LinkedIn
https://twitter.com/dom_sipowicz
https://www.linkedin.com/in/dominiksipowicz/

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay