spb/ai-atlas

1import type { Metadata } from 'next';2import Link from 'next/link';3import { Dash, IntelListing, str } from '@/components/intelligence/listing-table';4import { EntityBadge } from '@/components/ui/badges';5import { EntityLink, QualityMark } from '@/components/ui/entity';6import { api } from '@/lib/api';7import { fmtAgo, fmtInt, num } from '@/lib/format';8import { routes, SITE_NAME, SITE_URL } from '@/lib/site';910export const metadata: Metadata = { title: 'AI tools, products and MCP servers', description: 'Developer tools, products and MCP servers in the atlas with category, language, license, stars and publisher from their official sources.', alternates: { canonical: routes.tools() }, openGraph: { title: `AI tools | ${SITE_NAME}`, url: `${SITE_URL}${routes.tools()}`, siteName: SITE_NAME } };11export const revalidate = 300;1213export default async function ToolsPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {14  const sp = await searchParams;15  return (16    <IntelListing17      title="Tools"18      eyebrow="Agents & tools"19      lede={<>Coding tools, MCP servers and products built on the models above. Metadata comes from repositories, package registries and official pages. Agents have their own listing at <Link href={routes.agents()} className="link">/agents</Link>.</>}20      basePath="/tools"21      searchParams={sp}22      fetch={(q) => api.explore('tool', q)}23      sorts={[24        { value: 'updated', label: 'Recently updated' },25        { value: 'stars', label: 'Stars' },26        { value: 'name', label: 'Name' },27        { value: 'quality', label: 'Data quality' },28      ]}29      filters={sp.org ? [{ kind: 'hidden', name: 'org', value: sp.org }] : []}30      connectors={['github (tool repositories)', 'pypi / npm', 'official product pages']}31      emptyHint={<>The <span className="mono">tool</span> type is declared but no connector has produced a row yet — the navigation lists this page under Agents &amp; Tools for that reason. In the meantime, related software is under <Link href={routes.frameworks()} className="link">Frameworks</Link> and <Link href={routes.exploreType('repository')} className="link">Repositories</Link>.</>}32      columns={[33        {34          key: 'name',35          label: 'Tool',36          primary: true,37          render: (e) => (38            <>39              <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">40                <EntityLink e={e} />41                <EntityBadge type={e.entity_type} small />42              </span>43              {e.description && <span className="block max-w-md truncate text-xs text-ink-3">{e.description}</span>}44            </>45          ),46        },47        { key: 'kind', label: 'Category', className: 'text-ink-2', render: (e) => str(e.attributes?.category) ?? str(e.attributes?.kind) ?? <Dash /> },48        { key: 'language', label: 'Language', className: 'text-ink-2', render: (e) => str(e.attributes?.language) ?? <Dash /> },49        { key: 'stars', label: 'Stars', num: true, className: 'tnum', render: (e) => (num(e.attributes?.['metric.stars']) === null ? <Dash /> : fmtInt(e.attributes['metric.stars'])) },50        { key: 'license', label: 'Licence', className: 'max-w-[10rem] truncate text-ink-2', render: (e) => str(e.attributes?.license) ?? <Dash /> },51        { key: 'org', label: 'Organization', className: 'text-ink-2', render: (e) => (e.organization ? <Link href={routes.entity({ entity_type: 'company', slug: e.organization.slug })} className="hover:text-accent">{e.organization.name}</Link> : <Dash />) },52        { key: 'updated', label: 'Updated', className: 'text-ink-2 whitespace-nowrap', render: (e) => <span title={e.updated_at}>{fmtAgo(e.updated_at)}</span> },53        { key: 'quality', label: 'Quality', num: true, render: (e) => <QualityMark q={e.quality?.score} /> },54      ]}55      note="Tools cover several entity types (tool, MCP server, product) — the badge on each row says which."56    />57  );58}59