Add swagger spec from URL and view spec (#410)

rawkintrevo · web-flow · commit 2090a9d77097 · 2025-10-27T15:28:07.000-05:00
* Add swagger spec from URL and view spec

Signed-off-by: Trevor Grant &lt;trevor.d.grant@gmail.com&gt;

* Add swagger spec from URL and view spec

Signed-off-by: Trevor Grant &lt;trevor.d.grant@gmail.com&gt;

* Ranom type

Signed-off-by: Trevor Grant &lt;trevor.d.grant@gmail.com&gt;

---------

Signed-off-by: Trevor Grant &lt;trevor.d.grant@gmail.com&gt;
diff --git a/webapp/packages/api/user-service/main.py b/webapp/packages/api/user-service/main.py
@@ -14,6 +14,7 @@
 import traceback
 import httpx
 import firebase_admin
+import yaml
 from firebase_admin import credentials, auth
 from fastapi import Depends
 from fastapi.security import OAuth2PasswordBearer
@@ -138,6 +139,8 @@ class ClientLogPayload(BaseModel):
     level: str = "INFO"
     metadata: Optional[Dict[str, Any]] = None
 
+class FetchSpecRequest(BaseModel):
+    url: str
 
 # Import models after defining local ones to avoid circular dependencies
 from models.chat import ChatResponse, ProviderConfig, SessionData
@@ -413,6 +416,36 @@ async def generate_agent_code(request: GenerateCodeRequest, user: dict = Depends
     code = await generate_code_function(request)
     return code
 
+@app.post("/specs/fetch")
+async def fetch_spec_from_url(request: FetchSpecRequest, user: dict = Depends(get_current_user)):
+    """Fetches OpenAPI/Swagger spec content from a public URL."""
+    async with httpx.AsyncClient() as client:
+        try:
+            response = await client.get(request.url)
+            response.raise_for_status() # Raises an exception for 4xx/5xx responses
+            
+            # Basic validation: Try to parse as JSON or YAML
+            content = response.text
+            try:
+                json.loads(content)
+            except json.JSONDecodeError:
+                try:
+                    yaml.safe_load(content)
+                except yaml.YAMLError:
+                    raise HTTPException(status_code=400, detail="Content from URL is not valid JSON or YAML.")
+
+            # Create a name from the URL path
+            from urllib.parse import urlparse
+            path = urlparse(str(request.url)).path
+            name = path.split('/')[-1] if path else "spec_from_url.json"
+            if not name:
+                name = "spec_from_url.json"
+
+            return {"name": name, "content": content}
+        except httpx.RequestError as e:
+            raise HTTPException(status_code=400, detail=f"Error fetching from URL: {e}")
+
+
 @app.post("/agents/{agent_id}/deploy", status_code=201)
 async def deploy_agent(agent_id: str, db: DatabaseService = Depends(get_db), user: dict = Depends(get_current_user)):
     """Registers an agent for internal REST deployment."""
diff --git a/webapp/packages/webui/src/components/SpecViewerModal.jsx b/webapp/packages/webui/src/components/SpecViewerModal.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Paper,
+} from '@mui/material';
+
+const SpecViewerModal = ({ open, onClose, specName, specContent }) => {
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>Viewing Spec: {specName}</DialogTitle>
+      <DialogContent>
+        <Paper variant="outlined" sx={{ p: 2, mt: 1, backgroundColor: '#2e2e2e', maxHeight: '60vh', overflowY: 'auto' }}>
+          <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: '#e0e0e0' }}>
+            {specContent}
+          </pre>
+        </Paper>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+SpecViewerModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  specName: PropTypes.string,
+  specContent: PropTypes.string,
+};
+
+SpecViewerModal.defaultProps = {
+    specName: '',
+    specContent: '',
+};
+
+export default SpecViewerModal;
diff --git a/webapp/packages/webui/src/pages/AgentCreationFlow/ToolsScreen.jsx b/webapp/packages/webui/src/pages/AgentCreationFlow/ToolsScreen.jsx
@@ -8,6 +8,7 @@ import {
   List,
   ListItem,
   ListItemText,
+  Divider,
   IconButton,
   Paper,
   Alert,
@@ -23,10 +24,13 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import BuildIcon from '@mui/icons-material/Build';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import { useAgentFlow } from './AgentCreationFlowContext';
 import agentService from '../../services/agentService';
 import ToolsSelectionDialog from './ToolsSelectionDialog'; 
+import SpecViewerModal from '../../components/SpecViewerModal';
+ 
 
 
 const ToolsScreen = () => {
@@ -36,6 +40,10 @@ const ToolsScreen = () => {
   const navigate = useNavigate();
   const [toolsDialog, setToolsDialog] = useState({ open: false, mcpUrl: '', existingSelectedTools: [] });
   const [tabIndex, setTabIndex] = useState(0);
+  const [specUrl, setSpecUrl] = useState('');
+  const [isFetchingSpec, setIsFetchingSpec] = useState(false);
+  const [viewingSpec, setViewingSpec] = useState({ open: false, name: '', content: '' });
+ 
 
   // State for Gofannon Agents tab
   const [availableAgents, setAvailableAgents] = useState([]);
@@ -73,6 +81,28 @@ const ToolsScreen = () => {
     setError(null);
   };
 
+  const handleFetchSpec = async () => {
+    if (!specUrl.trim()) {
+      setError('Spec URL cannot be empty.');
+      return;
+    }
+    setIsFetchingSpec(true);
+    setError(null);
+    try {
+      const specData = await agentService.fetchSpecFromUrl(specUrl);
+      if (swaggerSpecs.some(spec => spec.name === specData.name)) {
+        setError(`A spec with the name "${specData.name}" already exists.`);
+      } else {
+        setSwaggerSpecs(prev => [...prev, specData]);
+        setSpecUrl('');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to fetch spec from URL.');
+    } finally {
+      setIsFetchingSpec(false);
+    }
+   };
+
   const handleDeleteTool = (urlToDelete) => {
     setTools(prev => {
       const newTools = { ...prev };
@@ -82,6 +112,10 @@ const ToolsScreen = () => {
     setError(null);
   };
 
+  const handleViewSpec = (spec) => {
+    setViewingSpec({ open: true, name: spec.name, content: spec.content });
+   };
+
   const handleFileChange = (event) => {
     const file = event.target.files[0];
     if (file) {
@@ -239,7 +273,25 @@ const ToolsScreen = () => {
       {tabIndex === 1 && (
         <Box>
           <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-            Upload a Swagger or OpenAPI specification file (JSON or YAML). All endpoints will be exposed as tools.
+            Upload a Swagger or OpenAPI specification file (JSON or YAML) or provide a URL.
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
+            <TextField
+              fullWidth
+              label="Fetch Spec from URL"
+              variant="outlined"
+              value={specUrl}
+              onChange={(e) => setSpecUrl(e.target.value)}
+              disabled={isFetchingSpec}
+            />
+            <Button variant="contained" onClick={handleFetchSpec} disabled={isFetchingSpec}>
+              {isFetchingSpec ? <CircularProgress size={24} /> : 'Fetch'}
+            </Button>
+          </Box>
+          <Divider sx={{ my: 2 }}>OR</Divider>
+
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            {/* Upload a Swagger or OpenAPI specification file (JSON or YAML). All endpoints will be exposed as tools. */}
           </Typography>
           <Button
             variant="outlined"
@@ -248,7 +300,7 @@ const ToolsScreen = () => {
             startIcon={<UploadFileIcon />}
             sx={{ mb: 2 }}
           >
-            Upload Spec File
+            Upload Spec File From Disk
             <input type="file" hidden accept=".json,.yaml,.yml" onChange={handleFileChange} />
           </Button>
           {swaggerSpecs.length > 0 && (
@@ -257,9 +309,15 @@ const ToolsScreen = () => {
                 <ListItem
                   key={spec.name}
                   secondaryAction={
-                    <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteSpec(spec.name)}>
-                      <DeleteIcon />
-                    </IconButton>
+                    <>
+                      <IconButton edge="end" aria-label="view" onClick={() => handleViewSpec(spec)} sx={{ mr: 1 }}>
+                        <VisibilityIcon />
+                      </IconButton>
+                      <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteSpec(spec.name)}>
+                        <DeleteIcon />
+                      </IconButton>
+                    </>
+
                   }
                 >
                   <ListItemText primary={spec.name} />
@@ -328,6 +386,12 @@ const ToolsScreen = () => {
         existingSelectedTools={toolsDialog.existingSelectedTools}
         onSaveSelectedTools={handleSaveSelectedTools}
       />
+      <SpecViewerModal
+        open={viewingSpec.open}
+        onClose={() => setViewingSpec({ open: false, name: '', content: '' })}
+        specName={viewingSpec.name}
+        specContent={viewingSpec.content}
+      />      
       <Button
         variant="contained"
         color="primary"
diff --git a/webapp/packages/webui/src/pages/ViewAgent.jsx b/webapp/packages/webui/src/pages/ViewAgent.jsx
@@ -21,6 +21,7 @@ import {
   DialogActions,
   DialogContent,
   DialogContentText,
+  IconButton,
   DialogTitle,  
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -30,12 +31,14 @@ import SaveIcon from '@mui/icons-material/Save';
 import WebIcon from '@mui/icons-material/Web';
 import ArticleIcon from '@mui/icons-material/Article';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Divider from '@mui/material/Divider';
 
 import { useAgentFlow } from './AgentCreationFlow/AgentCreationFlowContext';
 import agentService from '../services/agentService';
 import CodeEditor from '../components/CodeEditor';
+import SpecViewerModal from '../components/SpecViewerModal';
 
 const ViewAgent = () => {
   const { agentId } = useParams();
@@ -48,6 +51,7 @@ const ViewAgent = () => {
   const [isSaving, setIsSaving] = useState(false);
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);  
+  const [viewingSpec, setViewingSpec] = useState({ open: false, name: '', content: '' });
   
   // State for deployment
   const [deployment, setDeployment] = useState(null);
@@ -129,6 +133,10 @@ const ViewAgent = () => {
     setAgent(prev => ({...prev, [field]: value}));
   };
 
+  const handleViewSpec = (spec) => {
+    setViewingSpec({ open: true, name: spec.name, content: spec.content });
+};
+
   const updateContextAndNavigate = (path) => {
       // Update the context with the current agent state before navigating
       agentFlowContext.setDescription(agent.description);
@@ -258,7 +266,14 @@ const ViewAgent = () => {
                 {agent.swaggerSpecs.length > 0 ? (
                 <List dense>
                     {agent.swaggerSpecs.map(spec => (
-                        <ListItem key={spec.name}>
+                        <ListItem
+                            key={spec.name}
+                            secondaryAction={
+                                <IconButton edge="end" aria-label="view" onClick={() => handleViewSpec(spec)}>
+                                    <VisibilityIcon />
+                                </IconButton>
+                            }
+                        >
                             <ListItemIcon><ArticleIcon /></ListItemIcon>
                             <ListItemText primary={spec.name} />
                         </ListItem>
@@ -415,7 +430,13 @@ const ViewAgent = () => {
                     Delete
                 </Button>
             </DialogActions>
-        </Dialog>        
+        </Dialog> 
+        <SpecViewerModal
+            open={viewingSpec.open}
+            onClose={() => setViewingSpec({ open: false, name: '', content: '' })}
+            specName={viewingSpec.name}
+            specContent={viewingSpec.content}
+        />       
     </Paper>
   );
 };
diff --git a/webapp/packages/webui/src/services/agentService.js b/webapp/packages/webui/src/services/agentService.js
@@ -46,6 +46,29 @@ class AgentService {
     }
   }
 
+  async fetchSpecFromUrl(url) {
+    try {
+      const authHeaders = await this._getAuthHeaders();
+      const response = await fetch(`${API_BASE_URL}/specs/fetch`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          ...authHeaders,
+        },
+        body: JSON.stringify({ url }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.detail || 'Failed to fetch spec from URL.');
+      }
+      return data; // returns { name: string, content: string }
+    } catch (error) {
+      console.error('[AgentService] Error fetching spec from URL:', error);
+      throw error;
+    }
+  }
   async runCodeInSandbox(code, inputDict, tools, gofannonAgents) {
     
     const requestBody = {
@@ -266,4 +289,5 @@ class AgentService {
   }  
 }
 
+
 export default new AgentService();
