layout='chat'

The <LLM /> component is a component for streaming processes using Open AI and Anthropic APIs. 
<LLM
  postData="ai-chat"
  layout="chat"
  height={300}
/>
<LLM /> components can be used for the following functions.
  • AI chat … Chat between user and AI can be realised. It can start and end threads, display AI replies, etc.
  • Content generation … AI generates content in response to text entered by the user. For example, this can be used when the AI generates a document in response to text entered by the user.
  • Side-by-side … Displays user and AI chat and content generation side by side.
Translated with DeepL.com (free version)

​
Data specification for <LLM />.

The <LLM /> component sends the following data by default to the Python function specified in postData.
  • prompt: text entered by the user.
  • thread_id: thread ID of the conversation with the AI, updated to a new value, e.g. when the user presses the ‘Start new thread’ button.
  • is_new_conversation: whether a new conversation has started. Updated to true, e.g. when the user presses the ‘Start new thread’ button.
Use the vars property if you want to send additional data to these or override the default data. Translated with DeepL.com (free version)

​
Props

​
postData
string
required
Python function or SQL file name
​
varialbes
{ [key: string]: any }
Variables to pass to the Python function or SQL file. Declare using the defineState() function.
​
height
number
Height of the component. Unit is px.
​
layout
'chat' | 'single' | 'side-by-side'
UI layout. ‘chat’ for the chat UI, ‘single’ for the content generation UI and ‘side-by-side’ for the side-by-side UI.
​
inputType
'default' | 'button'
Input form type. ‘default’ for the default input form, ‘button’ for only the button.

​
Example

​
Side-by-side layout

By using a side-by-side layout, the user and AI chat and the artifact can be displayed at the same time. Use the create_chunk function. The first argument is the content of the chat and the second argument is the content of the artifact. The artifact can be HTML or markdown. 
# src/python/ai-chat-with-html.py
from langchain_core.messages import HumanMessage
from langchain_openai import ChatOpenAI
from morph_lib.stream import create_chunk

import morph
from morph import MorphGlobalContext

@morph.func
def langchain_chat(context: MorphGlobalContext):
    llm = ChatOpenAI(model="gpt-4o")
    messages = [HumanMessage(context.vars["prompt"])]
    for token in llm.stream(messages):
        yield create_chunk(f"{token.content}")
    yield create_chunk(f"", f"<html><body><h1>Hey! It's Canvas</h1></body></html>")