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/

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series