<Chat />

<Chat /> コンポーネントは、Pythonで構築したLLMチャットに、モダンなUIを与えるためのコンポーネントです。使い方は非常にシンプルです。

# 🦜🔗 Langchain Chat

<Chat postData="langchain_chat" height={300} />

コンポーネントのプロパティである postData はPython関数の名前を指定してください。

たったこれだけで、チャット用のUIが実現します！

続いて、バックエンドを構築します。バックエンドも非常にシンプルです。

import morph
from morph import MorphGlobalContext
from morph_lib.stream import stream_chat
from langchain_openai import ChatOpenAI
from langchain_core.messages import HumanMessage

@morph.func
def langchain_chat(context: MorphGlobalContext):
  llm = ChatOpenAI(model="gpt-4o")
  messages = [HumanMessage(context.vars["prompt"])]
  for token in llm.stream(messages):
    yield stream_chat(token.content)

このように、LangChainやOpenAI SDKを用いてロジックを構築し、それに数行加えるだけで、AIアプリのバックエンドが完成します。

ここからさらに、システムプロンプトを追加したり、データの参照を追加したりと、自由にAIワークフローを構築してみてください！Morphフレームワークは、Python関数を直ちにモダンなUX付きのアプリへと変換します！

defineState()と入力コンポーネント

リッチなアプリを構築するために、ユーザーが行なったアクションの結果や、入力した値を、フロントエンドの状態として保持したいことがあります。たとえば、Selectタグで何を選択したか、Inputタグに何を入力したか、などです。

そのような場合には、 defineState 関数を用いて変数を宣言し、それを入力コンポーネントやデータコンポーネントにバインドしてください

import { defineState } from '@morph-data/components';

# An App With Front-end States

export const { userName } = defineState({ userName: '' });

<Input state={userName} />

## Hello, I'm {userName.value}!

その他のUIコンポーネント

以下のようなコンポーネントを用意しています！モダンなUI/UXを手軽に実現します。

ドキュメントはこちら: https://docs.morph-data.io/data-application/ja/layout-component-accordion

Accordion

Callout

Card

Grid

本日の発表をもって、ローンチウィーク #3 は終了となります！今後も、新たな発表をお届けしていくので、引き続きご注目ください！