MCP playground (#224)

Co-authored-by: Dirk Brand <[email protected]>

Author: anuragts

tools/mcp.mdx

@@ -168,6 +168,68 @@ if __name__ == "__main__":
     asyncio.run(run_agent("What is the license for this project?"))
 ```
 
+## Running MCP in Playground
+
+You can also run MCP servers in the Agno Playground, which provides a web interface for interacting with your agents. Here's an example of a GitHub agent running in the Playground:
+
+```python github_playground.py
+import asyncio
+from os import getenv
+from textwrap import dedent
+
+import nest_asyncio
+from agno.agent import Agent
+from agno.models.openai import OpenAIChat
+from agno.playground import Playground, serve_playground_app
+from agno.storage.agent.sqlite import SqliteAgentStorage
+from agno.tools.mcp import MCPTools
+
+# Allow nested event loops
+nest_asyncio.apply()
+
+agent_storage_file: str = "tmp/agents.db"
+
+
+async def run_server() -> None:
+    """Run the GitHub agent server."""
+    github_token = getenv("GITHUB_TOKEN") or getenv("GITHUB_ACCESS_TOKEN")
+    if not github_token:
+        raise ValueError("GITHUB_TOKEN environment variable is required")
+
+    # Create a client session to connect to the MCP server
+    async with MCPTools("npx -y @modelcontextprotocol/server-github") as mcp_tools:
+        agent = Agent(
+            name="MCP GitHub Agent",
+            tools=[mcp_tools],
+            instructions=dedent("""\
+                You are a GitHub assistant. Help users explore repositories and their activity.
+
+                - Use headings to organize your responses
+                - Be concise and focus on relevant information\
+            """),
+            model=OpenAIChat(id="gpt-4o"),
+            storage=SqliteAgentStorage(
+                table_name="basic_agent",
+                db_file=agent_storage_file,
+                auto_upgrade_schema=True,
+            ),
+            add_history_to_messages=True,
+            num_history_responses=3,
+            add_datetime_to_instructions=True,
+            markdown=True,
+        )
+
+        playground = Playground(agents=[agent])
+        app = playground.get_app()
+
+        # Serve the app while keeping the MCPTools context manager alive
+        serve_playground_app(app)
+
+
+if __name__ == "__main__":
+    asyncio.run(run_server())
+```
+
 
 ## Best Practices
 
@@ -191,7 +253,7 @@ You are a filesystem assistant. Help users explore files and directories.
 """
 ```
 
-## Understanding server Parameters
+## Understanding Server Parameters
 
 The recommended way to configure `MCPTools` or `MultiMCPTools` is to use the `command` parameter.