Build a Claude Chatbot with Gradio in Python

Use the Claude API with Gradio in Python 2026. Build a streaming chatbot, image analysis app, and multi-modal demo with gr.ChatInterface and gr.Blocks. Working code.

Gradio is the fastest way to build a shareable ML demo UI in Python. Combined with the Claude API, you can have a streaming chatbot or multi-modal app running in under 30 lines. This guide covers the minimal chatbot, streaming, image analysis, and deployment to Hugging Face Spaces.

Installation

pip install anthropic gradio

Minimal streaming chatbot

import anthropic
import gradio as gr

client = anthropic.Anthropic()  # reads ANTHROPIC_API_KEY from env

def chat(message: str, history: list[dict]) -> str:
    """Non-streaming version — simpler but less responsive."""
    messages = history + [{"role": "user", "content": message}]
    response = client.messages.create(
        model="claude-sonnet-4-6",
        max_tokens=1024,
        messages=messages,
    )
    return response.content[0].text

demo = gr.ChatInterface(fn=chat, type="messages", title="Claude Chatbot")
demo.launch()

Streaming version (token-by-token)

import anthropic
import gradio as gr
from typing import Generator

client = anthropic.Anthropic()

def chat_stream(message: str, history: list[dict]) -> Generator[str, None, None]:
    messages = history + [{"role": "user", "content": message}]
    full_response = ""
    with client.messages.stream(
        model="claude-sonnet-4-6",
        max_tokens=1024,
        messages=messages,
    ) as stream:
        for text in stream.text_stream:
            full_response += text
            yield full_response  # Gradio re-renders on each yield

demo = gr.ChatInterface(
    fn=chat_stream,
    type="messages",
    title="Claude Streaming Chatbot",
    description="Powered by Claude Sonnet 4.6",
)
demo.launch()

With system prompt and model selector

import anthropic
import gradio as gr

client = anthropic.Anthropic()

MODELS = [
    "claude-sonnet-4-6",
    "claude-haiku-4-5-20251001",
    "claude-opus-4-7",
]

def chat_stream(message, history, system_prompt, model):
    messages = history + [{"role": "user", "content": message}]
    full_response = ""
    with client.messages.stream(
        model=model,
        max_tokens=1024,
        system=system_prompt,
        messages=messages,
    ) as stream:
        for text in stream.text_stream:
            full_response += text
            yield full_response

with gr.Blocks(title="Claude Demo") as demo:
    gr.Markdown("## Claude API Demo")
    with gr.Row():
        model_dd = gr.Dropdown(MODELS, value="claude-sonnet-4-6", label="Model")
        system_box = gr.Textbox(
            value="You are a helpful assistant. Be concise.",
            label="System prompt",
            lines=2,
        )
    chatbot = gr.ChatInterface(
        fn=chat_stream,
        additional_inputs=[system_box, model_dd],
        type="messages",
    )

demo.launch()

Image analysis with Claude Vision

import anthropic
import gradio as gr
import base64
from PIL import Image
import io

client = anthropic.Anthropic()

def analyze_image(image: Image.Image, question: str) -> str:
    # Convert PIL image to base64 JPEG
    buffer = io.BytesIO()
    image.convert("RGB").save(buffer, format="JPEG")
    img_b64 = base64.standard_b64encode(buffer.getvalue()).decode("utf-8")

    response = client.messages.create(
        model="claude-sonnet-4-6",
        max_tokens=1024,
        messages=[{
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/jpeg",
                        "data": img_b64,
                    },
                },
                {"type": "text", "text": question or "Describe this image in detail."},
            ],
        }],
    )
    return response.content[0].text

demo = gr.Interface(
    fn=analyze_image,
    inputs=[
        gr.Image(type="pil", label="Upload image"),
        gr.Textbox(label="Question", placeholder="What's in this image?"),
    ],
    outputs=gr.Textbox(label="Claude's analysis", lines=8),
    title="Claude Vision Demo",
)
demo.launch()

Gradio vs Streamlit for Claude apps

Deploy to Hugging Face Spaces (free)

# requirements.txt
anthropic
gradio

# app.py (your main file — HF Spaces auto-detects it)
# Set ANTHROPIC_API_KEY in Space Settings → Variables and secrets

# Local dev:
python app.py
# Opens at http://localhost:7860

# HF Spaces deploy:
# 1. Push to GitHub / HF repo
# 2. Create Space at huggingface.co/spaces → Gradio SDK
# 3. Add ANTHROPIC_API_KEY as a secret
# 4. Space auto-builds from requirements.txt

To estimate Claude API costs for your Gradio demo, use the Claude API Cost Calculator. For a Streamlit alternative, see the Claude API Streamlit guide. For production WebSocket-based streaming (bidirectional, cancel-capable), see the Claude API WebSocket guide.

Frequently asked questions

Free tools

More examples