DEV Community: Squadbase

Stop Failing at Environment Setup. A Complete Guide to GitHub Codespaces for Non-Engineers

Genki Daido — Thu, 17 Jul 2025 09:55:05 +0000

"I wanted to start learning Python, but gave up because I got stuck on environment setup."

Have you ever had this experience? I work as BizDev and am certainly not an expert in Python. However, recently I've been able to develop data visualization dashboards and chatbots using Streamlit with the help of GitHub Codespaces and AI.

Why Does Programming Learning Fail at "Environment Setup"? - The 3 Walls That Programming Beginners Face

For people who are just starting to learn programming, environment setup is the most difficult step. It should be the first step, but you immediately hit a high wall. In this article, I'll introduce GitHub Codespaces to skip this step, but first, let me confirm what makes it so difficult.

1. Installing Languages and Runtime Environments (Terminal Operations)

To run the code you write, you need to install the runtime environment for that language on your machine. Programming languages and their runtime environments are not installed from app stores, but basically need to be installed from the terminal (the "black screen" that engineers use). Even when GUI-based installers are provided, you eventually need terminal operations when programming language version management becomes necessary.

At this point, the need to select procedures that match your OS and CPU architecture combination is also a difficult point. The procedures vary greatly depending on whether you have an Apple Silicon Mac, Intel (x86) Windows, or WSL.

2. Language Version Management and Virtual Environment Management

The next obstacle is situations where you need to specify runtime environment versions like "Python 3.11 or higher". For example, you want to use an open-source AI tool, but the Python installed locally is 3.9, and the documentation says Python 3.11 or higher is required... This tends to leave you wondering what to do. Also, in the case of Python, you might need virtual environment management.

3. It Doesn't Work Even Though I Followed the Instructions... (Troubleshooting)

The third wall is that "programs don't work for some reason" even when you follow the guide. Even though you should have done it according to the instructions, error messages appear.

Have you experienced spending enormous amounts of time just on environment setup and never quite getting to the actual programming learning? This is by no means uncommon.

Solution: What is GitHub Codespaces? - A Revolutionary Development Environment That Installs Nothing on Your PC

What solves this problem is GitHub Codespaces.

In one word: A cloud development environment where you can start programming immediately with just a browser. With just a few simple setup clicks, you get a development environment that's ready to use anytime.

Technical Mechanism (For Non-Engineers)

GitHub Codespaces is a system for borrowing computers in the cloud. You don't install anything on your PC - the programming environment runs on servers managed by GitHub.

Behind this is container technology (Docker is a representative example). Containers are technology that packages applications and their runtime environments, guaranteeing that they "work the same way on any computer". Since GitHub manages all the difficult settings, users can focus on development.

Peace of Mind: Codespaces Pricing Structure - Here's How Much You Can Use for Free

Codespaces has a free tier, so you can start without spending money first.

Free Tier Details

GitHub free accounts include 120 core hours of computing usage and 15GB/month of storage each month.

"Core hours" means "number of CPU cores × usage time". For example:

Using a 2-core machine for 1 hour → consumes 2 core hours (can use up to 60 hours per month)
Using a 4-core machine for 1 hour → consumes 4 core hours (can use up to 30 hours per month)

For beginner learning purposes, the default 2-core machine is sufficient. This means you can think of it as essentially 60 hours per month for free. With this much, you'll rarely use it up with just a few hours of learning per week.

Practice (Hands-On): Start in 5 Minutes! Let's Run Your First Python Environment

Let's actually experience GitHub Codespaces.

Step 1: Create GitHub Account

Skip this if you already have an account. Go to GitHub and create a free account.

Step 2: Launch Your First Codespace

Log in to GitHub
Select "New repository" from the "+" in the top right
Enter a repository name (e.g., my-first-codespace)
Check "Add a README file"
Click "Create repository"
On the created repository page, click the green "Code" button
Select the "Codespaces" tab
Click "Create codespace on main"

Success if the following screen opens! (Initial startup of Codespaces may take some time. Please wait until the screen switches.)

Step 3: Practical Mini-Project Experience

"Hello World" alone isn't interesting. Let's actually visualize some data.

First, let's create a data file.

Once Codespaces starts, create a new file data.csv and enter the following content:

Month,Sales
Jan,100
Feb,150
Mar,200
Apr,175
May,225

Next, let's create a Python script.

Create a new file main.py and enter the following code:

import pandas as pd
import matplotlib.pyplot as plt

df = pd.read_csv('data.csv')

plt.figure(figsize=(8, 6))
plt.plot(df['Month'], df['Sales'], marker='o')
plt.title('Monthly Sales Chart')
plt.xlabel('Month')
plt.ylabel('Sales (in 10k JPY)')
plt.grid(True)

plt.savefig('sales_chart.png')
print('Chart saved as sales_chart.png!')

Next, let's install libraries and run it.

The libraries needed for this project are pandas and matplotlib. Let's install them using uv, a fast package manager.

To use uv in Codespaces, you first need to install uv itself and create a Python virtual environment.

Run the following commands in the terminal (the black section at the bottom of the screen):

pip install uv
uv init
uv venv
uv add pandas matplotlib

A virtual environment is a mechanism for creating independent "workspaces" for each Python project. This prevents libraries used in Project A from conflicting with libraries used in Project B. The uv venv command easily creates this virtual environment.

If the above commands succeed, the necessary library installation is complete!

Execution screen in progress:

Execution completed screen:

Finally, let's execute the Python script:

python main.py

Execution completes in a few seconds, and a file called sales_chart.png is generated. Click this file to display the graph.

This gives you the real feeling that "development truly completes in the cloud without contaminating your own PC!"

Cost Management Best Practices

It's important to make stopping and deleting Codespaces a habit.

Always stop or delete Codespaces when you finish work. If left running, billing continues. Open Settings > Codespaces from the GitHub icon in the top right and set the Default idle timeout to 30 minutes (default).

Common pitfalls for beginners:

Leaving multiple Codespaces running simultaneously
Continuing to store large files in Codespaces
Continuing to use without checking remaining free tier quota

Better Environment with `.devcontainer` Configuration

In the previous hands-on, we executed several commands in the terminal to set up the environment. While this allowed us to "get it working for now", Codespaces has a more convenient way to use it. That's using a special configuration file called .devcontainer.

By setting up this .devcontainer, every time you start a Codespace, the necessary tools and libraries are automatically installed, and the Python virtual environment is prepared. It's like having your own perfect development machine instantly launched in the cloud.

What is `.devcontainer`?

.devcontainer is a special folder placed in the project's root directory. Inside this, you create a configuration file named devcontainer.json.

The devcontainer.json file gives instructions to Codespaces like:

Which OS image to use (e.g., Ubuntu-based image suitable for Python development)
Which tools to install (e.g., uv command)
What commands to execute when Codespaces starts (e.g., automatic installation of necessary libraries)

Having this file makes the development environment managed as "part of the code".

`.devcontainer/devcontainer.json` Configuration Example

Let's actually set it up so that pandas and matplotlib are automatically installed using uv.

Check the pyproject.toml and uv.lock files.

uv uses mainly the following two files to manage Python project dependencies:

pyproject.toml: A file where the direct libraries needed for the project are described. This is used for human reading and writing, and is automatically updated with the uv add command.
uv.lock: A file that records not only the libraries described in pyproject.toml but also all the sub-libraries they depend on, with exact versions and hash values of each library strictly recorded. This is a file that uv automatically generates and updates, and is essential for ensuring environment reproducibility.

By executing uv init and uv add pandas matplotlib earlier, these files have already been automatically created and updated. Please confirm that pyproject.toml and uv.lock exist in the project's root directory.

Create a .devcontainer folder in the project's root directory.
Inside that .devcontainer folder, create a file named devcontainer.json and copy and paste the following content:

{
  "name": "Python Development",
  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance"
      ],
      "settings": {
        "python.defaultInterpreterPath": "./.venv/bin/python",
        "python.terminal.activateEnvironment": true,
        "python.terminal.activateEnvInCurrentTerminal": true
      }
    }
  },
  "onCreateCommand": "pip install uv",
  "postCreateCommand": "uv sync && echo 'source .venv/bin/activate' >> ~/.bashrc",
  "remoteUser": "vscode"
}

Push (save) the changes to the GitHub repository.

Now the devcontainer.json configuration file is created. By saving these files to the GitHub repository, the next time you start a Codespace, the postCreateCommand in devcontainer.json will read these files and automatically build the exact same development environment.

Let's execute the following commands in order in the Codespaces terminal to push the changes to GitHub:

git add .
git commit -m "Add devcontainer setup"
git push

Now your Codespaces environment configuration is saved to GitHub, and you can reproduce the same environment from anywhere!

Key Points of This Configuration

"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye": Specifies the base image for Codespaces. Here, we use Microsoft's official Dev Containers image (devcontainers/python) bullseye version with Python 3.11 pre-installed. This saves the trouble of Python environment setup.
"customizations": This section mainly describes VS Code customization settings.
- "vscode": VS Code specific settings.
  - "extensions": Specifies VS Code extensions that are automatically installed when Codespaces is created.
    - "ms-python.python": The official extension essential for Python development. Provides basic functions like code completion, debugging, and test execution.
    - "ms-python.vscode-pylance": Python's fast language server. Provides smarter code completion and type checking, improving development efficiency.
  - "settings": Overrides various VS Code settings.
    - "python.defaultInterpreterPath": "./.venv/bin/python": Specifies the path to the Python interpreter that VS Code uses by default. This usually points to the Python inside the virtual environment created by uv venv explained later.
    - "python.terminal.activateEnvironment": true and "python.terminal.activateEnvInCurrentTerminal": true: These settings are for automatically activating the Python virtual environment when VS Code's integrated terminal is opened. This saves the trouble of manually entering commands to enter the virtual environment every time you open the terminal.
"onCreateCommand": "pip install uv": This command is executed when Codespaces is first created (or when the container is rebuilt). Here, we install the Python package management tool uv.
"postCreateCommand": "uv sync && echo 'source .venv/bin/activate' >> ~/.bashrc": This command is automatically executed after onCreateCommand when Codespaces is first created (or when the container is rebuilt).
- "uv sync": Based on the project's pyproject.toml and uv.lock files, installs all necessary libraries with exact versions and syncs the virtual environment. This saves environment setup trouble and automatically sets up a highly reproducible development environment.
- "echo 'source .venv/bin/activate' >> ~/.bashrc": This part adds settings to the .bashrc file so that the Python virtual environment is automatically activated in all Bash terminals opened after Codespaces startup. This eliminates the need to manually execute source .venv/bin/activate every time you open a new terminal.
"remoteUser": "vscode": Specifies the user to work with inside Codespaces. Here, we use the vscode user recommended by VS Code. This avoids file permission issues and allows smooth development.

Experience Environment Automation!

After committing the above changes to the GitHub repository, try "rebuilding" Codespaces once.

Open VS Code's command palette (Mac: Cmd + Shift + P / Windows/Linux: Ctrl + Shift + P).
Type "rebuild" and select and execute "Codespaces: Rebuild Container".

When the rebuild is complete, the moment you open the terminal, uv sync should be executed and the environment should be completely ready. Now you can start programming immediately without spending time on environment setup!

Try running main.py once:

python main.py

Now your GitHub repository with .devcontainer and uv.lock configured is no longer just a code storage location.

Using GitHub's fork feature (a feature that copies other people's repositories to your account), anyone can easily duplicate your repository and get the exact same development environment immediately just by starting a Codespace on top of it.

In other words, the environment you created functions as a "distributable development environment" where anyone can immediately start writing code just by publishing it on GitHub, without special setup guides! This makes project sharing and collaboration dramatically smoother.

Recommended Extension: Easy Code Generation with GitHub Copilot

What makes Codespaces even more convenient are VS Code extensions. I especially recommend GitHub Copilot for non-engineers.

GitHub Copilot is a tool where AI analyzes the code you're writing in real-time and automatically suggests the next code you should write. It also has a "chat feature" where you can ask questions about code or inquire about bug causes.

How to Use GitHub Copilot in Codespaces

Please modify your .devcontainer/devcontainer.json file as follows:

{
  "name": "Python Development",
  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance",
        "GitHub.copilot"
      ],
      "settings": {
        "python.defaultInterpreterPath": "./.venv/bin/python",
        "python.terminal.activateEnvironment": true,
        "python.terminal.activateEnvInCurrentTerminal": true
      }
    }
  },
  "onCreateCommand": "pip install uv",
  "postCreateCommand": "uv sync && echo 'source .venv/bin/activate' >> ~/.bashrc",
  "remoteUser": "vscode"
}

If you add this setting and rebuild Codespaces, the next time you start Codespaces, GitHub Copilot will be automatically enabled and code generation support will be displayed on screen.

For non-engineers, it's difficult to memorize all Python syntax and library usage. However, with GitHub Copilot, you can get appropriate code suggestions just by writing comments in Japanese. You can also ask questions in chat and resolve issues on the spot. This dramatically lowers the barrier to writing code from scratch and allows you to quickly turn ideas into reality.

By combining the comfortable development environment obtained with Codespaces with GitHub Copilot, the powerful AI support, non-engineers can fully enjoy the fun of programming and realize various ideas. Please start this new development experience!

Reference Links

Streamlit Chart Libraries Comparison: A Frontend Developer's Guide

Keita M — Thu, 10 Jul 2025 09:29:18 +0000

Hi, I'm Keita from Squadbase, working as a frontend engineer primarily with React and TypeScript. As a Python beginner, I recently had to build a data visualization dashboard with Streamlit and faced the classic question: "Which chart library should I use?"

I tested 4 major libraries with the same dataset and discovered some surprising performance bottlenecks and usability quirks. Here's what I learned from a frontend developer's perspective.

What You'll Learn

Practical comparison of 4 Streamlit chart libraries
Performance limitations you'll actually encounter
Decision framework for choosing the right library
Code examples you can copy-paste

Test Setup

I used this environment for testing:

# requirements.txt
streamlit==1.28.0
plotly==5.17.0
altair==5.1.2
matplotlib==3.8.1
seaborn==0.12.2
pandas==2.1.3
numpy==1.25.2

Sample data simulates e-commerce monthly sales:

import pandas as pd
import numpy as np
from datetime import datetime, timedelta

# Generate sample data
dates = pd.date_range(start='2023-01-01', end='2023-12-31', freq='D')
sales_data = pd.DataFrame({
    'date': dates,
    'sales': np.random.normal(100000, 20000, len(dates)).astype(int),
    'category': np.random.choice(['Electronics', 'Clothing', 'Books'], len(dates))
})

# Monthly aggregation
monthly_sales = sales_data.groupby(sales_data['date'].dt.to_period('M'))['sales'].sum().reset_index()
monthly_sales['date'] = monthly_sales['date'].dt.to_timestamp()

I evaluated each library on:

Code simplicity (learning curve)
Visual appeal (design quality)
Performance (data volume constraints)

Streamlit Native Charts: 3 Lines of Glory

Let's start with the built-in option:

import streamlit as st

# Beautiful chart in 3 lines
st.line_chart(monthly_sales.set_index('date')['sales'])

Coming from Chart.js configuration hell, this simplicity is refreshing.

Pros

Zero learning curve
Pass DataFrame directly
Auto-matches Streamlit theme

Cons

Limited customization options
Multi-series display gets tricky

# Attempted multi-series visualization
category_sales = sales_data.groupby(['date', 'category'])['sales'].sum().unstack()
st.line_chart(category_sales)
# Result: Not quite what I expected...

The lack of fine-grained control feels limiting after years of frontend chart customization.

Best for: Rapid prototyping where simplicity beats customization

Plotly: Interactive Powerhouse with Gotchas

Plotly brings D3.js-level interactivity to Python:

import plotly.express as px
import plotly.graph_objects as go

# Interactive line chart
fig = px.line(monthly_sales, x='date', y='sales', title='Monthly Sales Trend')
st.plotly_chart(fig, use_container_width=True)

Zoom, pan, and hover interactions work beautifully.

Pros

Rich interactivity
use_container_width=True for responsive design
Professional appearance

Cons

WebGL context limits
Complex API

Here's the WebGL gotcha that bit me:

# Displaying multiple charts
for i in range(20):
    fig = px.bar(sample_data, x='category', y='sales', title=f'Chart {i+1}')
    st.plotly_chart(fig)
# Only first 16 charts render in Chrome/Edge!

Browser WebGL context limits mean only ~16 charts per page. Fix with:

fig = px.line(plot_df, render_mode='svg')

Best for: Interactive dashboards with moderate chart counts

Altair: Elegant Grammar of Graphics

Altair uses Grammar of Graphics principles:

import altair as alt

# Declarative syntax
chart = alt.Chart(monthly_sales).mark_line().encode(
    x='date:T',
    y='sales:Q',
    tooltip=['date:T', 'sales:Q']
).interactive()

st.altair_chart(chart, use_container_width=True)

The declarative approach feels natural—like JSX for data visualization.

Pros

Readable declarative syntax
Excellent performance
Lightweight JSON output

Cons

5000-row data limit

The row limit surprised me:

# Large dataset test
large_data = pd.DataFrame({
    'x': range(6000),
    'y': np.random.randn(6000)
})

chart = alt.Chart(large_data).mark_point().encode(x='x', y='y')
st.altair_chart(chart)
# MaxRowsError: Dataset exceeds 5000 rows

Override with:

alt.data_transformers.enable('json')

Best for: Medium datasets where performance and clean syntax matter

Matplotlib: Static with Limitations

Matplotlib is Python's visualization standard:

import matplotlib.pyplot as plt
import seaborn as sns

# Classic matplotlib
plt.figure(figsize=(10, 6))
plt.plot(monthly_sales['date'], monthly_sales['sales'], marker='o')
plt.title('Monthly Sales Trend')
plt.xticks(rotation=45)
plt.tight_layout()
st.pyplot(plt)

Looks familiar, but performance issues emerged.

Pros

Extensive documentation
Fine-grained control
Static image output

Cons

Poor interactive performance
No built-in interactivity

The killer issue:

# Slider interaction test
year = st.slider('Year', 2020, 2023, 2023)
filtered_data = data[data['year'] == year]

plt.figure(figsize=(10, 6))
plt.plot(filtered_data['month'], filtered_data['sales'])
st.pyplot(plt)
# Slider movement triggers heavy re-rendering

Best for: Static reports requiring precise customization

Decision Framework

After testing all four, here's my recommendation hierarchy:

Learning Path

Streamlit Native → Get comfortable with basic charting
Plotly → Add interactivity
Altair → Learn declarative patterns
Matplotlib → Handle edge cases

Selection Matrix

Library	Rating	Learning Curve	Best Use Case
Plotly	⭐⭐⭐⭐⭐	Medium	Interactive dashboards
Altair	⭐⭐⭐⭐☆	Medium	Clean, performant charts
Streamlit Native	⭐⭐⭐☆☆	Low	Rapid prototypes
Matplotlib	⭐⭐☆☆☆	Medium	Static reports

Key Takeaways

Streamlit charting has hidden constraints. WebGL limits (Plotly) and row limits (Altair) only surface with real usage.

Start simple, evolve gradually. Begin with Native Charts, then migrate to Plotly or Altair as requirements grow.

Context matters more than features. Choose based on data volume, interactivity needs, and performance requirements.

Next Steps

Each library shines in different scenarios. Start with one that matches your current needs, then expand your toolkit as projects demand different capabilities.

For complex dashboards, you might even use multiple libraries—Native Charts for simple KPIs, Plotly for interactive exploration, and Altair for performance-critical visualizations.

Building internal tools with data visualization? Squadbase shares practical development insights for modern teams. Let's connect and swap stories about dashboard development!

Quick Guide - 4 Ways to Securely Share Your Next.js Apps With Your Team

Keita M — Thu, 22 May 2025 06:17:53 +0000

This article summarizes the key points of “4 Ways to Implement User Authentication for Sharing Next.js AI Apps Privately Within Your Organization”. If you’d like full code samples and a deeper trade-off analysis, be sure to check out the complete version:

https://www.squadbase.dev/en/blog/4-user-authentication-approaches-for-delivering-nextjs-ai-apps-inside-your-organization

Four Authentication Methods for Sharing Next.js AI Apps Privately

With the arrival of the Vercel AI SDK, Next.js has become a leading framework for building AI applications. However, if you want to share your Next.js–based AI app only within your organization, you need a proper user authentication layer. Below is a concise comparison of four implementation patterns that minimize development effort.

Three Essentials for Organization-Scoped Authentication

Sign-up Restriction

Prevent unauthorized sign-ups even if the URL leaks by allowing only invited users to register — or by disabling self-service sign-up entirely.

Role Management

When running multiple apps concurrently, you need a system that grants each user different permissions per app.

Log Collection & Monitoring

For data governance, it’s important to link auth data with access and error logs so you can trace who did what.

1. Squadbase

Features : Built-in invite-only auth, role management, and analytics.

Pros : Zero code changes — just deploy. CI/CD integration automatically handles secure deployments.

Cons : You depend on Squadbase hosting.

2. Clerk

Features : Rich Next.js UI components, invite-only sign-up, and SSO configurable from the dashboard.

Pros : Add a modern login experience in just a few lines of code.

Cons : Organization-level role management costs $25+/month; switching roles across multiple apps requires extra work.

3. Auth0

Features : Enterprise-grade auth with OAuth, SAML, Okta integration, and more.

Pros : Fine-grained roles and audit logging out of the box.

Cons : Higher learning curve; invitation flows and per-app scoping add complexity.

4. IP Whitelisting (Middleware)

Features : Restrict access by IP range instead of individual users.

Pros : Extremely simple to implement.

Cons : No user tracking or role management — only suitable for minimal access controls (e.g., office LAN).

🔑 Quick Guide — Adding User Authentication to Your Streamlit App

Keita M — Thu, 08 May 2025 09:04:26 +0000

This post is a condensed summary of my full article “3 Ways to Implement User Authentication with Streamlit.” If you want the code samples and a deeper trade-off analysis, head over to the complete piece.

Streamlit makes it almost absurdly easy to turn a Python script into a living web application, but unless your tool is a one-off demo, you need to know who’s using it. Below is a whistle-stop tour of the three approaches to authentication, distilled from a longer piece I just published. Use it to pick the right path, then head over to the full article for hands-on code and deeper trade-offs.

1. Open ID Connect (OIDC)

What it is

The protocol Streamlit now supports natively (≥ v1.32). Login is delegated to any OIDC-compliant identity provider — Google Identity, Auth0, Azure AD, Okta, Keycloak…

Why do teams like it

You reuse a single sign-on (SSO) system your company already trusts, so passwords stay out of your codebase.

Snags

No IdP, no party — you must provision one and wire up every new app.
Role metadata, SAML bridges, multi-tenant rules, etc., vary wildly by IdP, so feature parity across projects is hard.

2. Streamlit Authenticator

What it is

A community package that bakes username-and-password login directly into your Streamlit code with a handful of lines and a YAML file.

Why do teams like it

Zero external services; perfect for hack days or proof-of-concepts that won’t hit the public internet.

Snags

No SSO, no social logins, no SAML.
You must roll your own “forgot-password” flows, profile edits, audit logs… and redeploy for every user change.
That innocuous YAML turns into a bookkeeping nightmare once you pass a dozen users.

3. Squadbase

What it is

Squadbase is a deployment platform built for internal AI and data apps (Streamlit, Next.js, even Ollama). Connect a Git repo; Squadbase builds, hosts, and guards the URL behind its own auth layer.

Why do teams like it

Authentication and SSO out of the box , no code changes.
Project-level roles you can query via SDK — neatly separated from “who can deploy” platform roles.
Automatic runtime logs and per-user analytics in one dashboard, so ops and product folks speak the same language.

Snags

It’s an external platform, so you’ll evaluate it the same way you would Vercel or Netlify — pricing, region coverage, vendor fit, the usual diligence.

Decision Cheat-Sheet

Org already runs Okta / Azure AD etc., and you only need basic gating → OIDC
Hackathon, internal demo, or “let’s-just-ship-it” prototype → Streamlit Authenticator
Multiple internal apps, role-based logic, need logs & analytics, minimal DevOps → Squadbase

One More Step — Deep Dive & Copy-Paste Code

This is just the appetizer. The full article walks through:

Copy-ready code snippets for OIDC and Streamlit Authenticator
Environment-variable tricks for portable deployments
A look at how Squadbase wires up project roles and analytics under the hood
A pros/cons matrix to help you defend the decision to your security team

👉 Read the complete guide here : 3 ways to implement user authentication with Streamlit

Feel free to drop questions or war stories in the comments — happy building!

How to Build a Internal Data App with Google Sheets Backend Using Streamlit

hayato onodera — Wed, 02 Apr 2025 08:00:00 +0000

In this article, we’ll walk you through the process of building an internal-use data app using Streamlit with a spreadsheet as the backend. We’ll also explore scenarios where Streamlit is a particularly good fit.

In our previous article, we introduced several ways to build data apps using spreadsheets as the backend.

This time, we’ll dive deeper into one of the code-based frameworks we mentioned — Streamlit — and explain how to build a data app that’s suitable for internal operations.

You can check out the previous article here:https://dev.to/morph-data/how-to-build-an-internal-data-application-using-google-sheets-as-a-data-source-ddo

Step-by-Step Guide

Google Cloud / Google Sheets Configuration

1. Enable the Google Sheets API
Log in to the Google Developers Console, create a new project, and enable the Google Sheets API.

2. Generate a Service Account and Download the JSON Key
Go to APIs & Services > Credentials and create a new service account.Under the Keys tab of the service account, create a new key and download it in JSON format.

3. Grant Access to the Service Account on the Target Spreadsheet
Click the Share button on the Google Spreadsheet and add the service account. This allows the service account to access the spreadsheet data.

Setting Up and Building with Streamlit

In this section, we’ll build a Streamlit app using the directory structure shown below.

project-name/
│
├── app.py               
└── service_key.json

1.Move to your project directory and install the Streamlit framework.

cd project-name
pip install streamlit

2.Place the JSON file you obtained in Step-by-Step Guide 2 as service_key.json.

3.Write your code in app.py to build the Streamlit application.

import streamlit as st
from google.oauth2 import service_account
import gspread
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
from datetime import datetime

# Add a title to the app
st.title('Dashboard')

# Google Sheets Authentication
scopes = [ 'https://www.googleapis.com/auth/spreadsheets', 'https://www.googleapis.com/auth/drive'
]
credentials = service_account.Credentials.from_service_account_file( "./service_key.json", scopes=scopes
)
gc = gspread.authorize(credentials)

# Get data from Google Sheets
SP_SHEET_KEY = '{Sheet ID}' # sheet id (which can be found in the URL of the Google Sheet, after https://docs.google.com/spreadsheets/d/)
sh = gc.open_by_key(SP_SHEET_KEY)
SP_SHEET = 'test' # Sheet name
worksheet = sh.worksheet(SP_SHEET)
data = worksheet.get_all_values() # Get all data from the sheet
df = pd.DataFrame(data[1:], columns=data[0]) # Convert data to DataFrame

# Display original DataFrame (limited to 100 rows with scrolling)
st.subheader('Original Data')
st.dataframe(df.head(100), height=400)  # height parameter adds scrolling capability

# Check if 'Created Date' column exists
if 'Created Date' in df.columns:
    # Convert to datetime format (adjust format as needed)
    df['Created Date'] = pd.to_datetime(df['Created Date'])

    # Group by date and count records
    count_by_date = df.groupby(df['Created Date'].dt.date).size().reset_index()
    count_by_date.columns = ['Created Date', 'Count']

    # Sort by Created Date in descending order
    count_by_date = count_by_date.sort_values('Created Date', ascending=False)

    # Create two columns for side-by-side display
    st.subheader('Record Count by Date')
    col1, col2 = st.columns([3, 2])  # Adjust the ratio to make the first column wider

    # Display grouped DataFrame in the first column
    with col1:
        st.dataframe(count_by_date.head(100), height=400)

    # Create line chart in the second column
    with col2:
        # For the chart, we need to sort by date in ascending order
        chart_data = count_by_date.sort_values('Created Date', ascending=True)
        st.line_chart(chart_data.set_index('Created Date'))
else:
    st.error("'Created Date' column not found in the DataFrame. Please check the column name.")
    st.write("Available columns:", df.columns.tolist())

4.Open the app in your browser to verify that it works.

streamlit run app.py

Adding Authentication for Internal Use

When running Streamlit apps internally, authentication becomes essential.Here, we’ll cover three methods for implementing authentication.
If you’re only deploying a single app, the first method might be sufficient.However, if you have multiple apps or plan to scale in the future, we recommend using either the second or third approach.

1.Add Authentication to Each App Individually

As of version 1.42.0, Streamlit supports OpenID Connect (OIDC) for user authentication.You can use this built-in feature to add flexible authentication to your app.

Pros: Highly flexible authentication
Cons: Requires implementation for each app, which increases development effort

Official documentation: https://docs.streamlit.io/develop/concepts/connections/authentication

2.Use Snowflake in Streamlit

Snowflake in Streamlit allows you to build and host Streamlit apps directly on the Snowflake platform.Since authentication to Snowflake also applies to your Streamlit app, no additional authentication implementation is required.

Pros: No need to implement authentication individually for each app
Cons: Requires a Snowflake account / Limited to fewer components compared to open-source Streamlit

Official documentation: https://docs.snowflake.com/en/developer-guide/streamlit/about-streamlit

3.Use Squadbase

Morph is a cloud platform that supports Streamlit deployment.By deploying your Streamlit app to Morph, you can leverage Morph’s built-in authentication, eliminating the need to implement it manually.

Pros: No need for individual authentication implementation / Centralized app management
Cons: Involves using an external service (Squadbase)

Official documentation: https://www.squadbase.dev/en

Conclusion

Streamlit is a great tool for data scientists and analysts who are comfortable with Python and want to build data applications powered by machine learning or AI.

It’s especially well-suited for internal tools like:

Workflow automation apps using LLMs
Demand forecasting tools
Internal chatbots that reference company documents

There are endless ways to apply Streamlit — so we encourage you to give it a try!

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 🚀

Making Notion Data “AI Ready” by Transferring it to Pinecone with Trigger.dev

Keita M — Thu, 20 Mar 2025 02:12:41 +0000

Hi, I’m Keita, a front-end developer at Morph.

When developing products, there are often moments when you wonder, “Why is this feature specified this way?” or “This customer is saying something, but I feel like we’ve seen a similar ticket before.” It was in those moments that I thought: I want to perform semantic searches on our project management tool data!

In this article, as the first step, I will explain how to transfer data into Pinecone — a vector database — in order to vectorize its content and prepare it for integration with AI. I use Trigger.dev for the data transfer.

What is Pinecone?

The vector database to build knowledgeable AI | Pinecone

Pinecone is a fully managed vector database that efficiently stores and retrieves high-dimensional embedding vectors generated by machine learning models. The API makes it easy to upsert data or run queries, and it can be used just like a typical NoSQL database. By vectorizing the data, you can perform searches based on similarity in semantic space rather than simple string matching, making it a great fit for AI integration.

Similar tools include Weaviate and Chroma.

What is Trigger.dev?

https://trigger.dev/

Trigger.dev is an event-driven workflow automation platform. It allows you to write background tasks in TypeScript and provides a smooth development experience through a combination of CLI and web dashboard tools. It supports triggering tasks via webhooks or scheduled execution with cron expressions.

Initializing the Project

Start by initializing your project with the Trigger.dev CLI. Be sure to sign up and create your project beforehand.

For this example, I selected the Scheduled Task template.

npx trigger.dev@latest init

Once the initialization is complete, you’ll see files like the following:

// src/trigger/example.ts
import { logger, schedules, wait } from "@trigger.dev/sdk/v3";

export const firstScheduledTask = schedules.task({
  id: "first-scheduled-task",
  // Every hour
  cron: "0 * * * *",
  // Set an optional maxDuration to prevent tasks from running indefinitely
  maxDuration: 300, // Stop executing after 300 secs (5 mins) of compute
  run: async (payload, { ctx }) => {
    // The payload contains the last run timestamp that you can use to check if this is the first run
    // And calculate the time since the last run
    const distanceInMs =
      payload.timestamp.getTime() - (payload.lastTimestamp ?? new Date()).getTime();
    logger.log("First scheduled tasks", { payload, distanceInMs });
    // Wait for 5 seconds
    await wait.for({ seconds: 5 });
    // Format the timestamp using the timezone from the payload
    const formatted = payload.timestamp.toLocaleString("en-US", {
      timeZone: payload.timezone,
    });
    logger.log(formatted);
  },
});

Fetching Data from Notion

To integrate with Notion, use the @notionhq/client. With Notion’s Integration, you can implement data integration — please refer to the guide to create your integration and grant access to the target database.

Since the Notion API response is in the rich text AST format, I use the notion-to-md package to convert it into Markdown format.

The following code shows how to query the database and obtain each page’s content in Markdown. Make sure to specify your NOTION_API_KEY and NOTION_DATABASE_ID in your .env file.

// src/fetch-notion.ts

import { isFullPage, Client as NotionClient } from "@notionhq/client";
import { NotionConverter } from "notion-to-md";
import { MDXRenderer } from "notion-to-md/plugins/renderer";
import { DefaultExporter } from "notion-to-md/plugins/exporter";
import { PageObjectResponse } from "@notionhq/client/build/src/api-endpoints";
const notion = new NotionClient({
  auth: process.env.NOTION_API_KEY,
});
const buffer: Record<string, string> = {};
const n2m = new NotionConverter(notion)
  .withRenderer(new MDXRenderer())
  .withExporter(
    new DefaultExporter({
      outputType: "buffer",
      buffer: buffer,
    })
  );

export async function fetchNotion() {
  const databaseId = process.env.NOTION_DATABASE_ID!;
  const notionResponse = await notion.databases.query({
    database_id: databaseId,
  });
  const pages = notionResponse.results;
  const results: (Record<string, string> & { text: string })[] = [];
  for (const page of pages) {
    // Check if the page is a full page object
    if (!isFullPage(page)) {
      continue;
    }
    await n2m.convert(page.id);
    const bodyString = buffer[page.id];

    console.log(bodyString);
 }
}

Formatting Notion Data

In this app, a batch process is executed every hour, and only data that was updated within that hour is transferred to Pinecone. Adjust the query conditions for the database accordingly.
While Pinecone can store numbers and strings, it cannot store objects or null values. Therefore, the data must be formatted.

Taking these two points into account, the fetchNotion function becomes as follows:

import { isFullPage, Client as NotionClient } from "@notionhq/client";
import { NotionConverter } from "notion-to-md";
import { MDXRenderer } from "notion-to-md/plugins/renderer";
import { DefaultExporter } from "notion-to-md/plugins/exporter";
import { PageObjectResponse } from "@notionhq/client/build/src/api-endpoints";

const notion = new NotionClient({
  auth: process.env.NOTION_API_KEY,
});
const buffer: Record<string, string> = {};
const n2m = new NotionConverter(notion)
  .withRenderer(new MDXRenderer())
  .withExporter(
    new DefaultExporter({
      outputType: "buffer",
      buffer: buffer,
    })
  );

// turn notion propeties into plain text
function extractPlainText(
  property: PageObjectResponse["properties"][string]
): string {
  // Return an empty string if the property or its type is missing
  if (!property || !property.type) return "";
  switch (property.type) {
    // For title and rich_text, concatenate the plain_text from each item
    case "title":
    case "rich_text": {
      const content =
        property.type === "title" ? property.title : property.rich_text;
      if (Array.isArray(content)) {
        return content.map((item) => item.plain_text).join("");
      }
      return "";
    }
    // For select and status, return the name of the selected option
    case "select":
      return property.select ? property.select.name : "";
    case "status":
      return property.status ? property.status.name : "";
    // For date, return the start date
    case "date":
      return property.date ? property.date.start : "";
    // For created_by, return the creator's name if available
    case "created_by":
      if (property.created_by && "name" in property.created_by) {
        return property.created_by.name || "";
      }
      break;
    // For people, return a comma-separated list of user names
    case "people":
      if (Array.isArray(property.people) && property.people.length > 0) {
        return property.people.map((person: any) => person.name).join(", ");
      }
      break;
    // For relation, return a comma-separated list of relation ids (or empty string if missing)
    case "relation":
      if (Array.isArray(property.relation) && property.relation.length > 0) {
        return property.relation.map((rel: any) => rel.id || "").join(", ");
      }
      break;
    default:
      break;
  }
  // Return an empty string if no valid value is found
  return "";
}
export async function fetchNotion() {
  const databaseId = process.env.NOTION_DATABASE_ID!;
  const one_hour_ago = new Date(Date.now() - 60 * 60 * 1000).toISOString();
  const notionResponse = await notion.databases.query({
    database_id: databaseId,
    filter: {
      and: [
        {
          last_edited_time: {
            after: one_hour_ago,
          },
          timestamp: "last_edited_time",
        },
      ],
    },
  });
  const pages = notionResponse.results;
  const results: (Record<string, string> & { text: string })[] = [];
  for (const page of pages) {
    // Check if the page is a full page object
    if (!isFullPage(page)) {
      continue;
    }
    await n2m.convert(page.id);
    const bodyString = buffer[page.id];
    results.push({
      _id: page.id,
      created_time: page.created_time,
      last_edited_time: page.last_edited_time,
      ...Object.keys(page.properties).reduce((acc, key) => {
        acc[key] = extractPlainText(page.properties[key]);
        return acc;
      }, {} as Record<string, string>),
      text: bodyString,
    });
  }
  return results;
}

Transferring Data to Pinecone

Now for the final step: transferring the data to Pinecone. After signing up for Pinecone and obtaining an API key, add it to your .env file. Also, initialize your index. Choose an embedding model and cloud provider that best suits your needs.

In this example, I use the Integrated embedding. The fields specified here will serve as the targets for semantic search.

Once everything is set up, edit your Trigger.dev code as follows. It’s very simple — make sure to set PINECONE_API_KEY and PINECONE_INDEX_NAME in your .env file.

import { logger, schedules } from "@trigger.dev/sdk/v3";
import { Pinecone } from "@pinecone-database/pinecone";
import { fetchNotion } from "../fetch-notion";

const pc = new Pinecone({
  apiKey: process.env.PINECONE_API_KEY!,
});
const index = pc.index(process.env.PINECONE_INDEX_NAME!);
export const notionToPineconeTask = schedules.task({
  id: "notion-to-pinecone-batch",
  cron: "0 * * * *",
  maxDuration: 300,
  run: async (payload, { ctx }) => {
    logger.log("Trigger task started", { payload });
    const pages = await fetchNotion();
    await index.namespace("ns1").upsertRecords(pages);
    logger.log("Notion to Pinecone transfer completed");
  },
});

Testing and Deployment

Test your script using a combination of the Trigger.dev CLI and the web dashboard. Run the following command and then log in to the Trigger.dev dashboard:

npx trigger.dev@latest dev

Also, be sure to set your environment variables within the Trigger.dev dashboard.

From the Test tab, select the task you created and click Run Test.

This completes the Notion → Pinecone transfer script! 🎉

Final thoughts

I originally wanted to try Trigger.dev while building an in-house application, and it turned out to be far more comfortable than I had expected. I particularly appreciated that even cron tasks can be easily tested from the dashboard. That said, if this were a customer-facing feature, you would likely write dedicated test scripts to ensure quality — so I view the Trigger.dev test functionality as a development aid rather than a full testing solution. Overall, I believe it’s perfect for batch processing in internal applications.

How to Build an Internal Data Application Using Google Sheets as a Data Source

hayato onodera — Thu, 13 Mar 2025 17:25:35 +0000

This article introduces multiple approaches to building an internal data application using google sheets as the backend. In addition to summarizing the advantages and disadvantages of each approach, we will also discuss the differences from the perspective of AI functionality, which has been gaining increasing demand.

Many teams manage their daily data using Google Sheets due to its high convenience. But when you decide to build a data application using google sheets as the backend, what are your options?

Code-Based / Low-Code / No-Code

The methods for building an internal data application can be categorized into three approaches: code-based development, low-code tools, and no-code tools. Below are the descriptions and representative tools for each approach.

Code-Based

This approach involves building a data application with code. While it requires coding, the frameworks introduced below provide pre-built components that enable rapid development. Additionally, since they are open-source, you can choose your deployment environment.

[Representative Tools]

Low-Code

This approach combines coding and GUI-based development. For simple applications with minimal functionality/UI, it is possible to build using only the GUI, while some parts can be customized with code. Compared to no-code, low-code allows for more flexibility, but it still has limitations compared to full code-based development.

[Representative Tools]

Appsmith: https://www.appsmith.com/
Retool: https://retool.com/
OutSystems：https://www.outsystems.com/?sc_lang=en

No-Code

This approach allows users to build data applications entirely through GUI-based tools, making it accessible to non-engineers. However, it has significant limitations in terms of handling complex processing and UI customization. Additionally, the development skill is heavily dependent on familiarity with the specific tool, making knowledge transfer a challenge.

[Representative Tools]

AppSheet: https://about.appsheet.com/home/
Glide: https://www.glideapps.com/
Softr: https://www.softr.io/

Compatibility with AI Features

One of the most significant emerging needs is AI integration. Let’s examine how well each category supports AI functionality.

Code-Based

With a code-based approach, you can leverage open-source AI frameworks such as Langchain and CrewAI, allowing for the highest level of flexibility in AI development. This approach supports model switching, fine-tuning with custom datasets, and other advanced AI functionalities. Since internal business workflows vary widely between companies and often involve complex logic, this approach is the most recommended for building AI-powered applications tailored to your business needs.

Low-Code

In general, AI functionality in low-code platforms relies on pre-integrated external APIs. While parameters and prompts can be tuned, you cannot perform additional training with new datasets or freely select AI models. This makes low-code a suitable choice for single-task AI use cases but limits its flexibility. Therefore, the AI compatibility of low-code is considered moderate.

No-Code

With a no-code approach, you can only use the AI features provided by the platform. While these features are easy to use, they lack customization options, making them useful only for specific use cases. No-code is ideal for Proof of Concept (PoC) and quick experiments, but for building production-ready applications, AI compatibility is low.

Comparison of Code-Based Frameworks

Next, let’s focus on code-based frameworks and try building a simple application using google sheets as the backend. For this example, we will create a dashboard to manage user inquiry data stored in a spreadsheet.

Streamlit

First, we will build the application with Streamlit. Streamlit allows you to complete the development using a single Python file.

import streamlit as st
from google.oauth2 import service_account
import gspread
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
from datetime import datetime
# Add a title to the app
st.title('Dashboard')
# Google Sheets Authentication
scopes = [ 'https://www.googleapis.com/auth/spreadsheets', 'https://www.googleapis.com/auth/drive'
]
json_file_path = os.path.join(os.path.dirname( __file__ ), "../credential.json")
credentials = service_account.Credentials.from_service_account_file(json_file_path, scopes=scopes)
gc = gspread.authorize(credentials)
# Get data from Google Sheets
SP_SHEET_KEY = '{Sheet ID}' # sheet id (which can be found in the URL of the Google Sheet, after https://docs.google.com/spreadsheets/d/)
sh = gc.open_by_key(SP_SHEET_KEY)
SP_SHEET = 'test' # Sheet name
worksheet = sh.worksheet(SP_SHEET)
data = worksheet.get_all_values() # Get all data from the sheet
df = pd.DataFrame(data[1:], columns=data[0]) # Convert data to DataFrame
# Display original DataFrame (limited to 100 rows with scrolling)
st.subheader('Original Data')
st.dataframe(df.head(100), height=400) # height parameter adds scrolling capability
# Check if 'Created Date' column exists
if 'Created Date' in df.columns:
 # Convert to datetime format (adjust format as needed)
 df['Created Date'] = pd.to_datetime(df['Created Date'])

 # Group by date and count records
 count_by_date = df.groupby(df['Created Date'].dt.date).size().reset_index()
 count_by_date.columns = ['Created Date', 'Count']

 # Sort by Created Date in descending order
 count_by_date = count_by_date.sort_values('Created Date', ascending=False)

 # Create two columns for side-by-side display
 st.subheader('Record Count by Date')
 col1, col2 = st.columns([3, 2]) # Adjust the ratio to make the first column wider

 # Display grouped DataFrame in the first column
 with col1:
 st.dataframe(count_by_date.head(100), height=400)

 # Create line chart in the second column
 with col2:
 # For the chart, we need to sort by date in ascending order
 chart_data = count_by_date.sort_values('Created Date', ascending=True)
 st.line_chart(chart_data.set_index('Created Date'))
else:
 st.error("'Created Date' column not found in the DataFrame. Please check the column name.")
 st.write("Available columns:", df.columns.tolist())

Evidence

Next, let’s try Evidence. Evidence is built with the SvelteKit JavaScript framework, so you need a Node.js environment to use it.

## Check data connection
``sql gsheets
select * from googlesheets.test_test
``

## Count group by date
``sql count_groupby_date
select "Created Date" as date , 
        count(*) as count 
from googlesheets.test_test
     group by "Created Date"
     order by "Created Date" DESC
``

## Dashboard
<Grid cols=2>
    <DataTable data={count_groupby_date}/>

    <LineChart 
        data = {count_groupby_date}    
        y = count 
        title = 'chart' 
    />
</Grid>

The app will look like this. One nice touch is that the SQL source code is displayed alongside it.

Morph

Finally, we will use the Morph framework. Morph is unique in that it allows you to structure your application using separate Python and Markdown files. Additionally, Python functions are written in a standard function format, making it easier to learn.

# Get spreadsheet data

import pandas as pd
import gspread
from oauth2client.service_account import ServiceAccountCredentials
import os
import morph
from morph import MorphGlobalContext
@morph.func
def get_gsheets(context: MorphGlobalContext):
    # Configure authentication information
    json_path = os.path.join(os.path.dirname( __file__ ), "../credential.json")
    scope = ['https://spreadsheets.google.com/feeds', 'https://www.googleapis.com/auth/drive']
    # get certification information
    credentials = ServiceAccountCredentials.from_json_keyfile_name(json_path, scope)
    client = gspread.authorize(credentials)
    # Open Spreadsheet
    spreadsheet = client.open_by_key("Sheet ID")
    worksheet = spreadsheet.worksheet("Sheet name")
    # Get data and convert to a DataFrame
    data = worksheet.get_all_values()
    df = pd.DataFrame(data[1:], columns=data[0])
    return df

## Display of aggregated table

import pandas as pd
import morph
from morph import MorphGlobalContext
@morph.func()
@morph.load_data("get_gsheets")
def group_by_date(context: MorphGlobalContext):
    df = context.data["get_gsheets"]
    # Group by Created Date and count records, then sort by date in descending order
    grouped_df = df.groupby('Created Date').size().reset_index(name='count')
    grouped_df = grouped_df.sort_values('Created Date', ascending=False)
    return grouped_df

# Display of Chart

import plotly.express as px
import pandas as pd
import morph
from morph import MorphGlobalContext
@morph.func()
@morph.load_data("group_by_date")
def group_by_date_chart(context: MorphGlobalContext):
    df = context.data["group_by_date"]
    df['Created Date'] = pd.to_datetime(df['Created Date'])
    df['count'] = pd.to_numeric(df['count'], errors='coerce')
    # Create a line chart using plotly
    fig = px.line(df, x='Created Date', y='count', title='Record Count by Created Date')
    return fig.to_html()

{/* Frontend */}
## Dashboard
<DataTable
  loadData="get_gsheets"
  height={300}
 />
<Grid cols="2">
    <div>
        ## Table
        <DataTable
            loadData="group_by_date"
            height={300}
        />
    </div>
    <div>
        ## Chart
        <Embed
            loadData="group_by_date_chart"
            height={300}
            width={800}
        />
    </div>
</Grid>

Summary of Comparisons

If you are familiar with Python, Streamlit and Morph will feel the most intuitive. If you are a data analyst proficient in SQL but not experienced with Python, you might prefer Evidence.

For dashboard applications, Evidence is a strong option because it provides many pre-built chart components, reducing the amount of code needed. If you need additional AI functionalities or features beyond dashboards, Streamlit or Morph would be better choices.

If you want maximum flexibility in UI customization, Morph stands out because it allows you to create custom React components and apply styling flexibly using MDX files.

Pros, Cons, and Recommended Use Cases

Conclusion

When comparing no-code, low-code, and code-based approaches for developing data applications with google sheets as the backend, there is a trade-off between flexibility, speed, and engineering requirements. For simple single-function applications or PoC use cases, no-code and low-code are viable options due to their speed. However, for building enterprise-grade internal data applications that meet specific operational needs, code-based approaches are more advantageous.

Considering the increasing demand for AI integration, Python frameworks such as Streamlit and Morph are strong contenders for future-proof data applications. Give them a try and see which one fits your needs!

Create a Custom Chat App with Web Search in 3 Minutes Using Open AI’s New Responses API

Keita M — Thu, 13 Mar 2025 02:03:02 +0000

Open AI recently announced its new Responses API. Responses API combines existing Chat Completion API and Assistant API into one simple interface integrating new tools.

In the latest developer documentation, you can find plenty of code samples that support the new Responses API.

In this article, we’ll build a custom chat app with web search capabilities in just 3 minutes using the Morph framework and the Responses API. The entire implementation was done in less than 30 lines of code.

This sample uses Python12 and uv.

Project Setup

First, install the morph command.

pip install morph-data

Next, initialize the project and install the dependency packages.

morph new responses-api
cd responses-api

uv add openai

Building the Backend

Inside the src directory, create a file called chat.py. The code is simple. The latest OpenAI SDK provides a client that supports the Responses API.

# src/chat.py

import morph
from morph import MorphGlobalContext
from openai import OpenAI
@morph.func
def chat(context: MorphGlobalContext):
  client = OpenAI()
  # Add custom prompt if needed
  stream = client.responses.create(
    model="gpt-4o",
    tools=[{"type": "web_search_preview"}], # Enable web search.
    input=context.vars["prompt"],
    stream=True
  )
  for event in stream:
    if (event.type == 'response.output_text.delta'):
      yield event.delta

Building the Frontend

With the Morph framework, the frontend is built using Markdown. You can also use React components within Markdown.

{/* src/pages/index.mdx */}
# Open AI Responses API
A simple demo app using Open AI Responses API.
<Chat height={700} postData='chat' />

Outcome

Conclusion

OpenAI’s Responses API has made the codebase extremely simple. With its integrated interface and flexible tool usage, even complex processes and agent-like behaviors can be achieved with a single API call, enabling a variety of workflows without the need for an LLM framework.

Furthermore, using Morph made it easy to create an app that leverages the Responses API. Give it a try! It’s highly recommended for quickly testing out new APIs and Python-based LLM frameworks!

3 Python Libraries + Tips for Enhancing OCR Accuracy in LLM APIs

Shunsuke Sakata — Wed, 12 Mar 2025 01:18:19 +0000

Four Data Preprocessing Techniques for Invoice OCR Using Generative AI

By leveraging generative AI, it has become easier to implement OCR that can handle flexible formats. However, to ensure accuracy, data preprocessing is crucial. In this article, we will introduce preprocessing techniques for invoice OCR using generative AI.

Benefits of OCR Using Generative AI

Traditional OCR primarily relies on predefined algorithms, rule-based approaches, or machine learning models to recognize character patterns when extracting text from images. However, it commonly struggles with challenges such as “unexpected layouts,” “special formats,” and “noise.”

In contrast, OCR powered by generative AI has the distinct advantage of comprehensively understanding image data to extract text more effectively. This enables it to handle “complex layouts,” “handwritten text,” and “documents with mixed tables and diagrams” — areas where traditional OCR often falls short. Additionally, generative AI-based OCR offers greater flexibility and can even perform error correction and interpretation, enhancing overall accuracy.

Improving the Accuracy of OCR Using Generative AI

While OCR powered by generative AI can handle diverse formats, it may sometimes be less stable in terms of accuracy compared to traditional OCR.

This is where data preprocessing becomes crucial.

In this article, we will introduce data processing techniques using Python libraries and machine learning approaches to enhance OCR performance.

Trimming Images Using the Pillow Library in Python

When passing images to generative AI, removing as much irrelevant information as possible can significantly improve accuracy.

For structured documents like invoices, where the format is somewhat standardized, you can incorporate an automatic image trimming process using Python’s Pillow library. This helps eliminate unnecessary margins or background noise, ensuring that the OCR focuses only on the essential text areas.

https://pypi.org/project/pillow/

Furthermore, instead of directly applying OCR to the trimmed image, converting the trimmed image into Markdown using generative AI has shown improvements in accuracy.

from PIL import Image

# Open the image. 
image = Image.open('invoice_sample.jpg')

# Trimming area.
crop_area = (100,2400,1962,3100)

# Execute trimming.
cropped_image = image.crop(crop_area)

# Save the trimmed image. 
cropped_image.save('invoice_sample_cropped.jpg')

# Display the trimmed image.
cropped_image.show()

Furthermore, when the trimmed image is converted into Markdown, it is output as shown below. It can also be confirmed that the numbers are correctly converted.

| Description | Units | Rate (USD) | Amount (USD) |
|--------------------------|-------------|------------|--------------|
| Basic Service Charge | 1 month | 850 | 850 |
| Electricity Usage | 320 kWh | 25/kWh | 8,000 |
| Fuel Adjustment Charge | 320 kWh | 1.5/kWh | 480 |
| Renewable Energy Fee | 320 kWh | 2.2/kWh | 704 |
| Environmental Fee | Flat rate | 150 | 150 |

Adjusting Image Contrast Using OpenCV in Python

By using the OpenCV library to adjust image contrast, it is possible to enhance readability and preprocess images for better OCR accuracy.

Manually correcting each image would be a tedious task, so an automated optimization approach can be used to adjust the image’s average brightness or median value to a target level. For example, a suitable gamma value can be determined based on the principle of bringing the average brightness of the image closer to 128 (the midpoint of the 0–255 range).

By adjusting the settings according to the characteristics of the images being processed, the accuracy of text recognition can be further improved.

import cv2
import numpy as np

# Load the image.
image = cv2.imread('invoice_sample_dark.png')

# Parameter.
brightness = 70 

# Adjust the brightness.
bright_image = cv2.convertScaleAbs(image, alpha=1.0, beta=brightness)

# Save the image.
cv2.imwrite('invoice_sample_bright.png', bright_image)

# Display the original and adjusted image.
cv2.imshow('Original Image', image)
cv2.imshow('Brightness Adjusted Image', bright_image)

cv2.waitKey(0)
cv2.destroyAllWindows()

text

Combining Open-Source OCR with Python’s pytesseract Library

Python provides an open-source OCR library called pytesseract, which allows text extraction from images. By using this library, it is possible to convert image-based text into machine-readable text.

Passing this extracted text along with the image to generative AI can help reduce numerical errors, such as incorrect decimal places.

Although recognizing handwritten text can be challenging, pytesseract is free to use, making it an easy way to experiment with improving OCR accuracy.

import pytesseract
from PIL import Image

# For Windows only, specify the Tesseract installation path (adjust the installation path accordingly).
# pytesseract.pytesseract.tesseract_cmd = r'C:\Program Files\Tesseract-OCR\tesseract.exe'

# Load the image.
image = Image.open('invoice_sample.jpg')

# Execute OCR to extract text.
text = pytesseract.image_to_string(image, lang='eng')

# Display the extracted text.
print(text)

# Save the text to a file (optional).
with open('invoice_sample_text.txt', 'w', encoding='utf-8') as f:
    f.write(text)

OCR result text file

—J+- AZU—yyayk 2025-03-07 13.42.53

Sample Invoice - Power Company

ABC Power Company
123 Energy Street, Tokyo, Japan
Phone: 03-1234-5678

nail sbcpower.co.jp

456 Residential Ave, Shibuya, Tokyo 150-0002

Account Number: 000123456789

Invoice Number: INV-20250307-00123

Billing Date: March 7, 2025 1 i i
Billing Period: February 1, 2025 — February 28, 2025

Usage Summary:

Description Units Rate (USD) Amount (USD) | \ iil |
Basic Service Charge 1 month 850 850. AAT |
Electricity Usage 320 kWh 25/kWh 8,000

Fuel Adjustment Charge 320 kWh 1.5/kKWh 480

Renewable Energy Fee 320 kWh 2.2/kKWh 704

Environmental Fee Flat rate 150 |) eo

Subtotal: $10,184
Consumption Tax (10%): $1,018
Total Amount Due: $11,202

Combine OCR tools (Azure Vision AI)

If pytesseract does not successfully extract text, you can also leverage existing OCR services.

For example, Azure Vision AI’s OCR service can accurately extract text from images. The extracted text is returned in JSON format via API. However, since this method only retrieves text data, table structures and other visual information from the image may be lost.

By having generative AI supplement the missing image information and combining it with the accurately extracted text, it becomes possible to extract specific information with higher accuracy.

Here is the result using Azure Vision Studio’s “Extract text from images” feature.

SampleInvoice-PowerCompany
ABCPowerCompany
123EnergyStreet,Tokyo,Japan
Phone:03-1234-5678
Email:billing@abcpower.co.jp
Invoiceto:
JohnDoe
456ResidentialAve,Shibuya,Tokyo150-0002
AccountNumber:000123456789
InvoiceNumber:INV-20250307-00123
BillingDate:March7,2025
BillingPeriod:February1,2025-February28,2025
UsageSummary:
Description
Unit
Rate(USD)
Amount(USD)
BasicServiceCharge
1month
850
850
ElectricityUsage
320kWh
25/kWh
8,000
FuelAdjustmentCharge
320kWh
1.5/kWh
480
+
RenewableEnergyFee
320kWh
2.2/kWh
704
EnvironmentalFee
Flatrate
150
150
Subtotal:$10,184
ConsumptionTax(10%):$1,018
TotalAmountDue:$11,202

Summary: Easily Integrate OCR into Workflows with Generative AI

As we have seen so far, by performing data preprocessing, it is possible to easily achieve high-accuracy OCR using generative AI.

Python also offers various powerful libraries. By leveraging the strengths of Python and cloud services, we can effectively utilize generative AI in real-world applications.

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!

Building a Dashboard Web App Using Google Sheets and Markdown

hayato onodera — Tue, 18 Feb 2025 07:53:35 +0000

Spreadsheets are familiar and flexible. In addition to the ease of inputting, processing, and visualizing data, modern spreadsheets also offer features such as real-time collaborative editing. These advantages make them a popular foundation for managing and analyzing massive amounts of data in many environments the world over.

But how to integrate them into a modern workflow? In this article, we focus on these spreadsheet utilities and explain the detailed process of converting them into a practical dashboard web app using the Morph framework.

The app built in this tutorial is shown below:

Morph is a framework for building web applications in Python and markdown.

Documentation: https://docs.morph-data.io/

Service site: https://www.morph-data.io/

Setting Up the Google Sheets API

1. Enable the Google Sheets API

2. Create a Service Account and Download the JSON File

Navigate to API & Services > Credentials and create a new service account.

Then, under the service account’s Keys tab, create a new key and download it in JSON format.

3. Invite the Service Account to the Target Spreadsheet

From the spreadsheet’s Share button, add the service account. This will allow the service account to access the data in that spreadsheet.

Initializing the Project

We will use Morph as the application framework. To use Morph, you must have Python 3.9 or later and Node.js 18 or later installed.

For detailed setup instructions, please refer to the documentation.

Installing the Package

pip install morph-data

Initializing the Project

morph new sheet-app

Installing Additional Packages

pip install gspread oauth2client

Calling the Google Sheets API from Python

1. Converting Spreadsheet Data to a DataFrame

import pandas as pd
import gspread
from oauth2client.service_account import ServiceAccountCredentials
import os
import morph
from morph import MorphGlobalContext

# Load authentication credentials and set them in the environment variables
auth = os.path.join(os.path.dirname( __file__ ), "../credential.json")
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = auth

# Set the required scopes
scope = ['https://spreadsheets.google.com/feeds']

# Initialize the API client
credentials = ServiceAccountCredentials.from_json_keyfile_name(auth, scope)
client = gspread.authorize(credentials)

@morph.func
def get_sales_from_sheet(context: MorphGlobalContext):
    spread_sheet = client.open_by_key("SHEET_ID") # Retrieve the entire spreadsheet
    raw_data = spread_sheet.worksheet("SHEET_NAME") # Get the specific worksheet
    all_data = raw_data.get_all_values()
    # Convert to a DataFrame.
    df = pd.DataFrame(all_data[1:], columns=all_data[0])
    return df

2. Creating a Chart with Plotly from the DataFrame

import plotly.express as px
import pandas as pd
import morph
from morph import MorphGlobalContext

@morph.func
@morph.load_data("get_sales_from_sheet") # Load the result from the specified function
def sales_chart(context: MorphGlobalContext):
    # Retrieve the result from get_sales_from_sheet
    df = context.data["get_sales_from_sheet"]
    # Convert the 'Total_Sales' column to numeric
    df['Total_Sales'] = pd.to_numeric(df['Total_Sales'], errors='coerce')
    # Aggregate the data
    df = context.data["get_sales_spreadsheet"].groupby("Product").sum(["Total_Sales"]).reset_index()
    # Create the chart
    fig = px.bar(df, x="Product", y="Total_Sales")
    return fig

One of the key features of Morph is that by using the @morph.load_data annotation, you can load results from other functions. What’s the difference from simply calling a Python function? With Morph, you can handle other file formats — such as SQL and Markdown — using the same mechanism.

3. Building the UI

# Sales Analysis Cheat Sheet

<Grid cols="2"><div>    
    ## Table Display
    <DataTable loadData="get_sales_spreadsheet" height={300} />
  </div>

  <div>
    ## Chart Display
    <Embed loadData="chart_sales_data" height={300} />
  </div>
</Grid>

Deploying to Squadbase

If you want to publish your locally built application to the web, you can deploy it to Squadbase instead of self-hosting. For more details, please refer to the documentation below.

Documentation: https://www.squadbase.dev/en/docs

By following these steps, you can successfully publish a web dashboard that visualizes your spreadsheet data. The dashboard reflects real-time changes to the spreadsheet without risking accidental modifications to the original data, allowing you to share the dashboard safely. Give it a try!

DEV Community: Squadbase

Stop Failing at Environment Setup. A Complete Guide to GitHub Codespaces for Non-Engineers

Why Does Programming Learning Fail at "Environment Setup"? - The 3 Walls That Programming Beginners Face

1. Installing Languages and Runtime Environments (Terminal Operations)

2. Language Version Management and Virtual Environment Management

3. It Doesn't Work Even Though I Followed the Instructions... (Troubleshooting)

Solution: What is GitHub Codespaces? - A Revolutionary Development Environment That Installs Nothing on Your PC

Technical Mechanism (For Non-Engineers)

Peace of Mind: Codespaces Pricing Structure - Here's How Much You Can Use for Free

Free Tier Details

Practice (Hands-On): Start in 5 Minutes! Let's Run Your First Python Environment

Step 1: Create GitHub Account

Step 2: Launch Your First Codespace

Step 3: Practical Mini-Project Experience

Cost Management Best Practices

Better Environment with .devcontainer Configuration

What is .devcontainer?

.devcontainer/devcontainer.json Configuration Example

Key Points of This Configuration

Experience Environment Automation!

Recommended Extension: Easy Code Generation with GitHub Copilot

How to Use GitHub Copilot in Codespaces

Reference Links

Streamlit Chart Libraries Comparison: A Frontend Developer's Guide

What You'll Learn

Test Setup

Streamlit Native Charts: 3 Lines of Glory

Pros

Cons

Plotly: Interactive Powerhouse with Gotchas

Pros

Cons

Altair: Elegant Grammar of Graphics

Pros

Cons

Matplotlib: Static with Limitations

Pros

Cons

Decision Framework

Learning Path

Selection Matrix

Key Takeaways

Next Steps

Quick Guide - 4 Ways to Securely Share Your Next.js Apps With Your Team

Four Authentication Methods for Sharing Next.js AI Apps Privately

Three Essentials for Organization-Scoped Authentication

1. Squadbase

2. Clerk

3. Auth0

4. IP Whitelisting (Middleware)

🔑 Quick Guide — Adding User Authentication to Your Streamlit App

1. Open ID Connect (OIDC)

What it is

Why do teams like it

Snags

2. Streamlit Authenticator

What it is

Why do teams like it

Snags

3. Squadbase

What it is

Why do teams like it

Snags

Decision Cheat-Sheet

One More Step — Deep Dive & Copy-Paste Code

How to Build a Internal Data App with Google Sheets Backend Using Streamlit

Step-by-Step Guide

Google Cloud / Google Sheets Configuration

Setting Up and Building with Streamlit

Adding Authentication for Internal Use

Conclusion

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

TL;DR

Preparation

Building a Simple Streamlit App

Configuring Morph Deployment

Deploying to Morph

Making Notion Data “AI Ready” by Transferring it to Pinecone with Trigger.dev

What is Pinecone?

What is Trigger.dev?

Better Environment with `.devcontainer` Configuration

What is `.devcontainer`?

`.devcontainer/devcontainer.json` Configuration Example