# Mesop — Build AI Apps Fast with Python UI

> Google's Python UI framework for rapidly building AI demos and internal tools. Declarative components, hot reload. 6.5K+ stars.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Mesop — Build AI Apps Fast with Python UI

## Quick Use

```bash
pip install mesop
```

```python
import mesop as me
import mesop.labs as mel

@me.page(path="/")
def home():
    mel.chat(transform, title="My AI Chat", bot_user="AI")

def transform(prompt: str, history: list) -> str:
    from openai import OpenAI
    client = OpenAI()
    messages = [{"role": "user", "content": prompt}]
    response = client.chat.completions.create(model="gpt-4o", messages=messages)
    return response.choices[0].message.content

me.run()
```

Open `http://localhost:32123` — your AI chat app is live.

---

## Intro

Mesop is a Python UI framework by Google with 6,500+ GitHub stars for rapidly building AI demos, prototypes, and internal tools. It provides a declarative component model where you describe what your UI should look like, and Mesop handles the rendering. With built-in AI chat components, hot reload, and zero JavaScript requirement, you can go from Python script to interactive web app in minutes. Originally built at Google for internal AI demos, Mesop is now open-source and used by teams building LLM-powered interfaces.

Works with: Python, OpenAI, Anthropic, Google Gemini, any LLM API. Best for AI developers who want to build interactive demos and internal tools without web development skills. Setup time: under 2 minutes.

---

## Mesop Features

### Declarative UI

```python
import mesop as me

@me.page(path="/")
def home():
    me.text("Hello World", type="headline-4")
    me.button("Click me", on_click=handle_click)
    me.input(label="Enter text", on_blur=handle_input)

def handle_click(e: me.ClickEvent):
    state = me.state(AppState)
    state.count += 1

@me.stateclass
class AppState:
    count: int = 0
    text: str = ""
```

### Built-in AI Chat Component

```python
import mesop.labs as mel

def transform(prompt: str, history: list) -> str:
    # Your LLM call here
    return call_llm(prompt)

@me.page(path="/chat")
def chat_page():
    mel.chat(
        transform,
        title="AI Assistant",
        bot_user="Assistant",
    )
```

This gives you a complete chat UI with:
- Message history
- Streaming responses
- User/bot avatars
- Input field with send button

### State Management

```python
@me.stateclass
class State:
    query: str = ""
    results: list[str] = []
    loading: bool = False

def search(e: me.ClickEvent):
    state = me.state(State)
    state.loading = True
    yield  # Update UI to show loading
    state.results = perform_search(state.query)
    state.loading = False
    yield  # Update UI with results
```

### Components

| Component | Usage |
|-----------|-------|
| `me.text()` | Text display |
| `me.button()` | Clickable button |
| `me.input()` | Text input |
| `me.textarea()` | Multi-line input |
| `me.select()` | Dropdown |
| `me.slider()` | Range slider |
| `me.checkbox()` | Toggle |
| `me.table()` | Data table |
| `me.markdown()` | Render Markdown |
| `me.plot()` | Matplotlib charts |
| `mel.chat()` | Full chat interface |

### Hot Reload

Edit your Python file and the UI updates instantly — no restart needed.

### Multi-Page Apps

```python
@me.page(path="/")
def home(): ...

@me.page(path="/chat")
def chat(): ...

@me.page(path="/dashboard")
def dashboard(): ...
```

---

## FAQ

**Q: What is Mesop?**
A: Mesop is Google's open-source Python UI framework with 6,500+ GitHub stars for rapidly building AI demos and internal tools with declarative components, built-in chat UI, and hot reload.

**Q: How is Mesop different from Streamlit or Gradio?**
A: Mesop uses a declarative component model (like React) instead of Streamlit's top-to-bottom rerun model. It has better state management and a built-in AI chat component. Gradio is focused on ML model demos; Mesop is for general-purpose AI apps.

**Q: Is Mesop free?**
A: Yes, open-source under Apache-2.0.

---

## Source & Thanks

> Created by [Google / Mesop Dev](https://github.com/mesop-dev). Licensed under Apache-2.0.
>
> [mesop](https://github.com/mesop-dev/mesop) — ⭐ 6,500+

---

<!-- ZH -->

## 快速使用

```bash
pip install mesop
```

```python
import mesop as me
import mesop.labs as mel

@me.page(path="/")
def home():
    mel.chat(transform, title="AI 助手")

def transform(prompt, history):
    return call_llm(prompt)

me.run()
```

---

## 简介

Mesop 是 Google 开源的 Python UI 框架，拥有 6,500+ GitHub stars，专为快速构建 AI 演示和内部工具而设计。声明式组件模型、内置 AI 聊天组件、热重载、无需 JavaScript。

---

## 来源与感谢

> Created by [Google / Mesop Dev](https://github.com/mesop-dev). Licensed under Apache-2.0.
>
> [mesop](https://github.com/mesop-dev/mesop) — ⭐ 6,500+


---
Source: https://tokrepo.com/en/workflows/f5dff34f-43e7-411c-addc-68609bacfea4
Author: Skill Factory