import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import { Avatar, Box, Text, Link, Heading, Spinner } from "@primer/react";
import {
OrganizationIcon,
LocationIcon,
LinkIcon,
MailIcon,
PeopleIcon,
RepoIcon,
PersonIcon,
} from "@primer/octicons-react";
import { AppProvider } from "../../components/AppProvider";
import { useMcpApp } from "../../hooks/useMcpApp";
interface UserData {
login: string;
avatar_url?: string;
details?: {
name?: string;
company?: string;
location?: string;
blog?: string;
email?: string;
twitter_username?: string;
public_repos?: number;
followers?: number;
following?: number;
};
}
function AvatarWithFallback({ src, login, size }: { src?: string; login: string; size: number }) {
const [imgError, setImgError] = useState(false);
if (!src || imgError) {
return (
<Box
sx={{
width: size,
height: size,
borderRadius: "50%",
bg: "accent.subtle",
display: "flex",
alignItems: "center",
justifyContent: "center",
mr: 3,
flexShrink: 0,
}}
>
<PersonIcon size={size * 0.6} />
</Box>
);
}
return (
<Avatar
src={src}
size={size}
sx={{ mr: 3 }}
onError={() => setImgError(true)}
/>
);
}
function UserCard({ user }: { user: UserData }) {
const d = user.details || {};
return (
<Box
borderWidth={1}
borderStyle="solid"
borderColor="border.default"
borderRadius={2}
bg="canvas.subtle"
p={3}
maxWidth={400}
>
{/* Header with avatar and name */}
<Box display="flex" alignItems="center" mb={3} pb={3} borderBottomWidth={1} borderBottomStyle="solid" borderBottomColor="border.default">
<AvatarWithFallback src={user.avatar_url} login={user.login} size={48} />
<Box>
<Heading as="h2" sx={{ fontSize: 2, mb: 0 }}>
{d.name || user.login}
</Heading>
<Text sx={{ color: "fg.muted", fontSize: 1 }}>@{user.login}</Text>
</Box>
</Box>
{/* Info grid */}
<Box display="grid" sx={{ gridTemplateColumns: "auto 1fr", gap: 2, fontSize: 1 }}>
{d.company && (
<>
<Box sx={{ color: "fg.muted" }}><OrganizationIcon size={16} /></Box>
<Text>{d.company}</Text>
</>
)}
{d.location && (
<>
<Box sx={{ color: "fg.muted" }}><LocationIcon size={16} /></Box>
<Text>{d.location}</Text>
</>
)}
{d.blog && (
<>
<Box sx={{ color: "fg.muted" }}><LinkIcon size={16} /></Box>
<Link href={d.blog} target="_blank">{d.blog}</Link>
</>
)}
{d.email && (
<>
<Box sx={{ color: "fg.muted" }}><MailIcon size={16} /></Box>
<Link href={`mailto:${d.email}`}>{d.email}</Link>
</>
)}
</Box>
{/* Stats */}
<Box display="flex" justifyContent="space-around" mt={3} pt={3} borderTopWidth={1} borderTopStyle="solid" borderTopColor="border.default">
<Box sx={{ textAlign: "center" }}>
<Text sx={{ fontWeight: "bold", fontSize: 2, display: "block" }}>
<RepoIcon size={16} /> {d.public_repos ?? 0}
</Text>
<Text sx={{ color: "fg.muted", fontSize: 0 }}>Repos</Text>
</Box>
<Box sx={{ textAlign: "center" }}>
<Text sx={{ fontWeight: "bold", fontSize: 2, display: "block" }}>
<PeopleIcon size={16} /> {d.followers ?? 0}
</Text>
<Text sx={{ color: "fg.muted", fontSize: 0 }}>Followers</Text>
</Box>
<Box sx={{ textAlign: "center" }}>
<Text sx={{ fontWeight: "bold", fontSize: 2, display: "block" }}>
{d.following ?? 0}
</Text>
<Text sx={{ color: "fg.muted", fontSize: 0 }}>Following</Text>
</Box>
</Box>
</Box>
);
}
function GetMeApp() {
const { error, toolResult } = useMcpApp({
appName: "github-mcp-server-get-me",
});
if (error) {
return <Text sx={{ color: "danger.fg" }}>Error: {error.message}</Text>;
}
if (!toolResult) {
return (
<Box display="flex" alignItems="center" gap={2}>
<Spinner size="small" />
<Text sx={{ color: "fg.muted" }}>Loading user data...</Text>
</Box>
);
}
// Parse user data from tool result
const textContent = toolResult.content?.find((c: { type: string }) => c.type === "text");
if (!textContent || !("text" in textContent)) {
return <Text sx={{ color: "danger.fg" }}>No user data in response</Text>;
}
try {
const userData = JSON.parse(textContent.text as string) as UserData;
return <UserCard user={userData} />;
} catch {
return <Text sx={{ color: "danger.fg" }}>Failed to parse user data</Text>;
}
}
createRoot(document.getElementById("root")!).render(
<StrictMode>
<AppProvider>
<GetMeApp />
</AppProvider>
</StrictMode>
);
