> ## Documentation Index
> Fetch the complete documentation index at: https://www.1password.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 1Password SDK tutorials and examples

export const HighlightCard = ({title, preheader, link, src, darkSrc, children, useButton = true}) => {
  return <div className="op-card-surface bg-white dark:bg-[var(--op-surface-card-dark)] rounded-xl shadow-sm flex flex-col h-full not-prose overflow-hidden mb-4">
      {preheader && <div className="bg-gray-50 dark:bg-white/5 border-b border-[var(--op-border-card-light)] dark:border-[var(--op-border-card-dark)] px-6 py-3">
          <span className="text-sm font-medium text-gray-600 dark:text-gray-400 block">{preheader}</span>
        </div>}
      <div className="p-6 flex flex-col flex-grow">
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2 mt-0 flex items-center gap-2">
          {src && <>
              {darkSrc ? <>
                  <span className="dark:hidden">
                    <Icon icon={src} size={32} />
                  </span>
                  <span className="hidden dark:inline">
                    <Icon icon={darkSrc} size={32} />
                  </span>
                </> : <Icon icon={src} size={32} />}
            </>}
          {title}
        </h3>
        <div className="text-gray-600 dark:text-gray-300 mb-6 flex-grow leading-relaxed">{children}</div>
        {link && <div className="mt-auto">
            {useButton ? <a href={link.to} className="inline-flex items-center justify-center bg-[var(--op-secure-blue)] hover:bg-[var(--op-secure-blue-hover)] text-[var(--op-white)] font-medium py-2 px-4 rounded-lg transition-colors no-underline text-sm">
                {link.text || "Learn more"}
              </a> : <a href={link.to} className="highlight-card-link font-medium hover:underline inline-flex items-center gap-1 group text-sm">
                {link.text || "Learn more"}
                <Icon icon="arrow-right" className="text-inherit" />
              </a>}
          </div>}
      </div>
    </div>;
};

## Tutorials

<Columns cols={2}>
  <HighlightCard title="Set up the JS SDK and fetch a secret from 1Password" link={{ to: "/sdks/setup-tutorial", text: "Learn more" }} preheader="" useButton={false}>
    <p>Learn how to get started using a service account with the 1Password JavaScript SDK by building a simple app that securely fetches a secret from your 1Password account.</p>
  </HighlightCard>

  <HighlightCard title="Integrate 1Password SDKs with AI agents" link={{ to: "/sdks/ai-agent", text: "Learn more" }} preheader="" useButton={false}>
    <p>Learn a workflow for integrating 1Password SDKs with AI agents.</p>
  </HighlightCard>
</Columns>

## Example projects

<Columns cols={3}>
  <HighlightCard title="Fetch an API key and authenticate to Twilio" link={{ to: "https://github.com/SimonBarendse/1password-sdks-rotation-demo/tree/main/message-service", text: "Learn more" }} preheader="" useButton={false}>
    <p>Build a simple app to read an API key from 1Password to use in your deployed services.</p>
  </HighlightCard>

  <HighlightCard title="Rotate an API key with AWS EventBridge" link={{ to: "https://github.com/SimonBarendse/1password-sdks-rotation-demo/tree/main/rotation-service", text: "Learn more" }} preheader="" useButton={false}>
    <p>Use 1Password SDKs with AWS EventBridge to automatically rotate secrets on a set schedule.</p>
  </HighlightCard>

  <HighlightCard title="Use 1Password as a backend for a web app" link={{ to: "https://github.com/1Password/solutions/tree/main/1password/onepassword_sdks/demo-inventory-tracker-webapp", text: "Learn more" }} preheader="" useButton={false}>
    <p>Collect sensitive information using a web form, store it securely in 1Password, then display non-sensitive details on a webpage.</p>
  </HighlightCard>

  <HighlightCard title="Migrate data between 1Password tenants" link={{ to: "https://github.com/1Password/solutions/tree/main/1password/onepassword_sdks/demo-vault-migration-webapp", text: "Learn more" }} preheader="" useButton={false}>
    <p>Create a web app that facilitates moving information between two 1Password accounts without writing any data to disk.</p>
  </HighlightCard>

  <HighlightCard title="Securely share files and markdown" link={{ to: "https://github.com/1Password/solutions/tree/main/1password/onepassword_sdks/demo-share-script", text: "Learn more" }} preheader="" useButton={false}>
    <p>Create a 1Password item from files in a directory of your choice for the purposes of securely sharing source code and a README.</p>
  </HighlightCard>

  <HighlightCard title="Securely onboard employees to Okta" link={{ to: "https://github.com/1Password/solutions/tree/main/1password/onepassword_sdks/demo-share-okta-user-script", text: "Learn more" }} preheader="" useButton={false}>
    <p>Create a new Okta user and generate a strong password for their Okta account, then securely share the credentials with your new team member.</p>
  </HighlightCard>
</Columns>