DEV Community: Naoto Shibata

Tutorial: Deploying a User-Authenticated Streamlit App in Just 5 Minutes.

Naoto Shibata — Tue, 25 Mar 2025 08:51:20 +0000

This tutorial explains how to deploy a Streamlit data app to the cloud with user authentication using Morph. With this method, there’s no need for Docker builds typically required when deploying Streamlit apps to Cloud Run. This makes sharing apps within your team simpler and quicker.

Morph is a cloud service designed to automatically deploy internal data and AI apps from your GitHub repository to the cloud, providing built-in user authentication for easy sharing.

Now that Morph supports Streamlit deployment, this tutorial will guide you through deploying a Streamlit application. Make sure you’ve logged in to morph-data.io beforehand.

TL;DR

The sample code from this tutorial is available in the repository below:

GitHub - shibatanaoto/streamlit-morph-sample

Fork the above repository and follow the video tutorial linked below to deploy your Streamlit app to the cloud and share it with invited members:

Preparation

Install the necessary packages before starting:

pip install streamlit pandas

Building a Simple Streamlit App

As this tutorial focuses mainly on deployment, we’ll use a simple Streamlit app. First, create a file named main.py. (Do not change this filename.)

import streamlit as st
import pandas as pd
import numpy as np

st.markdown("# Hello world!!!")
df: pd.DataFrame = pd.DataFrame(
    np.random.randn(30, 3),
    columns=["x", "y", "z"]
)
st.line_chart(df)

Run the app locally to check it.

streamlit run main.py

Configuring Morph Deployment

Next, create a file named morph_project.yml in the same directory as main.py. Enter the following configuration, adjusting the runtime version according to your Python environment (supported versions are Python 3.9 to 3.12):

version: '1'

build:
  framework: streamlit
  runtime: python3.12

deployment:
  provider: gcp

Detailed documentation for morph_project.yml, including how to adjust CPU and memory based on your needs, can be found here:

morph_project.yml - Docs

After configuration, generate a requirements.txt file with your dependencies and push the changes to GitHub:

pip freeze > requirements.txt

Deploying to Morph

Log in to https://morph-data.io, click the “+Create” button on the homepage, connect your GitHub repository, and select the repository and branch. Deployment starts automatically.

On the homepage, you’ll see a list of your created apps. Select the app with the same name as your repository. Under the “Deployments” tab, you can view the build status. Once it shows “Ready,” the deployment is complete.

Click the “Open” button to view the deployed app. There might be a slight cold start delay initially, but you should see your application successfully loaded.

The deployed app has built-in user authentication, meaning only members invited via the “Member Access” dashboard can access it.

To invite members, use the following screen. You can invite 5 members in Free plan.

Morph simplifies deploying Streamlit apps to the cloud and securely sharing them with your team.

Morph is also expanding support for full-stack frameworks like Next.js and HonoX. If you have requests for additional frameworks, feel free to reach out 🚀

Tutorial: Building SQL Agent with Langchain, OpenAI and DuckDB.

Naoto Shibata — Mon, 10 Mar 2025 15:37:44 +0000

We will explain how to implement an SQL Agent using LangChain, OpenAI API, and DuckDB , and how to turn it into an application with Morph . This app will generate SQL queries using an LLM, execute them in DuckDB, and use the results to answer user questions.

LangChain is an excellent framework equipped with components and third-party integrations for developing applications that leverage LLMs.

In this article, we will build an AI workflow using LangChain and construct an AI agent workflow by issuing SQL queries on CSV data with DuckDB.

This time, we will implement an agent that performs SQL-based Q&A on demo data containing web advertisement traffic and order performance from the following CSV file.

Traffic_Orders_Demo_Data.csv

The final output of this tutorial is available in the SQL Agent App in the following repository.

https://github.com/morph-data/morph-sample-apps

Setup

Use the morph new to create a new project. It is recommended to select Poetry as the package manager.

morph new sql-agent-app

In pyproject.toml, set the dependencies as follows. Since DuckDB execution is handled by execute_sql included in morph-data, there is no need to install it separately.

[tool.poetry.dependencies]
python = "<3.13,>=3.9"
morph-data = "0.2.0"
langchain = "0.3.16"
langchain-core = "0.3.32"
langchain-openai = "0.3.2"

In this tutorial, set API key in .env for OpenAI API usage.

OPENAI_API_KEY=[Put your API KEY]

Please save the CSV data for demo data in data/Traffic_Orders_Demo_Data.csv.

Buidling frontend

With Morph, you can build frontend using mdx files in src/pages .

This time, we will use the component to create a chat interface built using LangChain. Since we want to view the data while asking questions, we display the data in a table format using side by side.

We also adjust the layout using and Tailwind CSS utility classes.

# Q&A Agent over SQL

You can ask questions to the SQL Agent about the data and get the answer in SQL.
Only admin user can ask questions to the SQL Agent.
p
<Grid cols={2} className="py-4">
    <div>
        <DataTable loadData="example_data" height={400} />
    </div>
    <div className="p-4 bg-gray-50 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
        <Chat postData="sql_agent" />
    </div>
</Grid>

You can check the pages by accessing to http://localhost:8080 after running morph serve in terminal.

Building Q&A Agent with Text-to-SQL Using LangChain

We will use LangChain’s Runnable API and StructuredOutputParser to generate the necessary SQL queries to answer user questions. By executing these SQL queries with DuckDB and using the results, we will build an AI agent that answers user questions by leveraging the Runnable API again.

In MDX, the component automatically sends prompt and thread_id:

prompt : The message entered by the user.
thread_id : A unique identifier for the thread displayed in the chat UI (not used in this implementation).

By receiving the prompt and using it in the messages parameter for LangChain’s invoke function, we enable the interaction between the AI agent and the front-end.

Generating SQL Queries and Retrieving Data Based on User Questions in LangChain

First, we create a function decorated with @morph.func so that it can be handled within the Morph framework. We then initialize an instance of LangChain’s OpenAI model.

import morph
from morph import MorphGlobalContext
from morph_lib.types import MorphChatStreamChunk
from langchain_openai import ChatOpenAI

@morph.func
def sql_agent(
    context: MorphGlobalContext,
) -> Generator[MorphChatStreamChunk, None, None]:
    chat = ChatOpenAI(
        model="gpt-4o",
        temperature=1,
        streaming=False
    )

For the CSV file used in this implementation, we specify the file path and data description in the system prompt. By providing format_instructions, we enable StructuredOutputParser to define the SQL output format.

SYSTEM_TEMPLATE = """Please execute SQL queries on a table named `./data/Traffic_Orders_Demo_Data.csv` in DuckDB with the following schema:
date: text - date
source: text - traffic source (Coupon, Google Organic など)
traffic: int - traffic count
orders: int - order count

This table contains traffic and order data for the marketing campaigns.

As a source, you have the following data:
- Coupon
- Google Organic
- Google Paid
- TikTok Ads
- Meta Ads
- Referral

Generate a SQL query to answer the user's question.
{format_instructions}
"""

We use StructuredOutputParser to make the generated text parsable as structured data (JSON).

Then, leveraging LangChain’s Runnable API , we build a data flow for generating SQL queries.

# Setup the SQL query output parser
sql_schema = ResponseSchema(name="sql", description="The SQL query to execute")
output_parser = StructuredOutputParser.from_response_schemas([sql_schema])
format_instructions = output_parser.get_format_instructions()

prompt = ChatPromptTemplate.from_messages([
    ("system", SYSTEM_TEMPLATE),
    ("human", "{question}")
])
# Create the chain for SQL generation
chain = (
    {"question": RunnablePassthrough(), "format_instructions": lambda _: format_instructions}
    | prompt
    | chat
    | StrOutputParser()
    | output_parser
)

Execute the created data flow to generate SQL. The generated SQL is streamed back to the chat using the stream_chat function.

from morph_lib.stream import stream_chat

# Generate SQL query
result = chain.invoke(context.vars["prompt"])
sql = result["sql"]
        # display generated sql
yield stream_chat(f"""
### SQL
{sql}
""")

Next, execute the generated SQL. By specifying “DUCKDB” as the second argument of execute_sql, we can use DuckDB as the engine.

The execution result is returned as a DataFrame, which is then converted into a Markdown string to be passed to the LLM.

from morph_lib.database import execute_sql

# Execute SQL and get results
data = execute_sql(sql, "DUCKDB")
data_md = data.to_markdown(index=False)

Generating Responses Using SQL Results

Using the retrieved results, we leverage LangChain’s Runnable API again to create an agent that constructs prompts, processes questions, and streams responses to answer user queries.

# Create analysis prompt with results
analysis_prompt = ChatPromptTemplate.from_messages([
    ("system", f"""Please answer in markdown format.
You can use the following data:
{data_md}
The data is from the following SQL query:
{sql}
"""),
    ("human", "{question}")
])

# Create analysis chain
analysis_chain = (
    {"question": RunnablePassthrough()}
    | analysis_prompt
    | chat
)
# stream analysis result
for chunk in analysis_chain.stream(context.vars["prompt"]):
    if chunk.content:
        yield stream_chat(chunk.content)

All Python code

from typing import Generator

from langchain_openai import ChatOpenAI
from langchain.prompts import ChatPromptTemplate
from langchain.schema.output_parser import StrOutputParser
from langchain.schema.runnable import RunnablePassthrough
from langchain.output_parsers import ResponseSchema, StructuredOutputParser
from morph_lib.database import execute_sql
from morph_lib.stream import stream_chat
from morph_lib.types import MorphChatStreamChunk

import morph
from morph import MorphGlobalContext

SYSTEM_TEMPLATE = """Please execute SQL queries on a table named `./data/Traffic_Orders_Demo_Data.csv` in DuckDB with the following schema:
date: text - date
source: text - traffic source (Coupon, Google Organic など)
traffic: int - traffic count
orders: int - order count

This table contains traffic and order data for the marketing campaigns.

As a source, you have the following data:
- Coupon
- Google Organic
- Google Paid
- TikTok Ads
- Meta Ads
- Referral

Generate a SQL query to answer the user's question.
{format_instructions}
"""

@morph.func
def sql_agent(
    context: MorphGlobalContext,
) -> Generator[MorphChatStreamChunk, None, None]:
    chat = ChatOpenAI(
        model="gpt-4o",
        temperature=0,
        streaming=False,
    )

    # Setup the SQL query output parser
    sql_schema = ResponseSchema(name="sql", description="The SQL query to execute")
    output_parser = StructuredOutputParser.from_response_schemas([sql_schema])
    format_instructions = output_parser.get_format_instructions()

    prompt = ChatPromptTemplate.from_messages([
        ("system", SYSTEM_TEMPLATE),
        ("human", "{question}")
    ])

    # Create the chain for SQL generation
    chain = (
        {"question": RunnablePassthrough(), "format_instructions": lambda _: format_instructions}
        | prompt
        | chat
        | StrOutputParser()
        | output_parser
    )

    # Generate SQL query
    result = chain.invoke(context.vars["prompt"])
    sql = result["sql"]
    # display generated sql
    yield stream_chat(f"""
### SQL
{sql}
""")

    # Execute SQL and get results
    data = execute_sql(sql, "DUCKDB")
    data_md = data.to_markdown(index=False)
    # Create analysis prompt with results
    analysis_prompt = ChatPromptTemplate.from_messages([
        ("system", f"""Please answer in markdown format.
You can use the following data:
{data_md}

The data is from the following SQL query:
{sql}
"""),
        ("human", "{question}")
    ])

    # Create analysis chain
    analysis_chain = (
        {"question": RunnablePassthrough()}
        | analysis_prompt
        | chat
    )

    # stream analysis result
    for chunk in analysis_chain.stream(context.vars["prompt"]):
        if chunk.content:
            yield stream_chat(chunk.content)

Deploying and Sharing the App

Morph’s dashboard supports automated deployment using GitHub integration.

By pushing your code to GitHub and selecting the repository from the dashboard, you can deploy the app as an internal application with authentication enabled automatically.

Reference:

https://docs.morph-data.io/docs/en/quickstart/deploy

Once the deployment is complete, access the app from the “Open” button in the dashboard. You can easily share the SQL Agent app with your team!

Tutorial: Building a custom AI chat with user authentication using LangChain, OpenAI API and Morph.

Naoto Shibata — Thu, 13 Feb 2025 01:23:35 +0000

In this guide, we explain how to create an authenticated AI application using LangChain and Morph. With Morph’s RBAC (Role-based Access Control) system, you can securely deploy an AI application built with LangChain within your organization.

Morph is a framework that allows you to build and deploy AI apps using Python and Markdown. In the tutorial, we will use the Morph cloud dashboard (available for free), so please log in to morph-data.io in advance.

LangChain is an excellent framework for developing applications that utilize large language models (LLMs). It comes equipped with a variety of components and third-party integrations.

In this article, we detail the steps to build an AI workflow with LangChain and deploy it as an authenticated AI application using Morph, ready for your team to use.

The outcome of this tutorial is available as the RBAC LangChain App in the following repository:

https://github.com/morph-data/morph-sample-apps

Environment Setup

Start a new project using the morph new command. It is recommended to choose poetry as the package manager.

morph new rbac-langchain-app

In your pyproject.toml, set the dependencies as shown below:

[tool.poetry.dependencies]
python = "<3.13,>=3.9"
morph-data = "0.1.3"
langchain = "0.3.16"
langchain-core = "0.3.32"
langchain-openai = "0.3.2"

Since this tutorial uses the OpenAI API, be sure to set your API KEY in the .env file:

OPENAI_API_KEY=[Put your API KEY]

Building the Frontend

With Morph, you can build your frontend by placing MDX files under the src/pages directory.

In this example, we use the component to create an interface where users can chat with the built AI. We also adjust the layout using the component and Tailwind CSS utility classes:

# Role-based access control with LangChain

This example shows how to use LangChain with role-based access control (RBAC).

<Grid cols={1} className="py-4">
    <div className="p-4 bg-gray-50 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
        <LLM postData="rbac_langchain" />
    </div>
</Grid>

Now, run morph serve in your terminal and open http://localhost:8080 in your browser to see the interface.

Building the AI App with LangChain and Enforcing RBAC

We will build an AI workflow with LangChain that is accessible only to users with the ‘admin’ role.

From the MDX component, two parameters are automatically sent:

prompt: The message entered by the user.
thread_id: A unique ID that identifies the thread displayed in the Chat UI.

We use a global variable called history to store information about the most recent thread so that the system can respond to follow-up questions in context.

history = {}

@morph.func
def rbac_langchain(context: MorphGlobalContext):
    model = ChatOpenAI(model="gpt-4o-mini")
    # Initialize history when a new thread starts.
    if history.get("thread_id") != context.vars["thread_id"]:
        history["thread_id"] = context.vars["thread_id"]
        history["messages"] = [
            SystemMessage(content="Please translate the following text from English to French."),
        ]
    # Append the user's prompt.
    history["messages"].append(HumanMessage(content=context.vars["prompt"]))
    result = ""
    for token in model.stream(history["messages"]):
        result += token.content
        yield create_chunk(token.content)
    history["messages"].append(AIMessage(content=result))

Next, we return an error message via chat if the user does not have the “admin” role:

# context.user_info comes from the user's authentication info.
if "admin" not in context.user_info["roles"]:
    yield stream_chat("You are not authorized to use this feature.")
    return

Complete Python Code

import morph
from morph import MorphGlobalContext
from morph_lib.stream import create_chunk
from langchain_openai import ChatOpenAI
from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
from morph_lib.stream import stream_chat

history = {}

@morph.func
def rbac_langchain(context: MorphGlobalContext):
    # context.user_info comes from the user's authentication info.
    if "admin" not in context.user_info["roles"]:
        yield stream_chat("You are not authorized to use this feature. \\n\\n Please login as admin.")
        return
    model = ChatOpenAI(model="gpt-4o-mini")
    if history.get("thread_id") != context.vars["thread_id"]:
        history["thread_id"] = context.vars["thread_id"]
        history["messages"] = [
            SystemMessage(content="Please translate the following text from English to French."),
        ]
    history["messages"].append(HumanMessage(content=context.vars["prompt"]))
    result = ""
    for token in model.stream(history["messages"]):
        result += token.content
        yield create_chunk(token.content)
    history["messages"].append(AIMessage(content=result))

Deploying and Sharing Your App

Create a new project on the dashboard and issue an API Key.
In your morph_project.yml, set the project_id you obtained from the project details page:

default_connection: DUCKDB
package_manager: pip
profile: default
project_id: [Insert your project ID]
result_cache_ttl: 0
source_paths:
- src

Next, bind your API Key to the CLI:

morph config

With everything set up, deploy your app from the dashboard!

morph deploy

For more details, see: https://docs.morph-data.io/docs/ja/deploy/deploy

After the deployment is complete, click “Open” from the dashboard to access your app. You can verify that access control is working as expected based on the Project Role set under Member Access in the dashboard.