|
| 1 | +import asyncio |
| 2 | +import os |
| 3 | + |
| 4 | +import streamlit as st |
| 5 | +from agents import run_github_agent |
| 6 | + |
| 7 | +# Page config |
| 8 | +st.set_page_config(page_title="🐙 GitHub MCP Agent", page_icon="🐙", layout="wide") |
| 9 | + |
| 10 | +# Title and description |
| 11 | +st.markdown("<h1 class='main-header'>🐙 GitHub MCP Agent</h1>", unsafe_allow_html=True) |
| 12 | +st.markdown( |
| 13 | + "Explore GitHub repositories with natural language using the Model Context Protocol" |
| 14 | +) |
| 15 | + |
| 16 | +# Setup sidebar for API key |
| 17 | +with st.sidebar: |
| 18 | + st.header("🔑 Authentication") |
| 19 | + github_token = st.text_input( |
| 20 | + "GitHub Token", |
| 21 | + type="password", |
| 22 | + help="Create a token with repo scope at github.com/settings/tokens", |
| 23 | + ) |
| 24 | + |
| 25 | + if github_token: |
| 26 | + os.environ["GITHUB_TOKEN"] = github_token |
| 27 | + |
| 28 | + st.markdown("---") |
| 29 | + st.markdown("### Example Queries") |
| 30 | + |
| 31 | + st.markdown("**Issues**") |
| 32 | + st.markdown("- Show me issues by label") |
| 33 | + st.markdown("- What issues are being actively discussed?") |
| 34 | + |
| 35 | + st.markdown("**Pull Requests**") |
| 36 | + st.markdown("- What PRs need review?") |
| 37 | + st.markdown("- Show me recent merged PRs") |
| 38 | + |
| 39 | + st.markdown("**Repository**") |
| 40 | + st.markdown("- Show repository health metrics") |
| 41 | + st.markdown("- Show repository activity patterns") |
| 42 | + |
| 43 | + st.markdown("---") |
| 44 | + st.caption( |
| 45 | + "Note: Always specify the repository in your query if not already selected in the main input." |
| 46 | + ) |
| 47 | + |
| 48 | +# Query input |
| 49 | +col1, col2 = st.columns([3, 1]) |
| 50 | +with col1: |
| 51 | + repo = st.text_input("Repository", value="agno-agi/agno", help="Format: owner/repo") |
| 52 | +with col2: |
| 53 | + query_type = st.selectbox( |
| 54 | + "Query Type", ["Issues", "Pull Requests", "Repository Activity", "Custom"] |
| 55 | + ) |
| 56 | + |
| 57 | +# Create predefined queries based on type |
| 58 | +if query_type == "Issues": |
| 59 | + query_template = f"Find issues labeled as bugs in {repo}" |
| 60 | +elif query_type == "Pull Requests": |
| 61 | + query_template = f"Show me recent merged PRs in {repo}" |
| 62 | +elif query_type == "Repository Activity": |
| 63 | + query_template = f"Analyze code quality trends in {repo}" |
| 64 | +else: |
| 65 | + query_template = "" |
| 66 | + |
| 67 | +query = st.text_area( |
| 68 | + "Your Query", |
| 69 | + value=query_template, |
| 70 | + placeholder="What would you like to know about this repository?", |
| 71 | +) |
| 72 | + |
| 73 | +# Run button |
| 74 | +if st.button("🚀 Run Query", type="primary", use_container_width=True): |
| 75 | + if not github_token: |
| 76 | + st.error("Please enter your GitHub token in the sidebar") |
| 77 | + elif not query: |
| 78 | + st.error("Please enter a query") |
| 79 | + else: |
| 80 | + with st.spinner("Analyzing GitHub repository..."): |
| 81 | + # Ensure the repository is explicitly mentioned in the query |
| 82 | + if repo and repo not in query: |
| 83 | + full_query = f"{query} in {repo}" |
| 84 | + else: |
| 85 | + full_query = query |
| 86 | + |
| 87 | + result = asyncio.run(run_github_agent(full_query)) |
| 88 | + |
| 89 | + # Display results in a nice container |
| 90 | + st.markdown("### Results") |
| 91 | + st.markdown(result) |
| 92 | + |
| 93 | +# Display help text for first-time users |
| 94 | +if "result" not in locals(): |
| 95 | + st.markdown( |
| 96 | + """<div class='info-box'> |
| 97 | + <h4>How to use this app:</h4> |
| 98 | + <ol> |
| 99 | + <li>Enter your GitHub token in the sidebar</li> |
| 100 | + <li>Specify a repository (e.g., agno-agi/agno)</li> |
| 101 | + <li>Select a query type or write your own</li> |
| 102 | + <li>Click 'Run Query' to see results</li> |
| 103 | + </ol> |
| 104 | + <p><strong>Important Notes:</strong></p> |
| 105 | + <ul> |
| 106 | + <li>The Model Context Protocol (MCP) provides real-time access to GitHub repositories</li> |
| 107 | + <li>Queries work best when they focus on specific aspects like issues, PRs, or repository info</li> |
| 108 | + <li>More specific queries yield better results</li> |
| 109 | + <li>This app requires Node.js to be installed (for the npx command)</li> |
| 110 | + </ul> |
| 111 | + </div>""", |
| 112 | + unsafe_allow_html=True, |
| 113 | + ) |
| 114 | + |
| 115 | +# Footer |
| 116 | +st.markdown("---") |
| 117 | +st.write("Built with Streamlit, Agno, and Model Context Protocol ❤️") |
0 commit comments