Full Code of agentsmd/agents.md for AI

Repository: agentsmd/agents.md
Branch: main
Commit: d1ac7f063d20
Files: 28
Total size: 60.2 KB

Directory structure:
gitextract_1fu22ajm/

├── .gitignore
├── AGENTS.md
├── LICENSE
├── README.md
├── components/
│   ├── AboutSection.tsx
│   ├── CodeExample.tsx
│   ├── CompatibilitySection.tsx
│   ├── ExampleListSection.tsx
│   ├── ExamplesSection.tsx
│   ├── FAQSection.tsx
│   ├── Footer.tsx
│   ├── Hero.tsx
│   ├── HowToUseSection.tsx
│   ├── Section.tsx
│   ├── WhySection.tsx
│   └── icons/
│       ├── ClipboardIcon.tsx
│       ├── CopyIcon.tsx
│       ├── GitHubIcon.tsx
│       ├── LinkIcon.tsx
│       └── UserIcon.tsx
├── next.config.ts
├── package.json
├── pages/
│   ├── _app.tsx
│   ├── _document.tsx
│   └── index.tsx
├── postcss.config.mjs
├── styles/
│   └── globals.css
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.*
!.env.example

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Sveltekit cache directory
.svelte-kit/

# vitepress build output
**/.vitepress/dist

# vitepress cache directory
**/.vitepress/cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# Firebase cache directory
.firebase/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v3
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# Vite logs files
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
 # Next.js and project-specific ignores
 .vercel
 /build
 next-env.d.ts
 *.pem
.vercel

# Misc
.DS_Store


================================================
FILE: AGENTS.md
================================================
# AGENTS Guidelines for This Repository

This repository contains a Next.js application located in the root of this repository. When
working on the project interactively with an agent (e.g. the Codex CLI) please follow
the guidelines below so that the development experience – in particular Hot Module
Replacement (HMR) – continues to work smoothly.

## 1. Use the Development Server, **not** `npm run build`

* **Always use `npm run dev` (or `pnpm dev`, `yarn dev`, etc.)** while iterating on the
  application.  This starts Next.js in development mode with hot-reload enabled.
* **Do _not_ run `npm run build` inside the agent session.**  Running the production
  build command switches the `.next` folder to production assets which disables hot
  reload and can leave the development server in an inconsistent state.  If a
  production build is required, do it outside of the interactive agent workflow.

## 2. Keep Dependencies in Sync

If you add or update dependencies remember to:

1. Update the appropriate lockfile (`package-lock.json`, `pnpm-lock.yaml`, `yarn.lock`).
2. Re-start the development server so that Next.js picks up the changes.

## 3. Coding Conventions

* Prefer TypeScript (`.tsx`/`.ts`) for new components and utilities.
* Co-locate component-specific styles in the same folder as the component when
  practical.

## 4. Useful Commands Recap

| Command            | Purpose                                            |
| ------------------ | -------------------------------------------------- |
| `npm run dev`      | Start the Next.js dev server with HMR.             |
| `npm run lint`     | Run ESLint checks.                                 |
| `npm run test`     | Execute the test suite (if present).               |
| `npm run build`    | **Production build – _do not run during agent sessions_** |

---

Following these practices ensures that the agent-assisted development workflow stays
fast and dependable.  When in doubt, restart the dev server rather than running the
production build.


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2025 OpenAI

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# AGENTS.md

![AGENTS.md logo](./public/og.png)

[AGENTS.md](https://agents.md) is a simple, open format for guiding coding agents.

Think of AGENTS.md as a README for agents: a dedicated, predictable place
to provide context and instructions to help AI coding agents work on your project.

Below is a minimal example of an AGENTS.md file:

```markdown
# Sample AGENTS.md file

## Dev environment tips
- Use `pnpm dlx turbo run where <project_name>` to jump to a package instead of scanning with `ls`.
- Run `pnpm install --filter <project_name>` to add the package to your workspace so Vite, ESLint, and TypeScript can see it.
- Use `pnpm create vite@latest <project_name> -- --template react-ts` to spin up a new React + Vite package with TypeScript checks ready.
- Check the name field inside each package's package.json to confirm the right name—skip the top-level one.

## Testing instructions
- Find the CI plan in the .github/workflows folder.
- Run `pnpm turbo run test --filter <project_name>` to run every check defined for that package.
- From the package root you can just call `pnpm test`. The commit should pass all tests before you merge.
- To focus on one step, add the Vitest pattern: `pnpm vitest run -t "<test name>"`.
- Fix any test or type errors until the whole suite is green.
- After moving files or changing imports, run `pnpm lint --filter <project_name>` to be sure ESLint and TypeScript rules still pass.
- Add or update tests for the code you change, even if nobody asked.

## PR instructions
- Title format: [<project_name>] <Title>
- Always run `pnpm lint` and `pnpm test` before committing.
```

## Website

This repository also includes a basic Next.js website hosted at https://agents.md/
that explains the project’s goals in a simple way, and featuring some examples.

### Running the app locally
1. Install dependencies:
   ```bash
   pnpm install
   ```
2. Start the development server:
   ```bash
   pnpm run dev
   ```
3. Open your browser and go to http://localhost:3000


================================================
FILE: components/AboutSection.tsx
================================================
import Section from "@/components/Section";

const AboutSection = () => (
  <Section title="About" className="pb-0" center maxWidthClass="max-w-3xl">
    <p className="max-w-3xl">
      AGENTS.md emerged from collaborative efforts across the AI software
      development ecosystem, including{" "}
      <a href="https://openai.com/codex/" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">OpenAI Codex</a>,{" "}
      <a href="https://ampcode.com" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Amp</a>,{" "}
      <a href="https://jules.google" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Jules from Google</a>,{" "}
      <a href="https://cursor.com" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Cursor</a>, and{" "}
      <a href="https://factory.ai" className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">Factory</a>.
    </p>

    <p className="max-w-3xl mt-4">
      We&rsquo;re committed to helping maintain and evolve this as an open format that benefits the entire developer community,
      regardless of which coding agent you use.
    </p>

    <p className="max-w-3xl mt-4">
      AGENTS.md is now stewarded by the{" "}
      <a href="https://aaif.io" className="underline hover:no-underline">
        Agentic AI Foundation
      </a>{" "}
      under the Linux Foundation.{" "}
      <a
        href="https://openai.com/index/agentic-ai-foundation/"
        className="underline hover:no-underline"
      >
        Learn more &rarr;
      </a>
    </p>

  </Section>
);

export default AboutSection;


================================================
FILE: components/CodeExample.tsx
================================================
import React from "react";
import ClipboardIcon from "./icons/ClipboardIcon";
import CopyIcon from "./icons/CopyIcon";

interface CodeExampleProps {
  /** Markdown content to display; falls back to default example if not provided */
  code?: string;
  /** Optional URL for "View on GitHub" link */
  href?: string;
  /** If true, render only the code block without the section wrapper */
  compact?: boolean;
  /** Override Tailwind height classes for the <pre> block */
  heightClass?: string;

  /**
   * When true, vertically center the content and copy button – useful for
   * single-line shell commands shown inside a short container (e.g. FAQ).
   */
  centerVertically?: boolean;
}

export const HERO_AGENTS_MD = `# AGENTS.md

## Setup commands
- Install deps: \`pnpm install\`
- Start dev server: \`pnpm dev\`
- Run tests: \`pnpm test\`

## Code style
- TypeScript strict mode
- Single quotes, no semicolons
- Use functional patterns where possible`;

const EXAMPLE_AGENTS_MD = `# Sample AGENTS.md file

## Dev environment tips
- Use \`pnpm dlx turbo run where <project_name>\` to jump to a package instead \
of scanning with \`ls\`.
- Run \`pnpm install --filter <project_name>\` to add the package to your \
workspace so Vite, ESLint, and TypeScript can see it.
- Use \`pnpm create vite@latest <project_name> -- --template react-ts\` to \
spin up a new React + Vite package with TypeScript checks ready.
- Check the name field inside each package's package.json to confirm the \
right name—skip the top-level one.

## Testing instructions
- Find the CI plan in the .github/workflows folder.
- Run \`pnpm turbo run test --filter <project_name>\` to run every check \
defined for that package.
- From the package root you can just call \`pnpm test\`. The commit should \
pass all tests before you merge.
- To focus on one step, add the Vitest pattern: \`pnpm vitest run -t "<test \
name>"\`.
- Fix any test or type errors until the whole suite is green.
- After moving files or changing imports, run \`pnpm lint --filter \
<project_name>\` to be sure ESLint and TypeScript rules still pass.
- Add or update tests for the code you change, even if nobody asked.

## PR instructions
- Title format: [<project_name>] <Title>
- Always run \`pnpm lint\` and \`pnpm test\` before committing.`;

/**
 * Very lightly highlight the Markdown without fully parsing it.
 */
function parseMarkdown(md: string): React.ReactNode[] {
  const lines = md.split("\n");
  const elements: React.ReactNode[] = [];

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    // Handle headers
    if (line.startsWith("# ") || line.startsWith("## ") || line.startsWith("### ")) {
      elements.push(
        <div key={i} className="font-bold">
          {line}
        </div>
      );
    } else if (line.startsWith("- ")) {
      // Handle list items with inline code
      elements.push(
        <div key={i}>
          {renderLineWithInlineCode(line)}
        </div>
      );
    } else if (line.trim() === "") {
      // Handle empty lines
      elements.push(<div key={i}>&nbsp;</div>);
    } else {
      // Handle regular lines with inline code
      elements.push(
        <div key={i}>
          {renderLineWithInlineCode(line)}
        </div>
      );
    }
  }

  return elements;
}

/**
 * Render a line with inline code highlighting
 */
function renderLineWithInlineCode(line: string): React.ReactNode {
  const parts = line.split(/(`[^`]+`)/g);

  return parts.map((part, index) => {
    if (part.startsWith("`") && part.endsWith("`")) {
      // This is inline code
      return (
        <span key={index} className="bg-gray-200 dark:bg-gray-800 px-1 rounded">
          {part}
        </span>
      );
    }
    // Regular text
    return part;
  });
}

/**
 * Markdown block for AGENTS.md examples.
 */
export default function CodeExample({
  code,
  href,
  compact = false,
  heightClass,
  centerVertically = false,
}: CodeExampleProps) {
  const md = code ?? EXAMPLE_AGENTS_MD;
  const [copied, setCopied] = React.useState(false);

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(md);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy to clipboard:", err);
    }
  };

  const content = (
    <>
      <div className="relative">
        <button
          onClick={copyToClipboard}
          className={`absolute right-3 p-2 rounded-md bg-transparent text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors z-10 cursor-pointer ${
            centerVertically ? "top-1/2 -translate-y-1/2" : "top-3"
          }`}
          aria-label="Copy to clipboard"
        >
          {copied ? (
            <svg
              className="w-4 h-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
          ) : (
            <CopyIcon className="w-4 h-4" />
          )}
        </button>
        <pre
          className={`relative rounded-lg bg-white dark:bg-black text-gray-800 dark:text-gray-100 text-xs leading-6 overflow-x-auto p-4 ${
            centerVertically ? "flex items-center" : ""
          } ${
            heightClass
              ? heightClass
              : compact
              ? ""
              : "min-h-[250px] max-h-[500px]"
          } border border-gray-200 dark:border-gray-700 shadow-sm`}
        >
          <code>
            {parseMarkdown(md)}
          </code>
        </pre>
      </div>
    </>
  );

  if (compact) {
    return <div className="w-full">{content}</div>;
  }

  return (
    <section className="px-6 pt-10 pb-24 bg-gray-50 dark:bg-gray-900/40">
      <div className="max-w-5xl mx-auto flex flex-col gap-6">
        <h2 className="text-3xl font-semibold tracking-tight">
          AGENTS.md in action
        </h2>
        {content}
      </div>
    </section>
  );
}


================================================
FILE: components/CompatibilitySection.tsx
================================================
import React, { useEffect, useMemo, useRef, useState } from "react";
import Image from "next/image";
import Section from "@/components/Section";

type AgentEntry = {
  name: string;
  url: string;
  from?: string;
  imageSrc?: string;
  imageSrcLight?: string;
  imageSrcDark?: string;
};

const agents: AgentEntry[] = [
  {
    name: "Codex",
    url: "https://openai.com/codex/",
    from: "OpenAI",
    imageSrc: "/logos/codex.svg",
  },
  {
    name: "Amp",
    url: "https://ampcode.com",
    imageSrc: "/logos/amp.svg",
  },
  {
    name: "Jules",
    url: "https://jules.google",
    from: "Google",
    imageSrc: "/logos/jules.svg",
  },
  {
    name: "Cursor",
    url: "https://cursor.com",
    imageSrc: "/logos/cursor.svg",
  },
  {
    name: "Factory",
    url: "https://factory.ai",
    imageSrc: "/logos/factory.svg",
  },
  {
    name: "RooCode",
    url: "https://roocode.com",
    imageSrc: "/logos/roocode.svg",
  },
  {
    name: "Aider",
    url: "https://aider.chat/docs/usage/conventions.html#always-load-conventions",
    imageSrc: "/logos/aider.svg",
  },
  {
    name: "Gemini CLI",
    url: "https://github.com/google-gemini/gemini-cli/blob/main/docs/get-started/configuration.md#available-settings-in-settingsjson",
    from: "Google",
    imageSrc: "/logos/gemini.svg",
  },
  {
    name: "goose",
    url: "https://github.com/block/goose",
    imageSrc: "/logos/goose.svg",
  },
  {
    name: "Kilo Code",
    url: "https://kilocode.ai/",
    imageSrc: "/logos/kilo-code.svg",
  },
  {
    name: "opencode",
    url: "https://opencode.ai/docs/rules/",
    imageSrc: "/logos/opencode.svg",
  },
  {
    name: "Phoenix",
    url: "https://phoenix.new/",
    imageSrc: "/logos/phoenix.svg",
  },
  {
    name: "Zed",
    url: "https://zed.dev/docs/ai/rules",
    imageSrc: "/logos/zed.svg",
  },
  {
    name: "Semgrep",
    url: "https://semgrep.dev",
    imageSrc: "/logos/semgrep.svg",
  },
  {
    name: "Warp",
    url: "https://docs.warp.dev/knowledge-and-collaboration/rules#project-scoped-rules-1",
    imageSrc: "/logos/warp.svg",
  },
  {
    name: "Coding agent",
    from: "GitHub Copilot",
    url: "https://gh.io/coding-agent-docs",
    imageSrc: "/logos/copilot.svg",
  },
  {
    name: "VS Code",
    url: "https://code.visualstudio.com/docs/editor/artificial-intelligence",
    imageSrcLight: "/logos/vscode-light.svg",
    imageSrcDark: "/logos/vscode-dark.svg",
  },
  {
    name: "Ona",
    url: "https://ona.com",
    imageSrcLight: "/logos/ona-light.svg",
    imageSrcDark: "/logos/ona-dark.svg",
  },
  {
    name: "Devin",
    from: "Cognition",
    url: "https://devin.ai",
    imageSrcLight: "/logos/devin-light.svg",
    imageSrcDark: "/logos/devin-dark.svg",
  },
  {
    name: "Windsurf",
    from: "Cognition",
    url: "https://windsurf.com",
    imageSrcLight: "/logos/windsurf-light.svg",
    imageSrcDark: "/logos/windsurf-dark.svg",
  },
  {
    name: "Autopilot & Coded Agents",
    from: "UiPath",
    url: "https://uipath.github.io/uipath-python",
    imageSrc: "/logos/uipath.svg",
  },
  {
    name: "Augment Code",
    url: "https://docs.augmentcode.com/cli/overview",
    imageSrc: "/logos/augment.svg",
  },
  {
    name: "Junie",
    from: "JetBrains",
    url: "https://jetbrains.com/junie",
    imageSrc: "/logos/junie.svg",
  },
];

const shuffleAgents = (items: AgentEntry[]) => {
  const copy = [...items];
  for (let i = copy.length - 1; i > 0; i -= 1) {
    const j = Math.floor(Math.random() * (i + 1));
    [copy[i], copy[j]] = [copy[j], copy[i]];
  }
  return copy;
};

type LogoItemProps = AgentEntry & {
  variant?: "marquee" | "grid";
};

function LogoItem({
  name,
  url,
  from,
  imageSrc,
  imageSrcLight,
  imageSrcDark,
  variant = "marquee",
}: LogoItemProps) {
  const baseClasses =
    variant === "grid"
      ? "flex h-full w-full min-w-0 items-center gap-4"
      : "flex h-20 min-w-[280px] items-center gap-4 pr-10";

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className={baseClasses}
    >
      <div className="flex h-16 w-16 items-center justify-center">
        {imageSrcLight && imageSrcDark ? (
          <>
            <Image
              src={imageSrcLight}
              alt={`${name} logo`}
              width={64}
              height={64}
              className="block h-16 w-16 dark:hidden"
            />
            <Image
              src={imageSrcDark}
              alt={`${name} logo`}
              width={64}
              height={64}
              className="hidden h-16 w-16 dark:block"
            />
          </>
        ) : imageSrc ? (
          <span
            aria-hidden
            className="block h-16 w-16 bg-gray-700 dark:bg-gray-400"
            style={{
              WebkitMaskImage: `url(${imageSrc})`,
              maskImage: `url(${imageSrc})`,
              WebkitMaskRepeat: "no-repeat",
              maskRepeat: "no-repeat",
              WebkitMaskSize: "contain",
              maskSize: "contain",
              WebkitMaskPosition: "center",
              maskPosition: "center",
            }}
          />
        ) : null}
      </div>
      <div className="flex flex-col justify-center text-left">
        <span className="text-xl font-semibold leading-tight text-gray-700 dark:text-gray-300">
          {name}
        </span>
        {from ? (
          <span className="text-sm text-gray-500 dark:text-gray-400">
            <span className="font-light">from</span>{" "}
            <span className="font-semibold">{from}</span>
          </span>
        ) : null}
      </div>
    </a>
  );
}

function LogoMarqueeRow({
  agents,
  isActive,
  duration,
  offset,
}: {
  agents: AgentEntry[];
  isActive: boolean;
  duration: number;
  offset?: number;
}) {
  const doubledAgents = useMemo(() => [...agents, ...agents], [agents]);

  if (doubledAgents.length === 0) {
    return null;
  }

  const trackStyle = {
    animationPlayState: isActive ? "running" : "paused",
    animationDelay: offset ? `${offset}s` : undefined,
    "--marquee-duration": `${duration}s`,
  } as React.CSSProperties;

  return (
    <div className="w-full overflow-hidden">
      <div
        className="logo-marquee-track flex items-center gap-8 py-3"
        style={trackStyle}
      >
        {doubledAgents.map((agent, index) => (
          <LogoItem key={`${agent.name}-${index}`} {...agent} />
        ))}
      </div>
    </div>
  );
}

export default function CompatibilitySection() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [isInView, setIsInView] = useState(false);
  const [shuffledAgents, setShuffledAgents] = useState<AgentEntry[]>(agents);
  const [showGrid, setShowGrid] = useState(false);

  useEffect(() => {
    setShuffledAgents(shuffleAgents(agents));
  }, []);

  useEffect(() => {
    if (showGrid) {
      setIsInView(false);
      return;
    }

    const node = containerRef.current;
    if (!node) {
      return;
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsInView(entry.isIntersecting && entry.intersectionRatio > 0);
      },
      {
        threshold: 0,
      }
    );

    observer.observe(node);

    if (typeof window !== "undefined") {
      const rect = node.getBoundingClientRect();
      const isVisible =
        rect.bottom >= 0 &&
        rect.right >= 0 &&
        rect.left <= window.innerWidth &&
        rect.top <= window.innerHeight;
      setIsInView(isVisible);
    }

    return () => {
      observer.disconnect();
    };
  }, [showGrid]);

  const [topRow, bottomRow] = useMemo(() => {
    const first: AgentEntry[] = [];
    const second: AgentEntry[] = [];

    shuffledAgents.forEach((agent, index) => {
      if (index % 2 === 0) {
        first.push(agent);
      } else {
        second.push(agent);
      }
    });

    return [first, second];
  }, [shuffledAgents]);

  return (
    <Section
      id="compatibility"
      title="One AGENTS.md works across many agents"
      className={`py-12 px-0 ${showGrid ? "" : "!px-0"}`}
      center
      maxWidthClass={showGrid ? "max-w-3xl" : "max-w-none"}
    >
      <div className="mx-auto max-w-3xl text-center">
        <p className="text-xl font-light text-gray-500 dark:text-gray-400 px-8">
          Your agent definitions are compatible with a growing ecosystem of AI
          coding agents and tools:
        </p>
      </div>
      {showGrid ? (
        <div
          id="supported-agents"
          className="mt-6 grid w-full grid-cols-2 gap-8 md:grid-cols-3"
        >
          {agents.map((agent) => (
            <LogoItem key={agent.name} {...agent} variant="grid" />
          ))}
        </div>
      ) : (
        <div
          ref={containerRef}
          className="mt-6 flex w-full flex-col gap-6"
          id="supported-agents"
        >
          <LogoMarqueeRow agents={topRow} isActive={isInView} duration={70} />
          <LogoMarqueeRow
            agents={bottomRow}
            isActive={isInView}
            duration={80}
            offset={-35}
          />
        </div>
      )}
      <div className="mt-4 text-center">
        <button
          type="button"
          onClick={() => setShowGrid((prev) => !prev)}
          className="mt-4 text-base font-medium underline hover:no-underline cursor-pointer"
          aria-controls="supported-agents"
          aria-expanded={showGrid}
        >
          {showGrid ? "Collapse supported agents" : "View all supported agents"}
        </button>
      </div>
    </Section>
  );
}


================================================
FILE: components/ExampleListSection.tsx
================================================
import React from "react";

// GitHub language colors for badge backgrounds
const LANG_BG_COLORS: Record<string, string> = {
  "TypeScript": "#3178c6",
  "Java": "#b07219",
  "Python": "#3572a5",
  "Rust": "#dea584",
  "C++": "#f34b7d",
};

interface RepoCardProps {
  /** e.g. "openai/codex" */
  name: string;
  /** Short 1-2 line summary */
  description: string;
  /** Primary language */
  language: string;
}

/** Hard-coded examples used for the marketing page. */
const REPOS: RepoCardProps[] = [
  {
    name: "openai/codex",
    description: "General-purpose CLI tooling for AI coding agents.",
    language: "Rust",
  },
  {
    name: "apache/airflow",
    description:
      "Platform to programmatically author, schedule, and monitor workflows.",
    language: "Python",
  },
  {
    name: "temporalio/sdk-java",
    description:
      "Java SDK for Temporal, workflow orchestration defined in code.",
    language: "Java",
  },
  {
    name: "PlutoLang/Pluto",
    description: "A superset of Lua 5.4 with a focus on general-purpose programming.",
    language: "C++",
  },
];

interface ExampleListSectionProps {
  contributorsByRepo?: Record<string, { avatars: string[]; total: number }>;
  standalone?: boolean; // if false wraps with its own section
}

const InnerGrid = ({
  contributorsByRepo = {},
}: {
  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
}) => (
  <>
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {REPOS.map((repo, key) => (
        <ExampleCard
          key={repo.name}
          repo={repo}
          avatars={contributorsByRepo[repo.name]?.avatars ?? []}
          hideOnSmall={key > 3}
          hideOnMedium={key > 2}
          totalContributors={
            contributorsByRepo[repo.name]?.total ??
            contributorsByRepo[repo.name]?.avatars.length ??
            0
          }
        />
      ))}
    </div>
    <div className="flex justify-center mt-6">
      <a
        href="https://github.com/search?q=path%3AAGENTS.md+NOT+is%3Afork+NOT+is%3Aarchived&type=code"
        className="text-base font-medium underline hover:no-underline"
      >
        View 60k+ examples on GitHub
      </a>
    </div>
  </>
);

const ExampleListSection = ({
  contributorsByRepo = {},
  standalone = false,
}: ExampleListSectionProps) => {
  if (standalone) {
    return (
      <div className="max-w-6xl mx-auto">
        <InnerGrid contributorsByRepo={contributorsByRepo} />
      </div>
    );
  }

  return (
    <section className="px-6 pb-12 -mt-36">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl font-semibold mb-6">Who uses AGENTS.md?</h2>
        <InnerGrid contributorsByRepo={contributorsByRepo} />
      </div>
    </section>
  );
};

interface ExampleCardPropsExtended {
  repo: RepoCardProps;
  avatars?: string[];
  totalContributors?: number;
  hideOnSmall?: boolean;
  hideOnMedium?: boolean;
}

function ExampleCard({
  repo,
  avatars = [],
  totalContributors = 0,
  hideOnSmall = false,
  hideOnMedium = false,
}: ExampleCardPropsExtended) {
  // Show top 3 contributors; ensure highest-ranked appears rightmost.
  const orderedAvatars = avatars.slice(0, 3).reverse();
  // Badge background color based on GitHub language colors
  const badgeBg = LANG_BG_COLORS[repo.language] ?? "#6b7280";

  return (
    <a
      href={`https://github.com/${repo.name}/blob/-/AGENTS.md`}
      target="_blank"
      rel="noopener noreferrer"
      className={`lg:aspect-video bg-white dark:bg-black border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm flex flex-col justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
        hideOnSmall
          ? "hidden lg:flex"
          : hideOnMedium
          ? "flex md:hidden lg:flex"
          : ""
      }`}
    >
      <div>
        <h3
          className="font-semibold text-lg leading-snug truncate"
          title={repo.name}
        >
          {repo.name}
        </h3>
        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
          {repo.description}
        </p>
      </div>

      <div className="flex items-end justify-between mt-4">
        <span
          className="text-xs font-semibold px-2 py-0.5 rounded"
          style={{ backgroundColor: badgeBg, color: "#fff" }}
        >
          {repo.language}
        </span>
        <div className="flex items-center justify-center">
          <div className="flex items-center justify-center -space-x-2">
            {orderedAvatars.length > 0
              ? orderedAvatars.map((url, i) => (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    key={i}
                    src={url}
                    alt="Contributor avatar"
                    className="w-6 h-6 rounded-full ring-2 ring-white dark:ring-gray-900 object-cover block shrink-0"
                  />
                ))
              : Array.from({ length: 3 }).map((_, i) => (
                  <span
                    key={i}
                    aria-hidden
                    className="w-6 h-6 rounded-full bg-gray-300 dark:bg-gray-700 ring-2 ring-white dark:ring-gray-900 block shrink-0"
                  />
                ))}
          </div>
          <span className="ml-2 text-xs font-semibold px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 translate-y-[1px]">
            + {totalContributors}
          </span>
        </div>
      </div>
    </a>
  );
}

export default ExampleListSection;


================================================
FILE: components/ExamplesSection.tsx
================================================
import React from "react";
import Section from "@/components/Section";
import CodeExample from "@/components/CodeExample";
import ExampleListSection from "@/components/ExampleListSection";

interface ExamplesSectionProps {
  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
}

export default function ExamplesSection({ contributorsByRepo }: ExamplesSectionProps) {
  return (
    <Section id="examples" title="Examples" className="py-12" center>
      {/* Wide code example */}
      <div className="mb-4">
        <CodeExample compact />
      </div>

      {/* Repo cards */}
      <ExampleListSection contributorsByRepo={contributorsByRepo} standalone />
    </Section>
  );
}


================================================
FILE: components/FAQSection.tsx
================================================
import React from "react";
import Section from "@/components/Section";
import CodeExample from "@/components/CodeExample";

interface FAQItem {
  question: string;
  answer: React.ReactNode;
}

export default function FAQ() {
  const faqItems: FAQItem[] = [
    {
      question: "Are there required fields?",
      answer:
        "No. AGENTS.md is just standard Markdown. Use any headings you like; the agent simply parses the text you provide.",
    },
    {
      question: "What if instructions conflict?",
      answer:
        "The closest AGENTS.md to the edited file wins; explicit user chat prompts override everything.",
    },
    {
      question: "Will the agent run testing commands found in AGENTS.md automatically?",
      answer:
        "Yes—if you list them. The agent will attempt to execute relevant programmatic checks and fix failures before finishing the task.",
    },
    {
      question: "Can I update it later?",
      answer: "Absolutely. Treat AGENTS.md as living documentation.",
    },
    {
      question: "How do I migrate existing docs to AGENTS.md?",
      answer: (
        <>
          <p className="mb-2">
            Rename existing files to AGENTS.md and create symbolic links for backward compatibility:
          </p>
          <div className="w-full flex justify-center">
            <CodeExample
              code="mv AGENT.md AGENTS.md && ln -s AGENTS.md AGENT.md"
              compact
              heightClass="min-h-[48px]"
              centerVertically
            />
          </div>
        </>
      ),
    },
    {
      question: "How do I configure Aider?",
      answer: (
        <>
          <p className="mb-2">
            Configure Aider to use AGENTS.md in <code>.aider.conf.yml</code>:
          </p>
          <div className="w-full flex justify-center">
            <CodeExample
              code="read: AGENTS.md"
              compact
              heightClass="min-h-[48px]"
              centerVertically
            />
          </div>
        </>
      ),
    },
    {
      question: "How do I configure Gemini CLI?",
      answer: (
        <>
          <p className="mb-2">
            Configure Gemini CLI to use AGENTS.md in <code>.gemini/settings.json</code>:
          </p>
          <div className="w-full flex justify-center">
            <CodeExample
              code='{
  "context": {
    "fileName": "AGENTS.md"
  },
}'
              compact
              heightClass="min-h-[48px]"
              centerVertically
            />
          </div>
        </>
      ),
    },
  ];

  return (
    <Section
      id="faq"
      title="FAQ"
      className="py-20"
      center
      maxWidthClass="max-w-3xl"
    >
      <div className="space-y-8 max-w-4xl mx-auto">
        {faqItems.map((item, index) => (
          <div key={index}>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
              {item.question}
            </h3>
            <div className="text-gray-600 dark:text-gray-400 leading-relaxed">
              {item.answer}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}


================================================
FILE: components/Footer.tsx
================================================
import React from "react";

export default function Footer() {
  return (
    <footer className="px-6 py-12 text-center text-sm text-gray-600 dark:text-gray-400 mt-24 bg-gray-50 dark:bg-gray-900/40 border-t border-gray-100 dark:border-gray-800">
      <p>
        Copyright © AGENTS.md a Series of LF Projects, LLC
        <br />
        For web site terms of use, trademark policy and other project policies please see{" "}
        <a href="https://lfprojects.org" target="_blank" className="underline hover:no-underline">
          https://lfprojects.org
        </a>
        .
      </p>
    </footer>
  );
}


================================================
FILE: components/Hero.tsx
================================================
import React from "react";
import CodeExample, { HERO_AGENTS_MD } from "@/components/CodeExample";
import GitHubIcon from "@/components/icons/GitHubIcon";

export default function Hero() {
  return (
    <header className="px-6 py-20 bg-gray-50 dark:bg-gray-900/40 border-b border-gray-100 dark:border-gray-800">
      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">
        {/*
          On large screens we want the primary CTA buttons to align with the
          bottom edge of the code block rendered in the right column. Making
          the left column a full-height flex container and pushing the CTA row
          to the bottom (via `lg:justify-between`) achieves this without
          disturbing the natural flow on small screens where the layout stacks
          vertically.
        */}
        <div className="flex flex-col items-start text-left sm:items-start max-w-prose">
          <h1 className="text-5xl md:text-6xl font-bold tracking-tight">AGENTS.md</h1>

          <p className="mt-2 text-lg leading-relaxed text-gray-700 dark:text-gray-300">
            A simple, open format for guiding coding agents,{" "}
            <br className="hidden sm:block" />
            used by over{" "}
            <a
              href="https://github.com/search?q=path%3AAGENTS.md+NOT+is%3Afork+NOT+is%3Aarchived&type=code"
              target="_blank"
              rel="noopener noreferrer"
              className="underline hover:no-underline"
            >
              60k open-source projects
            </a>
            .
          </p>

          <p className="mt-3 text-lg leading-relaxed text-gray-700 dark:text-gray-300 pr-4">
            Think of AGENTS.md as a <strong>README for agents</strong>: a dedicated,
            predictable place to provide the context and instructions to help AI coding agents work on your project.
          </p>

        <div className="mt-6 flex gap-4 flex-col sm:flex-row w-full sm:w-auto justify-center sm:justify-start">
          {/* Primary CTA — scroll to the Examples section */}
          <a
            href="#examples"
            className="inline-block px-5 py-3 rounded-full bg-black text-white dark:bg-white dark:text-black text-sm font-medium text-center hover:opacity-80"
          >
            Explore Examples
          </a>
          {/* Secondary CTA — view on GitHub */}
          <a
            href="https://github.com/agentsmd/agents.md"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-full border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800"
          >
            <GitHubIcon className="w-4 h-4 text-current" />
            View on GitHub
          </a>
        </div>
        </div>
        <div className="w-full md:max-w-none">
          <CodeExample
            compact
            heightClass="min-h-[160px] max-h-[300px]"
            code={HERO_AGENTS_MD}
            href="https://github.com/openai/codex/blob/main/AGENTS.md"
          />
        </div>
      </div>
    </header>
  );
}


================================================
FILE: components/HowToUseSection.tsx
================================================
import Section from "@/components/Section";
import React from "react";

export default function HowToUseSection() {
  const steps = [
    {
      title: "Add AGENTS.md",
      body: (
        <>
          Create an AGENTS.md file at the root of the repository. Most
          coding agents can even scaffold one for you if you ask nicely.
        </>
      ),
    },
    {
      title: "Cover what matters",
      body: (
        <>
          <p className="mb-2">Add sections that help an agent work effectively with your project. Popular choices:</p>
          <ul className="list-disc list-inside ml-4 space-y-1">
            <li>Project overview</li>
            <li>Build and test commands</li>
            <li>Code style guidelines</li>
            <li>Testing instructions</li>
            <li>Security considerations</li>
          </ul>
        </>
      ),
    },
    {
      title: "Add extra instructions",
      body: "Commit messages or pull request guidelines, security gotchas, large datasets, deployment steps: anything you’d tell a new teammate belongs here too.",
    },
    {
      title: "Large monorepo? Use nested AGENTS.md files for subprojects",
      body: (
        <>
          Place another AGENTS.md inside each package. Agents automatically read the nearest file in the directory tree, so the closest one takes precedence and every subproject can ship tailored instructions. For example, at time of writing the main OpenAI repo has 88 AGENTS.md files.
        </>
      ),
    },
  ];


  return (
    <Section
      title="How to use AGENTS.md?"
      className="py-12"
      center
      maxWidthClass="max-w-3xl"
    >
      <div className="space-y-6 text-left">
        {steps.map((s, idx) => (
          <div key={idx}>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
              {idx + 1}. {s.title}
            </h3>
            <div className="text-gray-700 dark:text-gray-300">
              {s.body}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}


================================================
FILE: components/Section.tsx
================================================
import React from "react";

export type SectionProps = React.PropsWithChildren<{
  id?: string;
  className?: string;
  title: string;
  /**
   * Center the heading and inner content horizontally (text-center).
   */
  center?: boolean;
  /**
   * Tailwind max-width utility to override the default container width.
   * e.g. "max-w-4xl".  Defaults to "max-w-6xl".
   */
  maxWidthClass?: string;
}>;

export default function Section({
  className = "",
  id,
  title,
  children,
  center = false,
  maxWidthClass = "max-w-6xl",
}: SectionProps) {
  const containerClasses = `${maxWidthClass} mx-auto flex flex-col gap-6`;

  return (
    <section id={id} className={className + " px-6"}>
      <div className={containerClasses}>
        <h2
          className={`text-3xl font-semibold tracking-tight ${center ? "mx-auto text-center" : ""}`}
        >
          {title}
        </h2>
        {/* prose class is useful for markdown-like content. For centered sections we don't want automatic left
            margin on headings, so we keep it unconditionally; centering is handled by parent flex alignment. */}
        <div className="prose prose-neutral dark:prose-invert max-w-none">
          {children}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: components/WhySection.tsx
================================================
import Section from "@/components/Section";
import React from "react";
import ClipboardIcon from "@/components/icons/ClipboardIcon";
import UserIcon from "@/components/icons/UserIcon";
import LinkIcon from "@/components/icons/LinkIcon";

export default function WhySection() {
  return (
    <Section
      id="why"
      title="Why AGENTS.md?"
      className="pt-24 pb-12"
      center
      maxWidthClass="max-w-3xl"
    >
      <div className="space-y-4">
        <p className="mb-4">
          README.md files are for humans: quick starts, project descriptions,
          and contribution guidelines.
        </p>
        <p className="mb-4">
          AGENTS.md complements this by containing the extra, sometimes detailed
          context coding agents need: build steps, tests, and conventions that
          might clutter a README or aren&rsquo;t relevant to human contributors.
        </p>
        <p className="mb-4">We intentionally kept it separate to:</p>
        <div className="flex flex-col gap-4">
          <div className="flex items-center gap-3">
            <ClipboardIcon />
            <p>
              <span className="font-semibold block">
                Give agents a clear, predictable place for instructions.
              </span>
            </p>
          </div>

          <div className="flex items-center gap-3">
            <UserIcon />
            <p>
              <span className="font-semibold block">
                Keep READMEs concise and focused on human contributors.
              </span>
            </p>
          </div>

          <div className="flex items-center gap-3">
            <LinkIcon />
            <p>
              <span className="font-semibold block">
                Provide precise, agent-focused guidance that complements
                existing README and docs.
              </span>
            </p>
          </div>
        </div>
        <p>
          Rather than introducing another proprietary file, we chose a name and
          format that could work for anyone. If you&rsquo;re building or using
          coding agents and find this helpful, feel free to adopt it.
        </p>
      </div>
    </Section>
  );
}


================================================
FILE: components/icons/ClipboardIcon.tsx
================================================
import React from "react";

export default function ClipboardIcon({ className = "w-6 h-6 flex-shrink-0" }) {
  return (
    <svg
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 2.25h6a.75.75 0 01.75.75v1.5h1.5A2.25 2.25 0 0120.25 6.75v12A2.25 2.25 0 0118 21h-12a2.25 2.25 0 01-2.25-2.25v-12A2.25 2.25 0 016 4.5h1.5V3a.75.75 0 01.75-.75z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 12h6m-6 4h6"
      />
    </svg>
  );
}



================================================
FILE: components/icons/CopyIcon.tsx
================================================
import React from "react";

export default function CopyIcon({ className = "w-4 h-4 flex-shrink-0" }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path d="M12.7587 2H16.2413C17.0463 1.99999 17.7106 1.99998 18.2518 2.04419C18.8139 2.09012 19.3306 2.18868 19.816 2.43597C20.5686 2.81947 21.1805 3.43139 21.564 4.18404C21.8113 4.66937 21.9099 5.18608 21.9558 5.74817C22 6.28936 22 6.95372 22 7.75868V11.2413C22 12.0463 22 12.7106 21.9558 13.2518C21.9099 13.8139 21.8113 14.3306 21.564 14.816C21.1805 15.5686 20.5686 16.1805 19.816 16.564C19.3306 16.8113 18.8139 16.9099 18.2518 16.9558C17.8906 16.9853 17.4745 16.9951 16.9984 16.9984C16.9951 17.4745 16.9853 17.8906 16.9558 18.2518C16.9099 18.8139 16.8113 19.3306 16.564 19.816C16.1805 20.5686 15.5686 21.1805 14.816 21.564C14.3306 21.8113 13.8139 21.9099 13.2518 21.9558C12.7106 22 12.0463 22 11.2413 22H7.75868C6.95372 22 6.28936 22 5.74818 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43597 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V12.7587C1.99999 11.9537 1.99998 11.2894 2.04419 10.7482C2.09012 10.1861 2.18868 9.66937 2.43597 9.18404C2.81947 8.43139 3.43139 7.81947 4.18404 7.43598C4.66937 7.18868 5.18608 7.09012 5.74817 7.04419C6.10939 7.01468 6.52548 7.00487 7.00162 7.00162C7.00487 6.52548 7.01468 6.10939 7.04419 5.74817C7.09012 5.18608 7.18868 4.66937 7.43598 4.18404C7.81947 3.43139 8.43139 2.81947 9.18404 2.43597C9.66937 2.18868 10.1861 2.09012 10.7482 2.04419C11.2894 1.99998 11.9537 1.99999 12.7587 2ZM9.00176 7L11.2413 7C12.0463 6.99999 12.7106 6.99998 13.2518 7.04419C13.8139 7.09012 14.3306 7.18868 14.816 7.43598C15.5686 7.81947 16.1805 8.43139 16.564 9.18404C16.8113 9.66937 16.9099 10.1861 16.9558 10.7482C17 11.2894 17 11.9537 17 12.7587V14.9982C17.4455 14.9951 17.7954 14.9864 18.089 14.9624C18.5274 14.9266 18.7516 14.8617 18.908 14.782C19.2843 14.5903 19.5903 14.2843 19.782 13.908C19.8617 13.7516 19.9266 13.5274 19.9624 13.089C19.9992 12.6389 20 12.0566 20 11.2V7.8C20 6.94342 19.9992 6.36113 19.9624 5.91104C19.9266 5.47262 19.8617 5.24842 19.782 5.09202C19.5903 4.7157 19.2843 4.40973 18.908 4.21799C18.7516 4.1383 18.5274 4.07337 18.089 4.03755C17.6389 4.00078 17.0566 4 16.2 4H12.8C11.9434 4 11.3611 4.00078 10.911 4.03755C10.4726 4.07337 10.2484 4.1383 10.092 4.21799C9.7157 4.40973 9.40973 4.7157 9.21799 5.09202C9.1383 5.24842 9.07337 5.47262 9.03755 5.91104C9.01357 6.20463 9.00489 6.55447 9.00176 7ZM5.91104 9.03755C5.47262 9.07337 5.24842 9.1383 5.09202 9.21799C4.7157 9.40973 4.40973 9.7157 4.21799 10.092C4.1383 10.2484 4.07337 10.4726 4.03755 10.911C4.00078 11.3611 4 11.9434 4 12.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9624C6.36113 19.9992 6.94342 20 7.8 20H11.2C12.0566 20 12.6389 19.9992 13.089 19.9624C13.5274 19.9266 13.7516 19.8617 13.908 19.782C14.2843 19.5903 14.5903 19.2843 14.782 18.908C14.8617 18.7516 14.9266 18.5274 14.9624 18.089C14.9992 17.6389 15 17.0566 15 16.2V12.8C15 11.9434 14.9992 11.3611 14.9624 10.911C14.9266 10.4726 14.8617 10.2484 14.782 10.092C14.5903 9.7157 14.2843 9.40973 13.908 9.21799C13.7516 9.1383 13.5274 9.07337 13.089 9.03755C12.6389 9.00078 12.0566 9 11.2 9H7.8C6.94342 9 6.36113 9.00078 5.91104 9.03755Z" />
    </svg>
  );
}


================================================
FILE: components/icons/GitHubIcon.tsx
================================================
import React from "react";

interface GitHubIconProps {
  className?: string;
}

// The path data is the official GitHub mark (see https://github.com/logos).
export default function GitHubIcon({ className = "w-4 h-4" }: GitHubIconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 98 96"
      className={className}
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
        fill="currentColor"
      />
    </svg>
  );
}


================================================
FILE: components/icons/LinkIcon.tsx
================================================
import React from "react";

export default function LinkIcon({ className = "w-6 h-6 flex-shrink-0" }) {
  return (
    <svg
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M13.828 10.172a4 4 0 015.657 5.656l-3.535 3.535a4 4 0 01-5.657-5.656l1.414-1.415"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M10.172 13.828a4 4 0 01-5.657-5.656l3.535-3.535a4 4 0 015.657 5.656l-1.414 1.415"
      />
    </svg>
  );
}



================================================
FILE: components/icons/UserIcon.tsx
================================================
import React from "react";

export default function UserIcon({ className = "w-6 h-6 flex-shrink-0" }) {
  return (
    <svg
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4 20v-1a4 4 0 014-4h8a4 4 0 014 4v1"
      />
    </svg>
  );
}



================================================
FILE: next.config.ts
================================================
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: true,
};

export default nextConfig;


================================================
FILE: package.json
================================================
{
  "name": "agents.md",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tailwindcss/postcss": "4.1.11",
    "@vercel/analytics": "^1.5.0",
    "next": "16.1.0",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "tailwindcss": "4.1.11"
  },
  "devDependencies": {
    "@svgr/webpack": "^8.1.0",
    "@types/node": "20",
    "@types/react": "19",
    "@types/react-dom": "19",
    "typescript": "5"
  },
  "packageManager": "pnpm@9.15.1+sha256.9e534e70afef06374f6126b44bda5760947135ce16a30aef1010e965fb7e3e3e"
}


================================================
FILE: pages/_app.tsx
================================================
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import { Analytics } from "@vercel/analytics/next";
export default function App({ Component, pageProps }: AppProps) {
  return <>
    <Head>
      <title>AGENTS.md</title>
      <meta name="description" content="AGENTS.md is a simple, open format for guiding coding agents, used by over 60k open-source projects. Think of it as a README for agents." />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content="AGENTS.md" />
      <meta name="twitter:description" content="AGENTS.md is a simple, open format for guiding coding agents. Think of it as a README for agents." />
      <meta name="twitter:image" content="https://agents.md/og.png" />
      <meta name="twitter:domain" content="agents.md" />
      <meta name="twitter:url" content="https://agents.md" />
      <meta property="og:type" content="website" />
      <meta property="og:title" content="AGENTS.md" />
      <meta property="og:description" content="AGENTS.md is a simple, open format for guiding coding agents. Think of it as a README for agents." />
      <meta property="og:image" content="https://agents.md/og.png" />
    </Head>
    <Component {...pageProps} />
    <Analytics />
  </>;
}


================================================
FILE: pages/_document.tsx
================================================
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link
          rel="icon"
          href="/favicon-light.png"
          media="(prefers-color-scheme: light)"
        />
        <link
          rel="icon"
          href="/favicon-dark.png"
          media="(prefers-color-scheme: dark)"
        />
      </Head>
      <body className="antialiased">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


================================================
FILE: pages/index.tsx
================================================
import React from "react";

import Hero from "@/components/Hero";
import Footer from "@/components/Footer";
import FAQSection from "@/components/FAQSection";
import HowToUseSection from "@/components/HowToUseSection";
import ExamplesSection from "@/components/ExamplesSection";
import CompatibilitySection from "@/components/CompatibilitySection";
import { GetStaticProps } from "next";
import WhySection from "@/components/WhySection";
import AboutSection from "@/components/AboutSection";

interface LandingPageProps {
  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
}

export default function LandingPage({ contributorsByRepo }: LandingPageProps) {
  return (
    <div className="flex flex-col min-h-screen items-stretch font-sans">
      <main>
        <Hero />
        <WhySection />
        <CompatibilitySection />
        <ExamplesSection contributorsByRepo={contributorsByRepo} />
        <HowToUseSection />
        <div className="flex-1 flex flex-col gap-4 mt-16">
          <AboutSection />
          <FAQSection />
        </div>
      </main>

      <Footer />
    </div>
  );
}

// Simple in-memory cache. In production this avoids refetching during
// the Node.js process lifetime, while in development it prevents hitting
// the GitHub rate-limit when you refresh the page a few times.
let cachedContributors:
  | {
      data: Record<string, { avatars: string[]; total: number }>;
      fetchedAt: number; // epoch millis
    }
  | undefined;

export const getStaticProps: GetStaticProps<LandingPageProps> = async () => {
  // List of repositories displayed in ExampleListSection. Keep in sync with
  // the REPOS constant in that component.
  const repoNames = [
    "openai/codex",
    "apache/airflow",
    "temporalio/sdk-java",
    "PlutoLang/Pluto",
  ];

  // If we fetched within the last 12 hours, reuse the cached data.
  // This drastically cuts down on unauthenticated GitHub API requests
  // during local development (limit: 60 req / hr).
  const TWELVE_HOURS_MS = 12 * 60 * 60 * 1000;
  const now = Date.now();

  if (
    cachedContributors &&
    now - cachedContributors.fetchedAt < TWELVE_HOURS_MS
  ) {
    return {
      props: {
        contributorsByRepo: cachedContributors.data,
      },
      // No need to revalidate until the cache window expires.
      // (Next.js will still obey the value, it just determines the earliest
      //  time a background revalidation *could* run.)
      revalidate: 60 * 60, // 1 hour
    };
  }

  const contributorsByRepo: Record<
    string,
    { avatars: string[]; total: number }
  > = {};

  // Build common headers for GitHub API requests. We add the Authorization
  // header only when an access token is present. Supplying an empty
  // `Authorization` header would prompt GitHub to treat the request as
  // unauthenticated, so we include it conditionally.
  const baseHeaders: Record<string, string> = {
    "User-Agent": "agents-md-site",
    Accept: "application/vnd.github+json",
  };

  if (process.env.GH_AUTH_TOKEN) {
    baseHeaders["Authorization"] = `Bearer ${process.env.GH_AUTH_TOKEN}`;
  }

  for (const fullName of repoNames) {
    try {
      // Fetch top 3 contributor avatars
      const avatarsRes = await fetch(
        `https://api.github.com/repos/${fullName}/contributors?per_page=3`,
        {
          headers: baseHeaders,
        }
      );

      const avatarsData = avatarsRes.ok
        ? ((await avatarsRes.json()) as Array<{ avatar_url: string }>)
        : [];

      const avatars = avatarsData.slice(0, 3).map((c) => c.avatar_url);

      // Fetch contributor count (using per_page=1 to inspect Link header)
      let total = avatarsData.length; // fallback
      try {
        const countRes = await fetch(
          `https://api.github.com/repos/${fullName}/contributors?per_page=1&anon=1`,
          {
            headers: baseHeaders,
          }
        );

        const link = countRes.headers.get("link");
        if (link && /rel="last"/.test(link)) {
          const match = link.match(/&?page=(\d+)>; rel="last"/);
          if (match?.[1]) {
            total = parseInt(match[1], 10);
          }
        } else {
          const oneData = countRes.ok ? ((await countRes.json()) as any[]) : [];
          total = oneData.length;
        }
      } catch {
        // ignore errors, keep fallback
        console.error(`Error fetching contributors for ${fullName}`);
      }

      contributorsByRepo[fullName] = {
        avatars,
        total,
      };
    } catch {
      console.error(`Error fetching contributors for ${fullName}`);
      contributorsByRepo[fullName] = { avatars: [], total: 0 };
    }
  }

  cachedContributors = {
    data: contributorsByRepo,
    fetchedAt: Date.now(),
  };

  return {
    props: {
      contributorsByRepo,
    },
    // Revalidate every 24 hours in production. The in-memory cache prevents
    // us from hitting the limit during development between dev server restarts.
    revalidate: 60 * 60 * 24,
  };
};


================================================
FILE: postcss.config.mjs
================================================
const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;


================================================
FILE: styles/globals.css
================================================
@import "tailwindcss";

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-Regular.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-RegularItalic.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: normal;
  font-weight: 500;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-Medium.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: italic;
  font-weight: 500;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-MediumItalic.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: normal;
  font-weight: 600;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-Semibold.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: italic;
  font-weight: 600;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-SemiboldItalic.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-Bold.woff2')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'OpenAI Sans';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.openai.com/common/fonts/openai-sans/OpenAISans-BoldItalic.woff2')
    format('woff2');
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --font-sans: 'OpenAI Sans', Arial, Helvetica, sans-serif;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: 'OpenAI Sans', Arial, Helvetica, sans-serif;
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

/* Ensure code blocks wrap and do not scroll horizontally */
pre {
  overflow-x: visible;
  white-space: pre-wrap;
  word-break: break-word;
}

code {
  white-space: pre-wrap;
  word-break: break-word;
}

.logo-marquee-track {
  width: max-content;
  animation: logo-marquee-scroll var(--marquee-duration, 70s) linear infinite;
  will-change: transform;
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
  }
}


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}