@font-face {
  font-family: 'Styrene Display';
  src: url('https://www-cdn.anthropic.com/e8f9c8ca51b03efb6315db351446fc972ab15abe/StyreneA-Medium-Web.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Styrene Display';
  src: url('https://www-cdn.anthropic.com/e8f9c8ca51b03efb6315db351446fc972ab15abe/StyreneA-Medium-Web.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Styrene';
  src: url('https://www-cdn.anthropic.com/6f87b6d99aefde021ac24f21295bf9e70f71472f/StyreneBLC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}


@font-face {
  font-family: 'Styrene';
  src: url('https://www-cdn.anthropic.com/6f87b6d99aefde021ac24f21295bf9e70f71472f/StyreneBLC-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
 
 @font-face {
  font-family: 'Styrene';
  src: url('https://www-cdn.anthropic.com/3611e9e4aaaf466dbd47e2686f561e7de694cb6c/StyreneBLC-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}
 

@font-face {
  font-family: 'Tiempos';
  src: url('https://www-cdn.anthropic.com/c3e09cefbfeb4e5eaca56b7bc8b9a1aa1aeda025/TiemposText-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Tiempos';
  src: url('https://www-cdn.anthropic.com/b198ca4e31a323b2abb84b3eeeb1eed1f471afa0/TiemposText-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Tiempos';
  src: url('https://www-cdn.anthropic.com/b198ca4e31a323b2abb84b3eeeb1eed1f471afa0/TiemposText-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Copernicus';
  src: url('https://www-cdn.anthropic.com/db30aec85c7615f4a4d3e23c0c941674ea67f8f5/Copernicus-Book.woff2') format('woff2');
  font-weight: 300; /* Assuming 300 is the lightest available weight */
  font-style: normal;
}

/* Color variables copied from https://github.com/anthropics/apps/blob/main/packages/ui/themes/generated/theme-colors.css */
:root {
  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
  --constant-book-cloth: 15 52.3% 58%;
  --constant-clay: 15 63.1% 59.6%;
  --constant-kraft: 25 49.7% 66.5%;
  --constant-manilla: 40 54% 82.9%;
  --constant-slate-000: 0 0% 100%;
  --constant-slate-050: 48 33.3% 97.1%;
  --constant-slate-100: 53 28.6% 94.5%;
  --constant-slate-1000: 60 3.4% 5.7%;
  --constant-slate-150: 48 25% 92.2%;
  --constant-slate-200: 50 20.7% 88.6%;
  --constant-slate-250: 51 16.5% 84.5%;
  --constant-slate-300: 50 11.5% 79.6%;
  --constant-slate-350: 50 9% 73.7%;
  --constant-slate-400: 49 6.5% 66.9%;
  --constant-slate-450: 48 4.8% 59.2%;
  --constant-slate-500: 53 3.2% 51.4%;
  --constant-slate-550: 51 3.1% 43.7%;
  --constant-slate-600: 48 2.7% 35.9%;
  --constant-slate-650: 48 3.4% 29.2%;
  --constant-slate-700: 60 2.5% 23.3%;
  --constant-slate-750: 60 2.1% 18.4%;
  --constant-slate-800: 60 2.7% 14.5%;
  --constant-slate-850: 30 3.3% 11.8%;
  --constant-slate-900: 30 4% 9.8%;
  --constant-slate-950: 60 2.6% 7.6%;
}


:root:not(.dark) {
  --accent-brand: var(--constant-clay);
  --accent-main-000: 15 52.7% 43.9%;
  --accent-main-100: 16 53.8% 47.5%;
  --accent-main-200: 15 55.6% 52.4%;
  --accent-main-900: 15 48% 90.2%;
  --accent-pro-000: 251 34.2% 33.3%;
  --accent-pro-100: 251 40% 45.1%;
  --accent-pro-200: 251 61% 72.2%;
  --accent-pro-900: 253 33.3% 91.8%;
  --accent-secondary-000: 210 74.2% 42.1%;
  --accent-secondary-100: 210 74.8% 49.8%;
  --accent-secondary-200: 210 74.8% 57%;
  --accent-secondary-900: 210 68.8% 93.3%;
  --bg-000: var(--constant-slate-000);
  --bg-100: var(--constant-slate-050);
  --bg-200: var(--constant-slate-150);
  --bg-300: var(--constant-slate-200);
  --bg-400: var(--constant-slate-250);
  --bg-500: var(--constant-slate-300);
  --border-100: var(--constant-slate-500);
  --border-200: var(--constant-slate-500);
  --border-300: var(--constant-slate-500);
  --border-400: var(--constant-slate-500);
  --danger-000: 5 74% 28%;
  --danger-100: 5 73.9% 37.7%;
  --danger-200: 5 49.5% 58%;
  --danger-900: 0 40.3% 89%;
  --oncolor-100: var(--constant-slate-000);
  --oncolor-200: 60 6.7% 97.1%;
  --oncolor-300: 60 6.7% 97.1%;
  --text-000: 49 6.9% 5.5%;
  --text-100: 49 19.6% 13.3%;
  --text-200: 49 18.8% 20%;
  --text-300: 49 9% 30%;
  --text-400: 49 7% 37%;
  --text-500: 51 7.5% 42.1%;
}

:root.dark {
  --accent-brand: var(--constant-clay);
  --accent-main-000: 18 50.4% 47.5%;
  --accent-main-100: 18 56.8% 43.5%;
  --accent-main-200: 19 58.3% 40.4%;
  --accent-main-900: 16 41.3% 18%;
  --accent-pro-000: 251 84.6% 74.5%;
  --accent-pro-100: 251 40.2% 54.1%;
  --accent-pro-200: 251 40% 45.1%;
  --accent-pro-900: 250 25.3% 19.4%;
  --accent-secondary-000: 210 74.8% 57%;
  --accent-secondary-100: 210 74.8% 49.8%;
  --accent-secondary-200: 210 74.2% 42.1%;
  --accent-secondary-900: 210 19.5% 18%;
  --bg-000: var(--constant-slate-700);
  --bg-100: var(--constant-slate-750);
  --bg-200: var(--constant-slate-800);
  --bg-300: var(--constant-slate-850);
  --bg-400: var(--constant-slate-900);
  --bg-500: var(--constant-slate-950);
  --border-100: var(--constant-slate-600);
  --border-200: var(--constant-slate-600);
  --border-300: var(--constant-slate-600);
  --border-400: var(--constant-slate-600);
  --danger-000: 5 69.4% 72.9%;
  --danger-100: 5 79.4% 70.8%;
  --danger-200: 5 53.6% 44.8%;
  --danger-900: 0 21.4% 17.6%;
  --oncolor-100: var(--constant-slate-000);
  --oncolor-200: 60 6.7% 97.1%;
  --oncolor-300: 60 6.7% 97.1%;
  --text-000: 60 6.7% 97.1%;
  --text-100: 50 23.1% 94.9%;
  --text-200: 60 5.5% 89.2%;
  --text-300: 47 8.4% 79%;
  --text-400: 48 9.6% 69.2%;
  --text-500: 45 6.3% 62.9%;
}

#home-header {
  font-family: 'Copernicus', sans-serif;
  font-weight: 300 !important;
  font-size: 50px;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: black;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
}

.build-with {
  font-family: 'Copernicus', sans-serif;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.claude-wordmark-wrapper {
  display: inline-flex;
  align-items: baseline;
  margin-left: 10px; /* Space between "Build with" and the wordmark */
}

.claude-wordmark {
  height: 40px; /* Adjust this value to match your desired size */
  width: auto;
  position: relative;
}

.dark #home-header {
  color: white;
}

.description-text {
  color: black;
}

.dark .description-text {
  color: white;
}

.dark .claude-wordmark {
  filter: invert(1);
}

:root {
  --bg-color: #F0EFEA;
}

.dark {
  --bg-color: #2B2B2B;
}

#background-div {
  background-color: var(--bg-color);
  transition: background-color 0.3s ease;
}

body, input, #category-select, .dropdown-item, #table-of-contents {
  font-family: 'Styrene', sans-serif;
}

.eyebrow {
  font-family: 'Styrene Display', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02rem;
}

#content-container {
  font-family: 'Tiempos', serif;
}

#content-container h1, #content-container h2, #content-container h3, #content-container h4, #content-container h5, #content-container h6 {
  font-family: 'Styrene Display', sans-serif;
}


#content-container p {
  font-size: 1rem;
  line-height: 1.65rem;
}

.font-extrabold {
  font-weight: 600 !important;
}

.wide-table {
  width: 100%;
  overflow-x: auto;
}

.wide-table table {
  width: 175%;
  margin-bottom: 0;
}

/* Prompt Library */
#prompt-library-container {
  margin: 4rem auto;
  max-width: 48rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.prompt-library-title {
  font-size: 24px;
  text-align: center;
  font-weight: 700;
  color: #1f2937;
}

.dark .prompt-library-title {
  color: #e5e7eb;
}

.prompt-library-description {
  margin-top: 1rem;
  text-align: center;
}

.main-content {
  margin-bottom: 10rem;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.prompt-controllers {
  display: flex;
  gap: 0.5rem;
}

.prompt-search-container {
  position: relative;
  flex: 1 1 0%;
}

.prompt-search-icon-container {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  padding-left: 0.75rem;
}

.prompt-search-icon {
  margin-left: 0.25rem;
  margin-right: 0.75rem;
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: #6b7280;
  mask-image: url(https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
}

input.prompt-search-bar {
  display: block;
  height: 2.5rem;
  padding-left: 2.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  background-color: #ffffff;
  width: 100%;
  color: #111827;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark input.prompt-search-bar {
  color: #ffffff;
  background-color: rgb(var(--background-dark));
  border-color: #d1d5db1a;
}

input.prompt-search-bar:focus {
  outline-color: rgb(var(--primary));
}

.dark input.prompt-search-bar:focus {
  outline-color: rgb(var(--primary-light));
}

.dark .prompt-search-icon {
  background-color: #ffffff80;
}

#category-select {
  padding-left: 1rem;
  padding-right: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  border-width: 1px;
  color: #111827;
  background-color: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

.dark #category-select {
  background-color: rgb(var(--background-dark));
  border-color: #d1d5db1a;
  color: #ffffff;
}

#category-select:hover {
  background-color: #f9fafb;
}

.dark #category-select:hover {
  background-color: #ffffff0d;
}

#category-select:focus {
  outline-color: rgb(var(--primary));
}

.dark #category-select:focus {
  outline-color: rgb(var(--primary-light));
}

#categories-dropdown {
  top: calc(100% + 4px);
  padding: 0.5rem 0.5rem;
  display: none;
  position: absolute;
  z-index: 10;
  border-radius: 0.75rem;
  border-width: 1px;
  width: 100%;
  color: #111827;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark #categories-dropdown {
  background-color: rgb(var(--background-dark));
  border-color: #d1d5db1a;
  color: #ffffff;
}

#categories-dropdown-clickout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.dropdown-icon-container {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  padding-right: 0.25rem;
}

.dropdown-icon {
  margin-left: 0.25rem;
  margin-right: 0.75rem;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #6b7280;
  mask-image: url(https://mintlify.b-cdn.net/v6.5.1/solid/caret-down.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
}

.dark .dropdown-icon {
  background-color: #ffffff80;
}

#prompts-container {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

.dropdown-item {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f9fafb;
}

.dark .dropdown-item:hover {
  background-color: #ffffff0d;
}

.check-icon {
  mask-image: url(https://mintlify.b-cdn.net/v6.5.1/solid/check.svg);
  height: 0.875rem;
  width: 1rem;
  background-color: rgb(var(--primary-light));
  mask-repeat: no-repeat;
  mask-position: center center;
}

.prompt-card {
  margin: -0.75rem;
  padding: 0.75rem;
  display: flex;
  border-radius: 1rem;
}

.prompt-card:hover {
  background-color: #03071208;
}

.dark .prompt-card:hover {
  background-color: #ffffff08;
}

.prompt-icon-container {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  border-radius: 0.75rem;
  height: 4rem;
  width: 4rem;
  background-color: #cb785c1a;
}

.prompt-icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: rgb(var(--primary-light));
  mask-repeat: no-repeat;
  mask-position: center center;
}

.prompt-title {
  color: rgb(31 41 55);
  font-weight: 600;
}

.dark .prompt-title {
  color: rgb(229 231 235);
}

.prompt-description {
  margin-top: 0.25rem;
}

#prompts-container {
  display: grid;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  #category-select {
    width: 16rem;
  }
}

@media (min-width: 1024px) {
  #prompts-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Utility classes */
.relative {
  position: relative;
}

.flex-1 {
  flex: 1 1 0%;
}


.prompts-container {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

@media (min-width: 1024px) {
  .prompts-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* These styles mirror our design system (converted to plain CSS with Claude's help) from https://ui.product.ant.dev/button */

/* Base button styles */
.btn {
  position: relative;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 5rem;
  height: 2.25rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  font-family: Styrene;
  font-weight: 600;
  border-radius: 0.5rem;
  &:active {
    transform: scale(0.985);
  }

  /* Size variants */
  &.size-xs {
    height: 1.75rem;
    min-width: 3.5rem;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
  
  &.size-sm {
    height: 2rem;
    min-width: 4rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
  }

  &.size-lg {
    height: 2.75rem;
    min-width: 6rem;
    padding: 0 1.25rem;
    border-radius: 0.6rem;
  }

  &:disabled {
    pointer-events: none;
    opacity: 0.5;
    box-shadow: none;
  }

  &:focus-visible {
    outline: none;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
  }

  /* Primary variant */
  &.primary {
    font-weight: 600;
    color: hsl(var(--oncolor-100));
    background-color: hsl(var(--accent-main-100));
    background-image: linear-gradient(
      to right,
      hsl(var(--accent-main-100)) 0%,
      hsl(var(--accent-main-200) / 0.5) 50%,
      hsl(var(--accent-main-200)) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    border: 0.5px solid hsl(var(--border-300) / 0.25);
    box-shadow: 
      inset 0 0.5px 0px rgba(255, 255, 0, 0.15),
      0 1px 1px rgba(0, 0, 0, 0.05);
    text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      background-position: 100% 0%;
      background-image: linear-gradient(
        to right,
        hsl(var(--accent-main-200)) 0%,
        hsl(var(--accent-main-200)) 100%
      );
    }

    &:active {
      background-color: hsl(var(--accent-main-000));
      box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.2);
      transform: scale(0.985);
    }
  }

  /* Flat variant */
  &.flat {
    font-weight: 500;
    color: hsl(var(--oncolor-100));
    background-color: hsl(var(--accent-main-100));
    transition: background-color 150ms;

    &:hover {
      background-color: hsl(var(--accent-main-200));
    }
  }

  /* Secondary variant */
  &.secondary {
    font-weight: 600;
    color: hsl(var(--text-100) / 0.9);
    background-image: radial-gradient(
      ellipse at center,
      hsl(var(--bg-500) / 0.1) 50%,
      hsl(var(--bg-500) / 0.3) 100%
    );
    border: 0.5px solid hsl(var(--border-400));
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: hsl(var(--text-000));
      background-color: hsl(var(--bg-500) / 0.6);
    }

    &:active {
      background-color: hsl(var(--bg-500) / 0.5);
    }
  }

  /* Outline variant */
  &.outline {
    font-weight: 600;
    color: hsl(var(--text-200));
    background-color: transparent;
    border: 1.5px solid currentColor;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: hsl(var(--text-100));
      background-color: hsl(var(--bg-400));
      border-color: hsl(var(--bg-400));
    }
  }

  /* Ghost variant */
  &.ghost {
    color: hsl(var(--text-200));
    border-color: transparent;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: hsl(var(--text-100));
      background-color: hsl(var(--bg-500) / 0.4);
    }

    &:active {
      background-color: hsl(var(--bg-400));
    }
  }

  /* Underline variant */
  &.underline {
    opacity: 0.8;
    text-decoration-line: none;
    text-underline-offset: 3px;
    transition: all 150ms;

    &:hover {
      opacity: 1;
      text-decoration-line: underline;
    }

    &:active {
      transform: scale(0.985);
    }
  }

  /* Danger variant */
  &.danger {
    font-weight: 600;
    color: hsl(var(--oncolor-100));
    background-color: hsl(var(--danger-100));
    transition: background-color 150ms;

    &:hover {
      background-color: hsl(var(--danger-200));
    }
  }
}


'use client'

const styles = `
@font-face {
  font-family: 'Styrene';
  src: url('/fonts/Styrene_B_Family/StyreneB-Medium-Trial.otf') format('opentype');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'Styrene';
  src: url('/fonts/Styrene_B_Family/StyreneB-Regular-Trial.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tiempos';
  src: url('/fonts/Tiempos_Text/test-tiempos-text-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

#inkeep-widget-root {
  font-family: 'Tiempos', sans-serif;
}

.ikp-modal__content {
  border-radius: 1rem;
}

[data-theme='light'] .ikp-ai-chat-input__fieldset {
  box-shadow: none;
  border: 1px solid var(--ikp-color-gray-300);
  background: #F8F8F7;
}

.ikp-chat-button__button {
  font-family: 'Styrene', sans-serif;
}

.ikp-ai-chat-tagline__container, .ikp-ai-search-tagline__container, .ikp-markdown-code, .ikp-ai-chat-message-source-item, .ikp-ai-chat-message-sources__header, .ikp-ai-chat-header__toolbar, .ikp-ai-chat-quick-questions-label, .ikp-ai-chat-help-actions__menu-item, .ikp-ai-ask-ai-trigger, .ikp-ai-search-results__item-breadcrumbs, .ikp-ai-search-results__item-title, .ikp-ai-search-results__item-tag {
  font-family: 'Styrene', sans-serif;
}

button, input, textarea {
  font-family: 'Styrene', sans-serif;
}


.ikp-ai-chat-input__send-button {
  color: #ba5b38;
}


.ikp-ai-chat-tagline__container, .ikp-ai-search-tagline__container {
  align-items: center;
  position: relative;
}

.ikp-ai-chat-tagline__text, .ikp-ai-search-tagline__text {
  visibility: hidden;
  width: 20px;
  color: var(--ikp-color-gray-600);
}

.ikp-ai-chat-tagline__text:before, .ikp-ai-search-tagline__text:before {
  content: 'By';
  font-weight: normal;
  visibility: visible;
}

.ikp-ai-chat-tagline__container:after, .ikp-ai-search-tagline__container:after {
  content: '';
  margin-left: 1.35rem;
  width: 90px;
  height: 10px;
  background: url('https://storage.googleapis.com/customer-imgs/anthropic.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ikp-ai-chat-tagline__container:before, .ikp-ai-search-tagline__container:before {
  content: '&';
  position: absolute;
  right: 90px;
  color: #8d8c87;
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-50%);
  top: 50%;
}

[data-theme='dark'] .ikp-ai-chat-tagline__container:before, [data-theme='dark'] .ikp-ai-search-tagline__container:before {
  color: #ffffff7a;
}

[data-theme='dark'] .ikp-ai-chat-tagline__container:after, [data-theme='dark'] .ikp-ai-search-tagline__container:after {
  background: url('https://storage.googleapis.com/customer-imgs/anthropic-darkmode.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
`

function initInkeep() {
  // Get the Mintlify search containers, going to reuse them as the triggers for Inkeep
  const searchButtonContainerIds = ['search-bar-entry', 'search-bar-entry-mobile', 'home-search-entry'];
  // Clone and replace, needed to remove existing event listeners
  const clonedSearchButtonContainers = searchButtonContainerIds
    .map(id => {
      const originalElement = document.getElementById(id);
      if (!originalElement) return null;
      const clonedElement = originalElement.cloneNode(true);
      originalElement.parentNode.replaceChild(clonedElement, originalElement);
      return clonedElement;
    })
    .filter(Boolean);
  // Customization settings
  const baseSettings = {
    // API key from: https://portal.inkeep.com/anthropic/projects/clw8tmfhy000ntf8xbbpq60zz/integrations/cm7zlemlb005ws601sc7kudd5
    apiKey: '8f9c3d77d99a05677fd5bdf7a1f4fc1a6e65ce12aabe65cf',
    primaryBrandColor: '#181818',
    colorMode: {
      sync: {
        target: document.documentElement,
        isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
        attributes: ['class'],
      },
    },
    theme: {
      styles: [
        {
          key: '1',
          type: 'style',
          value: styles,
        },
      ],
      fontFamily: {
        heading: "'Styrene'",
        body: "'Tiempos'",
      },
      colors: {
        gray: {
          50: '#f9f9f8',
          100: '#f1f1f0',
          200: '#e9e8e7',
          300: '#e2e1df',
          400: '#cfcec6',
          500: '#bcb8a9',
          600: '#8d8c87',
          700: '#828079',
          800: '#42413B',
          900: '#21201C',
        },
      },
    },
    transformSource: (source) => {
      const urlPatterns = {
        support: 'support.anthropic.com',
        home: 'anthropic.com',
        github: 'github.com/anthropics',
        docs: 'docs.anthropic.com',
      }
      const tabConfig = {
        [urlPatterns.support]: {
          tab: 'Support',
          icon: 'IoHelpBuoyOutline',
          getBreadcrumbs: (crumbs) => ['Support', ...crumbs.slice(1)],
        },
        [urlPatterns.docs]: {
          tab: 'Docs',
          icon: 'IoDocumentTextOutline',
          getBreadcrumbs: (crumbs) => ['Docs', ...crumbs.slice(1)],
        },
        [urlPatterns.home]: {
          tab: 'Home',
          icon: 'IoHomeOutline',
          getBreadcrumbs: (crumbs) => ['Home', ...crumbs.slice(1)],
        },
        [urlPatterns.github]: {
          tab: 'GitHub',
          icon: 'FaGithub',
          getBreadcrumbs: (crumbs) => ['GitHub', ...crumbs.slice(1)],
        },
      }
  
      // Find matching config based on URL
      const matchingPattern = Object.keys(tabConfig).find((pattern) => source.url.includes(pattern))
      const config = matchingPattern ? tabConfig[matchingPattern] : null
  
      if (!config) {
        return source
      }
  
      const breadcrumbs = config.getBreadcrumbs(source.breadcrumbs)
      const existingTabs = source.tabs ?? []
  
      // Check if tab already exists
      const tabExists = existingTabs.some((existingTab) =>
        typeof existingTab === 'string'
          ? existingTab === config.tab
          : Array.isArray(existingTab) && existingTab[0] === config.tab,
      )
  
      const tabs = tabExists
        ? existingTabs
        : [
            ...existingTabs,
            [
              config.tab,
              { breadcrumbs: breadcrumbs[0] === config.tab ? breadcrumbs.slice(1) : breadcrumbs },
            ],
          ]

      return {
        ...source,
        breadcrumbs,
        tabs,
        icon: { builtIn: config.icon },
      }
    },
  }
  
  const aiChatSettings = {
    chatSubjectName: 'Claude',
    aiAssistantAvatar: {
      light:
        'https://storage.googleapis.com/organization-image-assets/anthropic-botAvatarSrcUrl-1715877069137.svg',
      dark: 'https://storage.googleapis.com/organization-image-assets/anthropic-botAvatarDarkSrcUrl-1715877068491.svg',
    },
    getHelpOptions: [
      {
        name: 'Support Center',
        icon: {
          builtIn: 'IoHelpBuoyOutline',
        },
        action: {
          type: 'open_link',
          url: 'https://support.anthropic.com/en/',
        },
      },
      {
        name: 'Github',
        icon: {
          builtIn: 'FaGithub',
        },
        action: {
          type: 'open_link',
          url: 'https://github.com/anthropics',
        },
      },
    ],
    exampleQuestions: [
      'How do I create structured JSON output?',
      'For few shot prompting, how do I pick examples?',
      "How can I prompt Claude to reply a user's language?",
    ],
  }
  
  const searchSettings = {
    tabs: [
      ['Docs', { isAlwaysVisible: true }],
      ['All', { isAlwaysVisible: true }],
      'Support',
      'Home',
      'GitHub',
    ],
  }
  
  const sharedConfig = {
    baseSettings,
    aiChatSettings,
    searchSettings,
  }

  // add the "Ask AI" pill chat button
  window.Inkeep.ChatButton({
    ...sharedConfig,
  });
  // instantiate Inkeep "custom trigger" component (using the Mintlify search bar as the trigger)
  const inkeepSearchModal = window.Inkeep.ModalSearchAndChat({
      ...sharedConfig,
      modalSettings: {
        isOpen: false,
        onOpenChange: handleSearchModalOpenChange,
      },
      defaultView: 'search',
      shortcutKey: null,
    })

    function handleSearchModalOpenChange(newOpen) {
      inkeepSearchModal.update({ modalSettings: { isOpen: newOpen } });
    }

  // Instantiate a separate Inkeep component for the home search entry
  const homeSearchModal = window.Inkeep.ModalSearchAndChat({
      ...sharedConfig,
      modalSettings: {
        isOpen: false,
        onOpenChange: handleHomeSearchModalOpenChange,
      },
      defaultView: 'chat',
      shortcutKey: null,
    });

    function handleHomeSearchModalOpenChange(newOpen) {
      homeSearchModal.update({ modalSettings: { isOpen: newOpen } });
    }
   
  // When the Mintlify search bar clone is clicked, open the appropriate Inkeep search modal
  clonedSearchButtonContainers.forEach(trigger => {
    trigger.addEventListener('click', function () {
      if (trigger.id === 'home-search-entry') {
        homeSearchModal.update({
          modalSettings: {
            isOpen: true,
          },
        });
      } else {
        inkeepSearchModal.update({
          modalSettings: {
            isOpen: true,
          },
        });
      }
    });
  });
  // Add keyboard shortcut listener (using capture phase for priority handling)
  window.addEventListener(
    'keydown',
    event => {
      if ((event.metaKey || event.ctrlKey) && (event.key === 'k' || event.key === 'K')) {
        event.stopPropagation();
        inkeepSearchModal.update({
          modalSettings: {
            isOpen: true,
          },
        });
        return false;
      }
    },
    true, // Use capture phase to intercept before other handlers
  );
  return { inkeepSearchModal, homeSearchModal }; // Return for potential external use
}
// Load the Inkeep script
const inkeepScript = document.createElement('script');
inkeepScript.type = 'module';
inkeepScript.src = 'https://unpkg.com/@inkeep/cxkit-js@0.5.20/dist/embed.js';
inkeepScript.integrity = "sha384-+7WXh7wn0k+r56vdVMGD6XAXekgV/lAmn0LoSeRDSf4mQwC7dQY9mCPbWVdQF0xX"
inkeepScript.crossOrigin = "anonymous"
document.body.appendChild(inkeepScript);
// Wait for the Inkeep script to load
inkeepScript.addEventListener("load", function() {
  initInkeep();
  // Listen for URL changes using the 'popstate' event
  window.addEventListener('popstate', handleURLChange);
  // Listen for URL changes using the 'hashchange' event (if using hash-based routing)
  window.addEventListener('hashchange', handleURLChange);
})

// Function to handle URL changes
function handleURLChange() {
  initInkeep();
}

安装用于访问 Vertex AI 的 SDK

模型可用性

API 模型名称

发送请求

访问 Vertex AI

Developer Console

Developer Discord

Support

Console Développeur

Discord pour les développeurs

Assistance

Entwicklerkonsole

Entwickler-Discord

Unterstützung

Console per sviluppatori

Discord per Sviluppatori

Supporto

開発者コンソール

開発者向けDiscord

サポート

Consola de Desarrollador

Discord para Desarrolladores

Soporte

개발자 콘솔

개발자 Discord

지원

开发者控制台

开发者 Discord

支持

開發者控制台

開發者 Discord

支援

Консоль разработчика

Дискорд для разработчиков

Поддержка

Konsol Pengembang

Discord Pengembang

Dukungan

Console do Desenvolvedor

Discord para Desenvolvedores

Suporte

Anthropic

User Guides

Welcome

API Reference

Prompt Library

Release Notes

Willkommen

API-Referenz

Benutzerhandbücher

Vorlagen-Bibliothek

Versionshinweise

Bienvenido

Guías de Usuario

Referencia de API

Biblioteca de prompts

Notas de la versión

Guides d'utilisation

Bienvenue

Bibliothèque de prompts

Référence de l'API

Notes de version

Selamat datang

Panduan Pengguna

Referensi API

Pustaka Prompt

Catatan Rilis

Guide Utente

Benvenuto

Documentazione API

Raccolta Prompt

Note di rilascio

ようこそ

APIリファレンス

ユーザーガイド

リリースノート

プロンプトライブラリ

환영합니다

사용자 가이드

API 레퍼런스

릴리스 노트

프롬프트 라이브러리

Bem-vindo

Referência da API

Guias do Usuário

Biblioteca de Prompts

Notas da versão

Добро пожаловать

Руководства пользователя

Справочник API

Библиотека промптов

Список изменений

欢迎

用户指南

API 参考

提示词库

发布说明

使用指南

歡迎

API 參考文件

提示詞庫

版本更新紀錄

Go to claude.ai

Research

News

Anthropic 的 Claude 模型现已通过 [Vertex AI](https://cloud.google.com/vertex-ai) 全面提供。

Vertex AI API

Claude is a highly performant, trustworthy, and intelligent AI platform built by Anthropic. Claude excels at tasks involving language, reasoning, analysis, coding, and more.

Overview

Welcome to Claude

Let’s learn how to use the Anthropic API to build with Claude.

Initial setup

Claude is a family of [highly performant and intelligent AI models](/en/docs/about-claude/models) built by Anthropic. While Claude is powerful and extensible, it's also the most trustworthy and reliable AI available. It follows critical protocols, makes fewer mistakes, and is resistant to jailbreaks—allowing [enterprise customers](https://www.anthropic.com/customers) to build the safest AI-powered applications at scale.

Intro to Claude

Guides to common use cases

This guide walks through how to harness Claude's advanced natural language understanding capabilities to classify customer support tickets at scale based on customer intent, urgency, prioritization, customer profile, and more.

Ticket routing

This guide walks through how to leverage Claude's advanced conversational capabilities to handle customer inquiries in real time, providing 24/7 support, reducing wait times, and managing high support volumes with accurate responses and positive interactions.

Customer support agent

Content moderation is a critical aspect of maintaining a safe, respectful, and productive environment in digital applications. In this guide, we'll discuss how Claude can be used to moderate content within your digital application.

Content moderation

This guide walks through how to leverage Claude's advanced natural language processing capabilities to efficiently summarize legal documents, extracting key information and expediting legal research. With Claude, you can streamline the review of contracts, litigation prep, and regulatory work, saving time and ensuring accuracy in your legal processes.

Legal summarization

Claude is a family of state-of-the-art large language models developed by Anthropic. This guide introduces our models and compares their performance with legacy models. 

All models overview

Extended thinking models

Security and compliance

Define success criteria

Define your success criteria

Develop test cases

Create strong empirical evaluations

Context windows

The Claude 3 family of models comes with new vision capabilities that allow Claude to understand and analyze images, opening up exciting possibilities for multimodal interaction.

Vision

Prompt engineering overview

Prompt generator

Automatically generate first draft prompt templates

Use prompt templates

Use prompt templates and variables

Prompt improver

Use our prompt improver to optimize your prompts

Be clear and direct

Be clear, direct, and detailed

Use examples (multishot prompting)

Use examples (multishot prompting) to guide Claude's behavior

Let Claude think (CoT)

Let Claude think (chain of thought prompting) to increase performance

Use XML tags

Use XML tags to structure your prompts

Give Claude a role (system prompts)

Giving Claude a role with a system prompt

Prefill Claude's response

Prefill Claude's response for greater output control

Chain complex prompts

Chain complex prompts for stronger performance

Long context tips

Long context prompting tips

Extended thinking tips

Extended thinking

Building with extended thinking

Claude excels at tasks across multiple languages, maintaining strong cross-lingual performance relative to English.

Multilingual support

Tool use with Claude

Token-efficient tool use (beta)

Text editor tool

Prompt caching

Process PDFs with Claude. Extract text, analyze charts, and understand visual content from your documents.

PDF support

Citations

Token counting

Batch processing

Text embeddings are numerical representations of text that enable measuring semantic similarity. This guide introduces embeddings, their applications, and how to use embedding models for tasks like search, recommendations, and anomaly detection.

Embeddings

Learn about Claude Code, an agentic coding tool made by Anthropic. Currently in beta as a research preview.

Claude Code overview

Practical examples and patterns for effectively using Claude Code in your development workflow.

Claude Code tutorials

Solutions for common issues with Claude Code installation and usage.

Troubleshooting

Claude Code troubleshooting

Computer use (beta)

Model Context Protocol (MCP)

The [Claude for Sheets extension](https://workspace.google.com/marketplace/app/claude%5Ffor%5Fsheets/909417792257) integrates Claude into Google Sheets, allowing you to execute interactions with Claude directly in cells.

Google Sheets add-on

Reduce hallucinations

Increase output consistency

Increase output consistency (JSON mode)

Mitigate jailbreaks

Mitigate jailbreaks and prompt injections

Reduce prompt leak

Keep Claude in character

Keep Claude in character with role prompting and prefilling

Reducing latency

The [Anthropic Console](https://console.anthropic.com/dashboard) features an **Evaluation tool** that allows you to test your prompts under various scenarios.

Using the Evaluation Tool

Admin API

模型	Vertex AI API 模型名称
Claude 3 Haiku	claude-3-haiku@20240307
Claude 3 Sonnet	claude-3-sonnet@20240229
Claude 3 Opus (公开预览版)	claude-3-opus@20240229
Claude 3.5 Haiku	claude-3-5-haiku@20241022
Claude 3.5 Sonnet	claude-3-5-sonnet-v2@20241022
Claude 3.7 Sonnet	claude-3-7-sonnet@20250219

使用 API

OpenAI SDK 兼容性

Amazon Bedrock API

实验性 API

Vertex AI

Anthropic API

Vertex AI API

安装用于访问 Vertex AI 的 SDK

访问 Vertex AI

模型可用性

API 模型名称

发送请求

使用 API

OpenAI SDK 兼容性

Amazon Bedrock API

实验性 API

Vertex AI

Anthropic API

​安装用于访问 Vertex AI 的 SDK

​访问 Vertex AI

​模型可用性

​API 模型名称

​发送请求

安装用于访问 Vertex AI 的 SDK

访问 Vertex AI

模型可用性

API 模型名称

发送请求