> ## Documentation Index > Fetch the complete documentation index at: https://docs.theswarm.com/llms.txt > Use this file to discover all available pages before exploring further. # API Query Translator > Transforms natural language requests into accurate OpenSearch DSL queries for The Swarm API using AI-powered interpretation. export const SwarmQueryTranslator = () => { const [query, setQuery] = useState(""); const [result, setResult] = useState(""); const [loading, setLoading] = useState(false); const [queryType, setQueryType] = useState("profiles"); const [copied, setCopied] = useState(false); const [currentPlaceholderIndex, setCurrentPlaceholderIndex] = useState(0); const [displayedPlaceholder, setDisplayedPlaceholder] = useState(""); const [isTyping, setIsTyping] = useState(false); const [isFading, setIsFading] = useState(false); const placeholders = ["Find CTOs in fintech startups in London", "Show companies in healthcare with more than 100 employees", "Find data scientists at AI companies in New York"]; useEffect(() => { const interval = setInterval(() => { const nextIndex = (currentPlaceholderIndex + 1) % placeholders.length; setCurrentPlaceholderIndex(nextIndex); setIsFading(true); setTimeout(() => { setIsFading(false); setIsTyping(true); const targetPlaceholder = placeholders[nextIndex]; let currentText = ""; let charIndex = 0; const typeInterval = setInterval(() => { if (charIndex < targetPlaceholder.length) { currentText += targetPlaceholder[charIndex]; setDisplayedPlaceholder(currentText); charIndex++; } else { clearInterval(typeInterval); setIsTyping(false); } }, 30); }, 350); }, 3500); return () => clearInterval(interval); }, [currentPlaceholderIndex, placeholders.length]); useEffect(() => { setDisplayedPlaceholder(placeholders[0]); }, []); const handleSubmit = async () => { if (!query.trim()) return; setLoading(true); setResult(""); try { const response = await fetch(`${API_BASE}/api/convert`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: query.trim(), type: queryType, provider: "openai" }) }); const data = await response.json().catch(() => null); if (response.ok && data?.success) { setResult(JSON.stringify(data.query, null, 2)); } else { setResult(`Error: ${data?.error || `Request failed (status ${response.status})`}`); } } catch (error) { setResult("Failed to connect to server (network or CORS). In DevTools → Network, check the /api/convert request — Mintlify preview hosts must be allowlisted on the API."); } finally { setLoading(false); } }; const handleKeyPress = e => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { handleSubmit(); } }; const copyToClipboard = async () => { if (!result) return; try { await navigator.clipboard.writeText(result); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch (error) { console.error("Failed to copy to clipboard:", error); } }; const renderJSON = text => { if (!text) return null; if (text.startsWith("Error:")) { return
{text}
; } try { const jsonObj = JSON.parse(text); const renderValue = (value, indent = 0) => { const spaces = (" ").repeat(indent); if (value === null) { return null; } if (typeof value === "boolean") { return {String(value)}; } if (typeof value === "number") { return {value}; } if (typeof value === "string") { return "{value}"; } if (Array.isArray(value)) { if (value.length === 0) { return <> [ ] ; } return <> [
{value.map((item, index) =>
{spaces} {renderValue(item, indent + 1)} {index < value.length - 1 && ,}
)}
{spaces}] ; } if (typeof value === "object") { const keys = Object.keys(value); if (keys.length === 0) { return <> {`{`} {`}`} ; } return <> {`{`}
{keys.map((key, index) =>
{spaces} "{key}" : {renderValue(value[key], indent + 1)} {index < keys.length - 1 && ,}
)}
{spaces}{`}`} ; } return String(value); }; return renderValue(jsonObj); } catch (e) { return
{text}
; } }; return
{}
{}