|
|
import gradio as gr |
|
|
|
|
|
from gradio_agentvisualizer import AgentVisualizer, agent_to_dict |
|
|
from gradio_mcp_tools_visualizer import mcp_tools_visualizer |
|
|
|
|
|
from demo_agents.custom_agent import manager_agent |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
smolagent_dict = agent_to_dict(manager_agent) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
server_parameters = {"url": "https://abidlabs-mcp-tools2.hf.space/gradio_api/mcp/sse", "transport": "sse"} |
|
|
|
|
|
with gr.Blocks() as demo: |
|
|
gr.Markdown(""" |
|
|
# 🚀 AI & MCP Visualization |
|
|
|
|
|
This project provides clear visualizations for **Agents** and **MCP Tools**. |
|
|
|
|
|
### Use Cases |
|
|
- **Agent Description**: Clearly visualize agent hierarchy, tools, and models. |
|
|
- **MCP Setup**: Display MCP configurations and example inputs. |
|
|
- **Technical Presentations**: Optimize technical communication and workflows. |
|
|
""") |
|
|
|
|
|
with gr.Tab("Agent Visualizer"): |
|
|
gr.Markdown(""" |
|
|
## Installation and Usage Instructions |
|
|
|
|
|
### gradio-agentvisualizer |
|
|
|
|
|
[Pypi Package](https://pypi.org/project/gradio-agentvisualizer/0.0.3/) |
|
|
|
|
|
**Installation**: |
|
|
|
|
|
Install using pip: |
|
|
|
|
|
```bash |
|
|
pip install gradio-agentvisualizer==0.0.3 |
|
|
``` |
|
|
|
|
|
**Example Usage**: |
|
|
|
|
|
```python |
|
|
from gradio_agentvisualizer import AgentVisualizer, agent_to_dict |
|
|
|
|
|
# Convert your agent to dictionary format |
|
|
smolagent_dict = agent_to_dict(manager_agent) # manager_agent -> Being your agent that you want to visualize |
|
|
|
|
|
# Visualize using AgentVisualizer |
|
|
AgentVisualizer(value=smolagent_dict) |
|
|
``` |
|
|
""") |
|
|
|
|
|
AgentVisualizer(value=smolagent_dict) |
|
|
|
|
|
with gr.Tab("MCP Tool Visualizer"): |
|
|
gr.Markdown(""" |
|
|
### gradio-mcp-tools-visualizer |
|
|
|
|
|
[Pypi Package](https://pypi.org/project/gradio-mcp-tools-visualizer/0.0.4/) |
|
|
|
|
|
**Installation**: |
|
|
|
|
|
Install using pip: |
|
|
|
|
|
```bash |
|
|
pip install gradio-mcp-tools-visualizer==0.0.4 |
|
|
``` |
|
|
|
|
|
**Example Usage**: |
|
|
|
|
|
```python |
|
|
from gradio_mcp_tools_visualizer import mcp_tools_visualizer |
|
|
|
|
|
# Define MCP server configuration |
|
|
server_parameters = { |
|
|
"url": "https://abidlabs-mcp-tools2.hf.space/gradio_api/mcp/sse", |
|
|
"transport": "sse" |
|
|
} |
|
|
|
|
|
# Visualize MCP tools configuration |
|
|
mcp_tools_visualizer(value={ |
|
|
'server_parameters': server_parameters |
|
|
}) |
|
|
``` |
|
|
""") |
|
|
mcp_tools_visualizer( |
|
|
value={ |
|
|
'server_parameters': server_parameters |
|
|
}, |
|
|
) |
|
|
|
|
|
if __name__ == "__main__": |
|
|
demo.launch() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
