Skip to main content
Glama
APIKeyDisplay.tsx3.03 kB
'use client' import { useState } from 'react' interface APIKeyDisplayProps { apiKey: string } /** * Component to display full API key with copy functionality * Used when showing the API key for the first (and only) time */ export default function APIKeyDisplay({ apiKey }: APIKeyDisplayProps) { const [copied, setCopied] = useState(false) const handleCopy = async () => { try { await navigator.clipboard.writeText(apiKey) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (error) { console.error('Failed to copy to clipboard:', error) } } return ( <div className="space-y-4"> {/* API Key Display */} <div className="relative"> <div className="bg-gray-900 rounded-lg p-4 font-mono text-sm text-green-400 overflow-x-auto"> {apiKey} </div> <button onClick={handleCopy} className="absolute top-2 right-2 inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors" > {copied ? ( <> <svg className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> </svg> Copied! </> ) : ( <> <svg className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> Copy </> )} </button> </div> {/* Security Warning */} <div className="bg-red-50 border-l-4 border-red-400 p-4"> <div className="flex"> <div className="flex-shrink-0"> <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor"> <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" /> </svg> </div> <div className="ml-3"> <h3 className="text-sm font-medium text-red-800"> This is the only time you&apos;ll see this key </h3> <div className="mt-2 text-sm text-red-700"> <p> Please copy and save this API key in a secure location now. You won&apos;t be able to view it again. If you lose this key, you&apos;ll need to regenerate it. </p> </div> </div> </div> </div> </div> ) }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/darrentmorgan/hostaway-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server