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 GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

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

Okay