magical-tales / ui /mcp_components.py
agharsallah
rename and restructure
b492512
import gradio as gr
from services.mcp.mcp_letter_counting import letter_occurrence_mcp_client
def letter_counter_component():
"""
Count the occurrences of a specific letter in a given word using the MCP server.
Args:
word (str): The word in which to count the letter.
letter (str): The letter to count in the word.
Returns:
str: The response from the MCP server containing the count of the letter.
"""
with gr.Column(elem_classes="gr-form") as mcp_letter_counter_ui:
gr.HTML("<h2>MCP Character Counter</h2>")
gr.HTML("<p>Enter text below and the MCP server will count the characters.</p>")
# Text input for character counting
input_text = gr.Textbox(
label="Enter text to count characters",
placeholder="Type or paste text here...",
lines=5,
)
letter_to_count = gr.Textbox(
label="Letter to Count",
placeholder="Enter the letter to count in the text",
lines=1,
)
# Count button
count_button = gr.Button("Count Characters", variant="primary")
# Result display
result_text = gr.Textbox(label="Result", interactive=False)
# Connect the button to different counting functions based on method
count_button.click(
fn=letter_occurrence_mcp_client, # Use the async function directly - Gradio handles the async
inputs=[input_text, letter_to_count],
outputs=[result_text],
)
# MCP Tools Explorer Section
gr.HTML("<h3>MCP Tools Explorer</h3>")
gr.HTML("<p>Explore the available tools in the MCP server.</p>")
return mcp_letter_counter_ui