MCP Client Development with Streamlit: Build Your AI-Powered Web App

In “Model Context Protocol (MCP) Tutorial: Build Your First MCP Server in 6 Steps”, we launched the MCP structure and explored MCP servers intimately. We are going to proceed our MCP exploration on this tutorial, by constructing an interactive MCP shopper interface utilizing Streamlit. The primary distinction between an MCP server and an MCP shopper is that MCP server offers functionalities by connecting to a various vary of instruments and sources, whereas MCP shopper leverages these functionalities by an interface. Streamlit, a light-weight Python library for data-driven interactive net purposes improvement, accelerates the event cycle and abstracts away frontend frameworks, making it an optimum selection for speedy prototyping and the streamlined deployment of AI-powered instruments. Subsequently, we’re going to use Streamlit to assemble our MCP shopper person interface by a minimal setup, whereas specializing in connecting to distant MCP servers for exploring various AI functionalities.

Venture Overview

Create an interactive net app prototype the place customers can enter their matters of curiosity and select between two MCP servers—DeepWiki and HuggingFace—that present related sources. DeepWiki makes a speciality of summarizing codebases and GitHub repositories, whereas the HuggingFace MCP server offers suggestions of open-source datasets and fashions associated to the person’s matters. The picture under shows the online app’s output for the subject “sentiment evaluation”.

To develop the Streamlit MCP shopper, we are going to break it down into the next steps:

• Set Up Growth Setting
• Initialize Streamlit App Format
• Get Consumer Inputs
• Hook up with Distant MCP Servers
• Generate Mannequin Responses
• Run the Streamlit App

Set Up Growth Setting

Firstly, let’s arrange our mission listing utilizing a easy construction.

mcp_streamlit_client/
├── .env                  # Setting variables (API keys)
├── README.md             # Venture documentation
├── necessities.txt      # Required libraries and dependencies
└── app.py                # Major Streamlit software

Then set up needed libraries – we want streamlit for constructing the online interface and openai for interacting with OpenAI’s API that helps MCP.

pip set up streamlit openai

Alternatively, you’ll be able to create a necessities.txt file to specify the library variations for reproducible installations by working:

pip set up -r necessities.txt

Secondly, safe your API Keys utilizing setting variables. When working with LLM suppliers like OpenAI, you have to to arrange an API key. To maintain this key confidential, the perfect observe is to make use of setting variables to load the API key and keep away from onerous coding it immediately into your script, particularly when you plan to share your code or deploy your software. To do that, add your API keys within the .env file utilizing the next format. We will even want Hugging Face API token to entry its distant MCP server.

OPENAI_API_KEY="your_openai_api_key_here" 
HF_API_KEY="your_huggingface_api_key_here" 

Now, within the script app.py, you’ll be able to load these variables into your software’s setting utilizing load_dotenv() from the dotenv library. This perform reads the key-value pairs out of your .env file and makes them accessible through os.getenv().

from dotenv import load_dotenv
import os

load_dotenv() 

# entry HuggingFace API key utilizing os.getenv()
HF_API_KEY = os.getenv('HF_API_KEY')

Join MCP Server and Shopper

Earlier than diving into MCP shopper improvement, let’s perceive the fundamentals of creating an MCP server-client connection. With the rising recognition of MCP, an rising variety of LLM suppliers now assist MCP shopper implementation. For instance, OpenAI provides a simple initialization technique utilizing the code under.

from openai import OpenAI

shopper = OpenAI()

To attach the shopper to an MCP server, you’ll must implement a connection technique that takes both a server script path (for native MCP servers) or URL (for distant MCP servers) because the enter. Native MCP servers are applications that run in your native machine, whereas distant MCP servers are deployed on-line and accessible by a URL. For instance under, we’re connecting to a distant MCP server “DeepWiki” by “https://mcp.deepwiki.com/mcp”.

response = shopper.responses.create(
    mannequin="gpt-4.1",
    instruments=[
        {
            "type": "mcp",
            "server_label": "deepwiki",
            "server_url": "https://mcp.deepwiki.com/mcp",
            "require_approval": "never",
        },
    ]
)

Construct the Streamlit MCP Shopper

Now that we perceive the basics of creating connections between MCP purchasers and servers, we’ll encapsulate this performance inside an online interface for enhanced person expertise. This net app is designed with modularity in thoughts, composed of a number of components carried out utilizing Streamlit strategies, comparable to st.radio(), st.button(), st.information(), st.title() and st.text_area().

1. Initialize Your Streamlit Web page

We are going to begin with initialize_page() perform that units the web page icon and title, and makes use of format="centered" to make sure the general net app format to be aligned within the heart. This perform returns a column object beneath the web page title the place we are going to place widgets proven within the following steps.

import streamlit as st

def initialize_page():
    """Initialize the Streamlit web page configuration and format"""
    st.set_page_config(
        page_icon="🤖", # A robotic emoji because the web page icon
        format="centered" # Middle the content material on the web page
    )
    st.title("Streamlit MCP Shopper") # Set the primary title of the app

    # Return a column object which can be utilized to put widgets
    return st.columns(1)[0]

2. Get Consumer Inputs

The get_user_input() perform permits customers to offer their enter, by making a textual content space widget utilizing st.text_area(). The top parameter ensures the enter field is satisfactorily sized, and the placeholder textual content prompts the person with particular directions.

def get_user_input(column):
    """Deal with transcript enter strategies and return the transcript textual content"""

    user_text = column.text_area(
        "Please enter the matters you’re fascinated by:",
        top=100,
        placeholder="Kind it right here..."
    )

    return user_text

3. Hook up with MCP Servers

The create_mcp_server_dropdown() perform facilitates the pliability to select from a spread of MCP servers. It defines a dictionary of accessible MCP servers, mapping a label (like “deepwiki” or “huggingface”) to its corresponding server URL. Streamlit’s st.radio() widget shows these choices as radio buttons for customers to select from. This perform then returns each the chosen server’s label and its URL, feeding into the following step to generate responses.

def create_mcp_server_dropdown():
    # Outline an inventory of MCP servers with their labels and URLs
    mcp_servers = {
        "deepwiki": "https://mcp.deepwiki.com/mcp",
        "huggingface": "https://huggingface.co/mcp"
    }

    # Create a radio button for choosing the MCP server
    selected_server = st.radio(
        "Choose MCP Server",
        choices=listing(mcp_servers.keys()), 
        assist="Select the MCP server you wish to connect with"
    )

    # Get the URL equivalent to the chosen server
    server_url = mcp_servers[selected_server]

    return selected_server, server_url

4. Generate Responses

Earlier we see find out how to use shopper.responses.create() as a normal solution to generate responses. The generate_response() perform under extends this by passing a number of customized parameters:

• mannequin: select the LLM mannequin that matches your finances and function.
• instruments: decided by the person chosen MCP server URL. On this case, since Hugging Face server requires person authentication, we additionally specify the API key within the device configuration and show an error message when the secret’s not discovered.
• enter: this combines person’s question and tool-specific directions
  to offer clear context for the immediate.

The person’s enter is then despatched to the LLM, which leverages the chosen MCP server as an exterior device to meet the request. And show the responses utilizing the Streamlit information widget st.information(). In any other case, it’s going to return an error message utilizing st.error() when no responses are produced.

from openai import OpenAI
import os

load_dotenv()
HF_API_KEY = os.getenv('HF_API_KEY') 

def generate_response(user_text, selected_server, server_url):
    """Generate response utilizing OpenAI shopper and MCP instruments"""
    shopper = OpenAI() 

    attempt:
        mcp_tool = {
            "kind": "mcp",
            "server_label": selected_server, 
            "server_url": server_url,      
            "require_approval": "by no means",   
        }

        if selected_server == 'huggingface':
            if HF_API_KEY:
                mcp_tool["headers"] = {"Authorization": f"Bearer {HF_API_KEY}"}
            else:
                st.warning("Hugging Face API Key not present in .env. Some functionalities could be restricted.")
            prompt_text = f"Record some sources related to this matter: {user_text}?"
        else:
            prompt_text = f"Summarize codebase contents related to this matter: {user_text}?"

        response = shopper.responses.create(
            mannequin="gpt-3.5-turbo", 
            instruments=[mcp_tool],      
            enter=prompt_text
        )

        st.information(
            f"""
            **Response:**
            {response.output_text}
            """
        )
        return response

    besides Exception as e:
        st.error(f"Error producing response: {str(e)}") 
        return None

5. Outline the Major Operate

The ultimate step is to create a predominant() perform that chains all operations collectively. This perform sequentially calls initialize_page(), get_user_input(), and create_mcp_server_dropdown() to arrange the UI and accumulate person inputs. It then creates a situation to set off generate_response() when the person clicks st.button("Generate Response"). Upon clicking, the perform checks if person enter exists, shows a spinner with st.spinner() to indicate progress, and returns the response. If no enter is supplied, the app shows a warning message as an alternative of calling generate_response(), stopping pointless token utilization and further prices.

def predominant():
    # 1. Initialize the web page format
    main_column = initialize_page()

    # 2. Get person enter for the subject
    user_text = get_user_input(main_column)

    # 3. Enable person to pick the MCP server
    with main_column: # Place the radio buttons inside the primary column
        selected_server, server_url = create_mcp_server_dropdown()

    # 4. Add a button to set off the response technology
    if st.button("Generate Response", key="generate_button"):
        if user_text:
            with st.spinner("Producing response..."): 
                generate_response(user_text, selected_server, server_url)
        else:
            st.warning("Please enter a subject first.")

Run Streamlit Utility

Lastly, a normal Python script entry level ensures that our predominant perform is executed when the script is run.

if __name__ == "__main__":
    predominant()

Open your terminal or command immediate, navigate to the listing the place you saved the file, and run:

streamlit run app.py

In case you are creating your app regionally, a neighborhood Streamlit server will spin up and your app will open in a brand new tab in your default net browser. Alternatively, if you’re creating in a cloud setting, comparable to AWS JupyterLab, substitute the default URL with this format: https://.studio..sagemaker.aws/jupyterlab/default/proxy/8501/. Chances are you’ll discover the submit “Build Streamlit apps in Amazon SageMaker AI Studio” useful.

Lastly, yow will discover the code in our GitHub repository “mcp-streamlit-client” and discover your Streamlit MCP shopper by making an attempt out completely different matters.

Take-Dwelling Message

In our earlier article, we launched the MCP structure and centered on the MCP server. Constructing on this basis, we now discover implementing an MCP shopper with Streamlit to boost the device calling capabilities of distant MCP servers. This information offers important steps—from establishing your improvement setting and securing API keys, dealing with person enter, connecting to distant MCP servers, and displaying AI-generated responses. To organize this software for manufacturing, contemplate these subsequent steps:

• Asynchronous processing of a number of shopper requests
• Caching mechanisms for sooner response instances
• Session state administration
• Consumer authentication and entry administration