Hands on with the Vercel AI SDK 3.1

Рет қаралды 25,147

Күн бұрын

Learn how you can use the Vercel AI SDK as your Typescript Framework for building AI applications.
0:00 - Introduction
0:28 - Generate Text
1:31 - Stream Text
2:18 - Generate Object
3:15 - Stream Object
3:55 - Tools
6:05 - Building a chatbot with AI SDK UI
7:31 - Generative UI chatbot with AI SDK RSC
12:22 - Conclusion
◆ Repo with examples: github.com/nicoalbanese/ai-sd...
◆ Docs: sdk.vercel.ai/docs
◆ Blog: vercel.com/blog/vercel-ai-sdk...
◆ Demo: chat.vercel.ai/
◆ v0: v0.dev

Пікірлер: 86

@michaelo4u 28 күн бұрын

Thanks! Great job simplifying it.

@MilindMishra 29 күн бұрын

Thanks for the walkthough! Looking fwd to build generative ui stuff :)

@whovivekshukla 29 күн бұрын

I tried out their streaming ui a few months ago! that was pretty dope!

@syndg 28 күн бұрын

Was just about to send you this video for our reference. Glad to see you already watched it!

@ahmadbilalfarooqi5731 29 күн бұрын

great explain by AI SDK of Vercel its really helpful and easiest for building application with the use of predefined function and method

@NityanandaDeGaneshpuri 27 күн бұрын

Thank you guys!

@TomAsh519 28 күн бұрын

Could you please do a tutorial on the combined use of ai ask with long chain adapter that utilizes eg. simple RAG? From your documentation it is not clear how to implement it properly.

@DS-ow2ge 29 күн бұрын

Each new generative UI example from you guys is implemented in a different pattern. From manually intercepting response types to the latest streamui+tools. Does the team feel this present pattern is mature or are they unhappy with it and will be redoing it next month?

@fagnersales532 28 күн бұрын

Nice observation

@carloslfu 28 күн бұрын

Yeah, but this is why it experimental. Use at your own risk!

@shuding 28 күн бұрын

Hey, AI SDK maintainer here! I'm not sure what you're referring to regarding "intercepting response types", but `streamUI` is pretty stable. It's the same as the previous experimental `render` function, but with a more consistent name as other APIs like `streamText` and `streamObject`. Also worth mentioning that the Generative UI APIs are designed to be general enough and fit into any UI patterns and AI pipelines, which means that there isn't only one way to do Generative UI. For example, you can just use `streamUI` + tools to handle LLM + UI, or combine low-level utilities like `createStreamableUI`/`createStreamableValue` and your existing pipeline for flexibility. Happy to answer any questions!

@wshewm 28 күн бұрын

@@shuding What are your recommendations for maintaining type-safety in the application, especially surrounding the server actions and use of the `useActions` hook? Unless I'm missing something, it seems like the required use of the hook defeats one of the major benefits of server actions: end to end type safety. Is there maybe a lower-level approach that I could take to bypass the hook?

@itszachhan 28 күн бұрын

@@shuding Can you use libraries like shadcn and nextui for the streamed components? Last time I tried, it wasnt working

@yaseerokino 28 күн бұрын

Vercel always coming through for developers

@0xOmzi 27 күн бұрын

Thanks for this great video! Looking forward to trying my hands out on the latest release! Kudos to the Vercel AI team too!

@usagisan79 29 күн бұрын

ilove ai sdk and kirimase both!

@TheJuava 27 күн бұрын

Great Overview! A Video incorporating RAG with Vercel AI SDK would be awesome!

@nicoalbanese10 23 күн бұрын

Thanks for the suggestion - this is on our list!

@0xOmzi 2 күн бұрын

Hyped! 🥳

@raphauy 28 күн бұрын

Awesome!

@journeyofc6200 28 күн бұрын

dope!!

@asimalqasmi7316 29 күн бұрын

Let me recall the kirimase dream I had

@andreschou9560 28 күн бұрын

sick

@daniloitj 16 күн бұрын

Very good explanation. If possible, could you connect streamUI with assistants? I also had a lot of difficulty separating the tools into other files.

@remiib18 28 күн бұрын

Is it still not possible to use both the regular tools to fetch data and the tools to return components ?

@rhyscampbell4178 22 күн бұрын

NICO!!!!!

@xberna8156 28 күн бұрын

I could not find an example in the Docs where the model can use Tools and return RSC while also being able to Stream a response when no Tool is used. All the example I could find use generateText() or streamUi() so the text response Is not a Stream. Should I use a combination of streamText() + Tools + createStreamableUi() to Stream text and have Tools that can return RSC?

@hakarsheikh7853 26 күн бұрын

Great question im interested to know too

@nicoalbanese10 23 күн бұрын

Hey! With `streamUI`, if no tool is used, the text response is streamed via the component returned from the `text` function. Is that what you're looking to do?

@xberna8156 23 күн бұрын

@@nicoalbanese10 Yes, that's correct. I would like to stream the text token by token when the model does not use a tool. Can I achieve that using streamUI?

@andru5054 3 күн бұрын

Hey, awesome demo - thanks. We're using llamaindex in Python for our LLM backend that uses RAG. I want to use tools that pass react components to the frontend - how would I accomplish this? Thank you

@jrmumm 24 күн бұрын

how does it stream a structured object? doesn't the stream come back as JSON? how can it parse it if it's not fully complete?

@ShaneCrenshaw 14 күн бұрын

Is there an example with streamUI and error handling for things like finishReason and usage?

@TomAsh519 28 күн бұрын

it is me only or this tutorial and the repo does not work? I got Error: `useUIState` must be used inside an provider. to resolve it add import { AI } from "./action"; to root layout: export default function RootLayout({ children, }: Readonly) { return ( {children} ); }

@ShaneCrenshaw 14 күн бұрын

If you are calling getAiState or useUIState, it has to happen inside of So you could create a new component and do something like and inside of Chat, that's where you would use uiUIState

@JustOmmShah 28 күн бұрын

Where do you keep the API Key?

@nenadbanjeglav2081 28 күн бұрын

Can I use this in next.js out of the box?

@jrmumm 23 күн бұрын

when you stream an object, you get a partial. how do you get the final/full response (not partial)?

@Samuelsward96 Күн бұрын

Hey i'm struggling a bit with the useChat for multiple conversations. How can i keep multiple conversations active at once? Any tips?

@ShouryanNikam 29 күн бұрын

how do you make the code animations?

@dawidwraga 28 күн бұрын

I'm just gonna leave a comment here so I'm notified if someone responds 👀

@mishal_legit 28 күн бұрын

@ahmoin 28 күн бұрын

/free

@rude_people_die_young 28 күн бұрын

Great use of zod ❤

@zivtamary 28 күн бұрын

@Jake-bh1hm 29 күн бұрын

is this compatible with sveltekit 5?

@mustofa_id 29 күн бұрын

yes

@FelixWaigner 27 күн бұрын

When will i be able to use this with langchain?

23 күн бұрын

Someone knows how to Improve the response using the API of openAI? Seems like the chat-gtp web app the results are a lot better. Using the API returns very similar responses, in this case, asking "tell me a joke" answer the same thing over and over again. Another great API btw

@sanukjoseph 29 күн бұрын

🤩❣...

@smitty7326 15 күн бұрын

god i wish i knew about vercel ai like 6 months ago lol

@mymorningjacket_ 27 күн бұрын

Anyone have a great example on how to get the user's actual location here?

@nicoalbanese10 23 күн бұрын

You can run any asynchronous javascript code within a tools' execute function. So you would first want to find the exact location based on the search query (eg. openstreetmap). Then pass that to a weather api (eg. open-meteo) and return the resulting temperature 😊

@mymorningjacket_ 20 күн бұрын

@@nicoalbanese10 thanks for the suggestion, nico!

@yogeshrathod953 28 күн бұрын

Can it work with ollama

@simpingsyndrome 29 күн бұрын

will it work for React Native?, i wanna build my ai chatbot mobile app.

@jeanysergeimezarodriguez8629 28 күн бұрын

i have the same question hehe

@LutherDePapier 28 күн бұрын

Where's Lee?

@leerob 28 күн бұрын

I'm here :)

@wshewm 28 күн бұрын

This is cool and all, but it seems that around every corner in this SDK (especially with the rsc stuff) all the types are just 'any'. In my opinion, you can't really call your library "The AI Framework for TypeScript" and then not have strong types. This is especially annoying because in my eyes it defeats one of the major benefits of server actions: end-to-end type safety. Is there a way to bypass some of the abstractions, like the useActions hook?

@malaytiwari3207 9 күн бұрын

How do I pass the API key?

@rutvijdoshi9664 25 күн бұрын

Can we fine tune this model ?

@GAllium14 23 күн бұрын

Vercel ai sdk + RAG tutorial

@maharshiguin7813 28 күн бұрын

New version of ai package has too much abstractions

@wshewm 28 күн бұрын

Agreed. It destroys the type-safety, especially with RSC and the useActions hook.

@RoccoGhielmini 27 күн бұрын

I can't concentrate because they keep saying next

@nicoalbanese10 23 күн бұрын

Sorry about that, will work on it for the next one!

@andriisukhariev 29 күн бұрын

train without stops

@aneesmanzoor7340 28 күн бұрын

how to create these coding videos with animations like this kindly create a video on that as well @vercel

@JeomonGeorge 5 күн бұрын

can I use ai vercel in vue.js

@CarlottaRiganti 26 күн бұрын

But how do you npm?

@yarapolana 29 күн бұрын

I added $10 to test open ai and ai sdk and I had 100% of “unknown error” calls and $8 used?! What in the world it wasnt like this before. Loads of retries in the background (should be opted out from the start)