<Chat />

The <Chat /> component provides a modern UI for an LLM chat built in Python. It is extremely simple to use:

markdown
Copy
# 🦜🔗 Langchain Chat

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

For the component property postData, please specify the name of the Python function.

That's literally all it takes to create a chat UI in Morph!

Next, we build the backend. This is equally simple:

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)

By constructing the logic with LangChain and the OpenAI SDK and adding just a few lines, you can complete the entire backend for your AI application.

From here, feel free to further build your AI workflow by adding system prompts, referencing data, and more! The Morph Framework instantly transforms Python functions into apps with a modern UX!

defineState() and Input Components

When building a rich application, you may want to maintain the results of user actions or input values as frontend state. For example, keeping track of what was selected in a <Select> tag or what was entered in an <Input> tag.

In such cases, declare variables using the defineState function and bind them to input or data components:

python
Copy
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}!

Other UI Components

We also offer additional components like these, allowing you to easily achieve a modern UI/UX.

Docs: https://docs.morph-data.io/data-application/en/layout-component-accordion

Accordion

Callout

Card

Panel

And with that, we conclude Launch Week #3! We hope you’re as excited about Morph’s new features as we are to share them with you. Got any feedback on them? Any ideas for things we should add in the future? Don’t hesitate to get in touch!