Intro to Generative UI with LangChain

Summary

このビデオでは、ジェネラティブUIとランチェーンの3部構成シリーズの第1回として、ジェネラティブUIの概念や使用例、そして実装に用いるアーキテクチャについて紹介します。ジェネラティブUIは、言語モデルのような推論エンジンを用いて動的にUIコンポーネントを選択し、ユーザーに表示します。チャットボットの例を通じて、自然言語からの入力に基づいて最適なツールを選択し、それに対応するUIコンポーネントを動的に提供する方法を解説します。また、JavaScriptとPythonでの実装方法も紹介しています。

Takeaways

• 🌟 ジェネラティブUIとは、言語モデルのような推論エンジンを使って、ユーザーに表示するUIコンポーネントを動的に選択し、レンダリングする技術です。
• 🔍 従来の方法では、ユーザーの好みや設定に基づいてUIコンポーネントが静的に選択されていましたが、ジェネラティブUIではユーザーのセッション中に活発に動いています。
• 📚 推論エンジンと組み合わせることで、音声、ビデオ、テキストなど、さまざまな入力を利用して、最適なUIコンポーネントを推測することができます。
• 📝 ユースケースとしては、チャットボットがユーザーの自然言語やチャット履歴をもとに、最適なツールを選択し、それに対応するUIコンポーネントを提供することが挙げられます。
• 🌐 ウェブサイトは、大規模言語モデルとジェネラティブUIを活用することで、よりパーソナライズされ、ユーザーの要求に即した動的なコンテンツを提供できます。
• 🛠️ チャットボットの例では、「天気はどうですか？」という質問に対して、言語モデルが「San Francisco California」という回答を推測し、天気ツールを選択してUIをレンダリングします。
• 📑 インボイスに関する質問に対しては、OCRを活用して画像からテキストを解析し、インボイスツールを選択してフォームを自動で入力することができます。
• 🏗️ ジェネラティブUIのアーキテクチャは、ユーザー入力を言語モデルに渡し、ツールを選択し、それに対応するUIコンポーネントを更新する一連のプロセスです。
• 📺 実際にデモを見ると、ジェネラティブUIはユーザーの入力に基づいて、即時に適切なツールを選択し、ローディングコンポーネントを表示してから、最終的なUIコンポーネントを提供します。
• 🛠️ JavaScriptの実装では、ユーザー入力とツールのリストを言語モデルに渡し、ツール関数を実行してUIコンポーネントを更新します。
• 🐍 Pythonの実装も同様で、サーバーとクライアントの間のやり取りで、ツールが選択されるとそのコンポーネントをストリーミングしてクライアントにレンダリングします。

Q & A

ジェネラティブUIとはどのようなものですか？

ジェネラティブUIは、言語モデルのような推論エンジンを利用して、ユーザーに動的にUIコンポーネントを選択し、レンダリングするものです。これは、ユーザーの好みや設定に基づく静的なUIコンポーネントの選択とは異なり、ユーザーがアクティブに行うセッションに基づいて動的に変化します。

ジェネラティブUIの使用例は何ですか？

ジェネラティブUIは、チャットボットやウェブサイトなど、ユーザーの入力に基づいて動的にUIコンポーネントを提供するアプリケーションに使用されます。例えば、ユーザーが「今日の天気はどうですか？」と尋ねると、言語モデルは天気ツールを選択し、その結果をUIに表示します。

ジェネラティブUIと従来のUIの違いは何ですか？

従来のUIは、ユーザーの好みや設定に基づいて静的なコンポーネントを提供する一方で、ジェネラティブUIはユーザーのアクティブなセッションに基づいて動的にコンポーネントを変更します。これにより、よりパーソナライズされたユーザーエクスペリエンスが可能になります。

言語モデルはどのようにしてUIコンポーネントを選択するのですか？

言語モデルは、ユーザーの入力やチャット履歴などの複数のモードの入力を分析し、最も適切なUIコンポーネントを選択します。例えば、ユーザーがインボイスに関する質問をした場合、言語モデルはインボイスツールを選択し、そのツールに関連するUIコンポーネントをレンダリングします。

ジェネラティブUIを構築するために使用されるアーキテクチャは何ですか？

ジェネラティブUIのアーキテクチャは、ユーザー入力を言語モデルに渡し、言語モデルがツールを選択し、そのツールがUIコンポーネントにマッピングされるというものです。選択されたツールに基づいてUIが動的に更新されます。

チャットボットの例では、どのようにして言語モデルがユーザーのリクエストを理解し、適切なツールを選択するのですか？

チャットボットでは、ユーザーが自然言語で質問を投稿すると、言語モデルはその質問とチャット履歴を分析し、最も適切なツールを選択します。例えば、「サンフランシスコの天気はどうですか？」と尋ねた場合、言語モデルは天気ツールを選択して、ユーザーに天気情報を提供します。

ジェネラティブUIにおける「ツール」とは何を指しますか？

ツールは、特定の機能やタスクを実行するためのコンポーネントです。言語モデルはユーザーの入力に基づいて適切なツールを選択し、そのツールが対応するUIコンポーネントをレンダリングします。

ジェネラティブUIを実装するために必要な技術要素は何ですか？

ジェネラティブUIの実装には、言語モデル、UIコンポーネント、およびそれらを繋ぐロジックが含まれます。また、JavaScriptやPythonなどのプログラミング言語を使用して、サーバーとクライアント間のインタラクションを管理します。

JavaScriptでジェネラティブUIを実装する際の主なステップは何ですか？

JavaScriptでジェネラティブUIを実装する際には、ユーザー入力を言語モデルに渡し、言語モデルがツールを選択し、そのツールがUIコンポーネントにマッピングされるプロセスが含まれます。その後、ツール関数が実行され、結果がUIに反映されます。

PythonでジェネラティブUIを実装する際のアーキテクチャはどのようなものですか？

PythonでジェネラティブUIを実装する際は、サーバーとクライアントのセクションがあります。サーバーでは言語モデルがツールを選択し、クライアントではそのツールに対応するUIコンポーネントがレンダリングされます。ツール関数が実行され、結果がリアルタイムでUIに反映されます。

ジェネラティブUIのデモで見られる「ローディングコンポーネント」の役割は何ですか？

ローディングコンポーネントは、言語モデルがツールを選択し、そのツールの関数を実行している間のユーザーへのフィードバックを提供します。これにより、ユーザーはシステムがリクエストを処理中であることを認識し、待ち時間を感じる時間を短縮できます。

Outlines

00:00

😀 ジェネラティブUIとランチェーンの紹介

このビデオは、ジェネラティブUIとランチェーンに関する3部作の第1回です。主なテーマはジェネラティブUIの概念、その使用例、そして実装に用いるアーキテクチャです。ジェネラティブUIとは、言語モデルのような推論エンジンを用いて動的にUIコンポーネントを選択し、ユーザーに描画するものです。従来の方法とは異なり、ユーザーの好みや設定に基づく静的なUIコンポーネントのマッピングではなく、ユーザーのアクティブなセッションに基づいて動的に変化します。また、言語モデルを活用して音声、ビデオ、テキストなどからの入力を元に最適なUIコンポーネントを選択し、ユーザーに即席で提供します。ビデオではチャットボットの例を通じて、自然言語からの入力に基づいてツールを選択し、それに対応するUIコンポーネントを提供するプロセスを紹介しています。

05:01

🛠️ JavaScriptとPythonでのジェネラティブUIの実装

第2回のビデオではJavaScript、第3回ではPythonを使用してジェネラティブUIを実装する方法が説明されています。ユーザーからの入力は言語モデルに渡され、利用可能なツールから最適なものを選択します。ツールが選択されると、そのツールに対応するUIコンポーネントがストリーミングされ、ユーザーにフィードバックが提供されます。その後、ツールの関数が実行され、結果に基づいてUIコンポーネントが更新されます。JavaScriptの実装ではReact Server ComponentsとAIS SDKを使用し、Pythonの実装ではサーバーとクライアントの両方のコードが示されています。両言語においても、ストリーミングedbackとUIの即時更新が行えます。また、ツールと言語モデルの連携がコンポーネントの選択と提供の基礎となっています。

Keywords

💡ジェネラティブUI

ジェネラティブUIとは、言語モデルのような推論エンジンを用いて、ユーザーに提供するUIコンポーネントを動的に選択し、レンダリングする技術です。このビデオでは、ジェネラティブUIがどのようにしてユーザーのセッションに基づいて動的なUIを選択し、提供するかを説明しています。例えば、チャットボットがユーザーからの自然言語の入力に基づいて、最も適切なツールを選択し、それに対応するUIコンポーネントを表示する様子が紹介されています。

💡推論エンジン

推論エンジンは、大量のデータをもとに、特定の問題に対する答えや予測を生成するアルゴリズムです。ビデオでは、大きな言語モデルを推論エンジンとして使用し、ユーザーからの音声、ビデオ、テキストなどの入力をもとに、最適なUIコンポーネントを選択するプロセスが説明されています。

💡ツール

ツールは、ビデオのコンテキストでは、ユーザーのニーズに応じて選択される機能的な単位です。言語モデルは、ユーザーとのチャット履歴や自然言語の入力をもとに、どのツールを選択するかを推論します。例えば、「天気はどうですか」という質問に応じて、天気ツールが選択され、天気情報のUIコンポーネントが表示される様子がビデオで紹介されています。

💡チャットボット

チャットボットは、ユーザーとのインタラクションを可能にする自動化されたシステムです。ビデオでは、チャットボットがジェネラティブUIの一環として機能し、自然言語の入力に基づいて適切なツールを選択してUIを提供するプロセスが説明されています。

💡言語モデル

言語モデルとは、自然言語のパターンを学習し、テキストの生成や理解を行うアルゴリズムです。ビデオでは、言語モデルがユーザーの入力をもとに、どのUIコンポーネントが最適かを推論する中心的な役割を果たしています。

💡UIコンポーネント

UIコンポーネントとは、ユーザーインターフェースを構成する最小限の部品です。ビデオでは、言語モデルが選択したツールに基づいて、動的にUIコンポーネントがレンダリングされるプロセスが説明されています。

💡動的選択

動的選択とは、ユーザーの行動やセッションに基づいて、リアルタイムで選択が変更される仕組みです。ビデオでは、ジェネラティブUIがユーザーの現在行っているアクティビティに応じて、最適なUIコンポーネントを動的に選択する様子が紹介されています。

💡GitHubツール

ビデオの中で言及されているGitHubツールは、ユーザーがGitHubのリポジトリに関する情報を取得するための機能です。言語モデルは、ユーザーの入力に基づいてGitHubツールを選択し、それに関連するUIコンポーネントを提供します。

💡インボイスツール

インボイスツールは、ビデオ内でOCR技術を活用して、画像からインボイスの情報を抽出し、それに対応するUIコンポーネントを生成する機能です。ユーザーがインボイスに関する質問をする際に、このツールが言語モデルによって選択され、適切なUIが提供されます。

💡リアクティブUI

リアクティブUIとは、ユーザーの操作や入力に応じて、即座に更新されるUIのことを指します。ビデオでは、ジェネラティブUIがリアクティブであることにより、ユーザーが待つ時間を短縮し、即座に応答を提供することができるプロセスが説明されています。

💡Reactコンポーネント

Reactコンポーネントは、Reactフレームワークで使用されるUI部品です。ビデオでは、ReactコンポーネントがジェネラティブUIの一部として使用され、言語モデルの推論に基づいて動的にレンダリングされる様子が紹介されています。

Highlights

Introduction to a three-part series on generative UI and Lan chain.

Definition of generative UI using a reasoning engine like a language model to dynamically select UI components.

Difference between static UI and dynamic generative UI based on user activity.

Combining reasoning engines with various input modes like audio, video, and text for UI component selection.

Use case of a chatbot with tools mapped to UI components based on natural language input.

Example of dynamic UI response to user query about weather without follow-up text.

Capability of language models to read images and reason about the best tool for the task.

Efficiency and effectiveness of language models in dynamic UI selection compared to traditional OCR setups.

High-level architecture overview of how user input is processed to select and render UI components.

Demo of a website implementing generative UI with interactive React components.

Explanation of the quick interaction in the demo, showcasing the loading component and tool selection.

Advantages of generative UI in reducing user wait time for the first interaction.

Implementation details for JavaScript using input, tools, language model, and conditional logic.

Process of streaming back initial UI components and updating them based on tool function execution.

Similar implementation approach in Python with server and client sections.

Customization possibilities for interactive UI components in both JavaScript and Python.

Use of React Server Components and AIS SDK in the JavaScript TypeScript implementation.

Upcoming videos on implementing the chatbot in JavaScript and Python.

Transcripts

what's up everyone my name is brace and

this is the first video in a three-part

series on generative UI and Lan chain in

this video we're going to be covering a

couple topics around what is generative

UI some use cases and the architectures

we're going to be using to build the

next two videos um for the typescript

and python version so what is generative

UI generative UI is when you use a

reasoning engine like a language model

to dynamically select UI components that

you then render for the user so this is

different from previous methods because

before you might have some sort of key

value mapping between user preferences

or settings and actions they take to UI

components but it was pretty static and

it wasn't very Dynamic based on what the

user is actively doing in their session

however when we in combine the power of

reasoning engines like large language

models we can take other modes of input

like audio you video uh text they've

submitted and from there have the

language model reason about the best UI

components or in our case tools which

then mapped UI components to select and

then render for the user on the Fly

based on the input they just gave

you let's take a look at some use cases

so today most sites are going to be

pretty static they might be slightly

Dynamic based on some predefined

mappings the developer has set however

they're not going to be too

personalizable and uh Dynamic on the fly

like we can do with large language

models and generative UI so if we take

the example we're going to build the

next two videos we have a chatbot our

chatbot has a list of tools each tool

maps to a component based on your

natural language you've submitted and

your chat history the language model can

reason about which tool and then under

the hood that maps to a UI component

will best fit your needs and your

requests so you could say something like

what's the weather today it'll then say

what city and state of you referencing

say San Francisco California you can

then take in your chat history which

which is the most recent message you

said where you only said San Francisco

California um but it also has your chat

history so it'll also have you saying

what's the weather and based on that it

can select the proper tool in this case

the weather tool and then render the

weather for you doesn't need any

follow-up text just gives you the

weather you could also say something

like what's the deal with my invoice it

can then select an invoice tool you

could upload a you know a screenshot or

a photo of a receipt since we're using

language models and modern language

models have the ability to read uh

images it can then take that image parse

the text on it and reason about which

tool will be best if it wants to take

the invoice tool and say populate an

invoice form it can use the image you

submitted with your receipt or you know

your email order confirmation and

populate the fields you would need for

that invoice UI component um and with

previous websites this wouldn't really

be possible you could have some super

complicated OCR setup but it wouldn't

work as well as today where language

models can just handle all of the

dynamic selection on their own um and

they do that efficiently and

effectively so if we look here this is

kind of a high level architecture look

at how this works so you take the user

input pass that to a language model

which has a set of tools each tool maps

to a component the language model then

selects a tool via a tool call that tool

obviously maps to a component like we

just saw and then you update your your

UI based on whatever tool and component

were selected

if we now go at a look at a quick demo

we can see this website this is what

we're going to be building um in the

next video and we can say something like

hey how's it

going and it gives us just text back no

UI components didn't use any tools it

just stream this text back how can I

assist you today we can say something

like what's the deal with

the what's the deal with the Lan chain

AI L graph repo

hit submit we see we get back that

loading component it was pretty quick so

we only saw the loading component for a

second and then we get back this this

interactable um component on our repo so

we see Lang L chain AI Lang graph that's

what I supplied to it and then it has

the description the language

stars and this button here these

components are just normal react

components so as you saw there they're

interactable I can click on it visit a

website they can have they can be

stateful they can hit apis um it's

really any react component you may have

used in the past

um so we see that it hit the it it it

took in our input it then selected the

GitHub tool as soon as it selected the

GitHub tool we saw that loading

components um this is one reason why gen

UI is much better than other

implementations of this because you can

really get the user to the first

interaction much quicker it selects the

tool before it's even hit the g of API

or performed any sort of request to get

the data that you want it knows the tool

the tool that it's selected and from

there we can populate the UI with some

sort of loading state component so the

user is not waiting you know 1 2 3 4

seconds for the first interaction based

on their

request now let's take a quick look at

how we're going to implement this for

JavaScript as you can see we take the

input chat history

images have list of tools let's say our

weather tool or GitHub tool and our

invoice tool those tools get bound to an

LM the LM is invoked with the user input

and the tools is available to it it is

then sent to to a conditional Edge if

the LM didn't use a tool and only send

some text back we will then send that

straight back to the UI like we saw with

the first chat interaction I had with it

with our chatbot if it does use a tool

then we can go to the invoke invoke tool

section the first thing it's going to do

is stream back an initial UI component

we saw that there where the GI up tool

had this loading state so it selects the

tool hasn't performed any sort of

function inside the tool and it's

instantly given us back some UI to show

to the user to let it know that it's

working on its request then we we

execute the tool function this is any

sort of arbitrary

JavaScript python function obviously

JavaScript we're using JavaScript right

now um but it hits in our case the GI of

API it could do really anything and then

we update UI component stream which

sends back a new UI component to our UI

and replaces the old loading State you

can update it as many times as you would

like you can replace it with totally

different components um you can picture

this as like a div you have on your page

and you're just swapping it out with

whatever jsx uh you send back to it

every time you call update finally when

we're done with it we call done and then

it exits the uh Lan graph Loop and goes

back to the user and waits for some more

inputs if we look at the python one it's

pretty similar we have our server

section here and our client section so

it's starts out the same we have our

user input our tools or language model

and our conditional Edge if it's just

text then we leave the server and send

that text right back to the client where

it's rendered on the UI if it selects a

tool then we're going to stream back the

name of the tool to the client this

dotted Arrow indicates a streaming um

interaction so we stream back the name

of the tool then on the client we map

the tool to the component and render it

so same as JavaScript as soon as it

selects the tool streams it back to the

client and we render some sort of

loading or intermediate state state

component execute our tool function get

the results of that function stream

those results back and then re-update

our UI with whatever the new popul ated

or updated uh component is and that's

pretty much all it is you can customize

it to be a little more interactable but

as we saw from these two diagrams it's

possible in both JavaScript and Python

and it'll work pretty much the exact

same with your code on the server in

JavaScript typescript it's going to be

react server components under the hood

we're using the AIS SDK for this they do

a lot of the heavy lifting under um the

react server components and sending

components from the server to the client

uh but yeah as we saw it works pretty

much the same in JavaScript and python

all the functionality is there you can

stream open back you can update the user

instantly with some sort of loading

component so they're not waiting and

then perform your function finish it up

send back the final component and go on

to the next

interaction that should be it for this

video I'm going to link some resources

in the description if you're not

familiar with a couple Concepts like

geni we already have docs on in our

JavaScript library you should be very

familiar with tools I'm going to link a

video to Tool fing highly recommend

watch that if you're not already

familiar with how tools and language

model works because that's kind of the

basis for how all of these component

selections um are

picked and then I'm going to link the

next two videos if they're not out yet

they obviously won't be linked but once

those are released then we're going to

update that description so you can go to

the next video which is going to be

tomorrow and it's going to be the

jscript video on how we're implementing

this chapon JavaScript and the next day

is going to be the python video on how

we're implementing this chatbot in

Python so I will see you all in the next

video