> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

> Technical documentation & Implementation guides to add In-app Messaging & Voice & Video Calling to your apps and websites in minutes.

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center" style={{ height: '20rem', overflow: 'hidden'}}>
  <div className="absolute inset-0 bg-primary dark:bg-primary-light" style={{opacity: 0.05 }} />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem' }}>
    <div
      className="text-gray-900 dark:text-white"
      style={{
   fontWeight: '800',
   fontSize: '2.5rem',
   margin: '0',      
  }}
    >
      Get Started
    </div>

    <p className="mt-4 text-gray-900 dark:text-white" style={{ fontSize: '1rem', fontWeight: '600' , maxWidth: '40rem'}}>Seamlessly integrate real-time chat, voice, and video functionalities.  </p>

    <div className="flex items-center justify-center" style={{ maxWidth: '800px', margin: '0 auto' }}>
      <button
        type="button"
        className="hidden w-full lg:flex items-center text-sm leading-6 py-4 pl-4 pr-4 text-gray-500 rounded-full"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    maxWidth: '40rem',
    background: '#FFF',
    boxShadow: '0px 1px 4px 0px rgba(8, 9, 10, 0.25), 0px 0px 0px 4px rgba(255, 255, 255, 0.20)',
    cursor: 'pointer',
    textAlign: 'left',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
          style={{
    marginRight: '0.5rem',
     maskImage:
       'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
     maskRepeat: 'no-repeat',
     maskPosition: 'center center',
    }}
        />

        Search or ask...
      </button>
    </div>
  </div>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <Info>Using Cursor, VS Code, Claude, or any MCP-enabled tool? Add our CometChat Docs MCP so your AI always pulls the latest CometChat documentation.
  <br /><br />[Add CometChat Docs MCP](/mcp-server)</Info>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      UI Kits
    </h2>

    <h3
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.5rem',
  fontWeight: '500',
}}
    >
      Pre-built UI & business logic
    </h3>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Quickly implement chat functionality with UI Kits that include built-in business logic and a customizable user interface.
    </p>
  </div>

  <CardGroup cols={4}>
    <Card title="React" icon="react" iconType="solid" href="/ui-kit/react/overview" horizontal />

    <Card title="React Native" icon="react" iconType="solid" href="/ui-kit/react-native/overview" horizontal />

    <Card title="iOS" icon="apple" iconType="solid" href="/ui-kit/ios/overview" horizontal />

    <Card title="Android" icon="android" iconType="solid" href="/ui-kit/android/overview" horizontal />

    <Card title="Flutter" icon="flutter" iconType="solid" href="/ui-kit/flutter/overview" horizontal />

    <Card title="Angular" icon="angular" iconType="solid" href="/ui-kit/angular/overview" horizontal />

    <Card title="Vue" icon="vuejs" iconType="solid" href="/ui-kit/vue/overview" horizontal />
  </CardGroup>

  {/* SDKs Section */}

  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      SDKs
    </h2>

    <h3
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.5rem',
  fontWeight: '500',
}}
    >
      Build bespoke chat experiences
    </h3>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Use Our SDKs to tap into the full potential of CometChat while building your own user interface.
    </p>
  </div>

  <CardGroup cols={4}>
    <Card title="JavaScript" icon="js" iconType="solid" href="/sdk/javascript/overview" horizontal />

    <Card title="React Native" icon="react" iconType="solid" href="/sdk/react-native/overview" horizontal />

    <Card title="iOS" icon="apple" iconType="solid" href="/sdk/ios/overview" horizontal />

    <Card title="Android" icon="android" iconType="solid" href="/sdk/android/overview" horizontal />

    <Card title="Flutter" icon="flutter" iconType="solid" href="/sdk/flutter/overview" horizontal />

    <Card title="Ionic" icon="mobile-screen-button" iconType="solid" href="/sdk/ionic/overview" horizontal />
  </CardGroup>

  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      Widgets
    </h2>

    <h3
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.5rem',
  fontWeight: '500',
}}
    >
      For simpler websites
    </h3>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Integrate chat into any simple HTML, Bootstrap, or jQuery site effortlessly with our copy-and-paste code.
    </p>
  </div>

  <CardGroup cols={2}>
    <Card title="HTML / Bootstrap / jQuery" icon="html5" iconType="solid" href="/widget/builder-guide-html" horizontal />

    <Card title="Wordpress" icon="wordpress" iconType="solid" href="/widget/builder-guide-wordpress" horizontal />
  </CardGroup>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      APIs
    </h2>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Effortlessly sync users, generate tokens, and control access. Integrate CometChat into your app to manage users, groups, and conversations programmatically.
    </p>
  </div>

  <CardGroup cols={2}>
    <Card title="Chat APIs" icon="globe" iconType="solid" href="/rest-api/chat-apis" cta="Learn more">
      Connect CometChat with your app and programatically manage users, groups and conversations with our Chat APIs.
    </Card>

    <Card title="Management APIs" icon="globe" iconType="solid" href="/rest-api/management-apis" cta="Learn more">
      Create and manage your CometChat apps, trigger webhooks and access dashboard features with our Management APIs.
    </Card>
  </CardGroup>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      Sample Apps
    </h2>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Explore practical examples of what you can achieve, and don't forget to check out our Interactive Demo.
    </p>

    <CardGroup cols={4}>
      <Card title="React Chat App" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/react-image.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=90d73f6b95122e3a199354d2a0a3ed53" href="https://github.com/cometchat/cometchat-uikit-react" cta="Clone on GitHub" arrow="false" vertical width="304" height="174" data-path="images/react-image.png" />

      <Card title="React Native Chat App" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/react-native-image.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=946da33665bd447432cbce69afe01ca5" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-uikit-react-native" vertical width="304" height="174" data-path="images/react-native-image.png" />

      <Card title="iOS Chat App (Swift)" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/ios-image.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=11e89c6aa596873a9e4e219c508f1106" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-sample-app-ios" vertical width="304" height="174" data-path="images/ios-image.png" />

      <Card title="Android Chat App (Java)" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-VkygUOl1ts-0wu1/images/android-image.png?fit=max&auto=format&n=-VkygUOl1ts-0wu1&q=85&s=4718545d7597f67138bce201326e5bf1" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-sample-app-android-java" vertical width="304" height="174" data-path="images/android-image.png" />
    </CardGroup>

    <CardGroup cols={4}>
      <Card title="Android Chat App (Kotlin)" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-VkygUOl1ts-0wu1/images/android-image.png?fit=max&auto=format&n=-VkygUOl1ts-0wu1&q=85&s=4718545d7597f67138bce201326e5bf1" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-uikit-android" vertical width="304" height="174" data-path="images/android-image.png" />

      <Card title="Flutter Chat App" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/0XxgOJWFEp0qOHuU/images/flutter-image.png?fit=max&auto=format&n=0XxgOJWFEp0qOHuU&q=85&s=9d4b0cd9b900b3bfede47f56ead5213f" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-uikit-flutter" vertical width="304" height="174" data-path="images/flutter-image.png" />

      <Card title="Angular Chat App" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-VkygUOl1ts-0wu1/images/angular-image.png?fit=max&auto=format&n=-VkygUOl1ts-0wu1&q=85&s=9e6180128b68aee0ccf3553355050ccb" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-sample-app-angular" vertical width="304" height="174" data-path="images/angular-image.png" />

      <Card title="Vue Chat App" img="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/sGES4ruFz8w2SaXH/images/vue-image.png?fit=max&auto=format&n=sGES4ruFz8w2SaXH&q=85&s=acf13e4aa3d480639eba273002f74f94" cta="Clone on GitHub" arrow="false" href="https://github.com/cometchat/cometchat-sample-app-vue" vertical width="304" height="174" data-path="images/vue-image.png" />
    </CardGroup>
  </div>

  {/* Additional resources Section */}

  <div
    style={{ marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto' }}
  >
    <div className="flex flex-col w-full " style={{ marginBottom: '2rem' }}>
      <h2
        className="text-primary"
        style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
      >
        Resources
      </h2>
    </div>

    <CardGroup cols={4}>
      <Card title="Help Center" icon="phone" iconType="solid" href="https://help.cometchat.com/" arrow="false" cta="Learn more">
        Search our comprehensive knowledge base for all your CometChat questions.
      </Card>

      <Card title="Interactive Demo" icon="bolt-lightning" iconType="solid" href="https://www.cometchat.com/interactive-demo" arrow="false" cta="Learn more">
        Experience CometChat in action with our live chat app demo.
      </Card>

      <Card title="Product Updates" icon="newspaper" iconType="solid" href="https://updates.cometchat.com/" arrow="false" cta="Learn more">
        Stay ahead of the curve with the latest CometChat features and improvements.
      </Card>

      <Card title="Status Page" icon="signal" iconType="solid" href="https://status.cometchat.com/" arrow="false" cta="Learn more">
        Stay informed about any service interruptions or maintenance updates.
      </Card>
    </CardGroup>
  </div>

  {/* CometChat Solutions Office Hours Section */}

  <div
    style={{ marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto' }}
  >
    <CardGroup cols={1}>
      <Card title="CometChat Solutions Office Hours" icon="briefcase" iconType="solid" href="https://www.cometchat.com/office-hours" arrow="false" cta="Book your slot">
        Join our solutions office hours to brainstorm and ideate on your use cases, get guidance on integration from our solution engineers.
      </Card>
    </CardGroup>
  </div>
</div>

<div className="flex flex-col w-full " style={{ marginTop: '1rem', background: 'black' }}>
  <div className="bg-black text-gray-400 py-6 px-8 flex flex-col md:flex-row justify-between items-center rounded-t-xl">
    <div className="mb-4 md:mb-0">
      2025 © CometChat
    </div>

    <div className="flex space-x-6 items-center">
      <a href="https://www.linkedin.com/company/cometchat" target="_blank" className="flex items-center space-x-1 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.762 2.239 5 5 5h14c2.762 0 5-2.238 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.268c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 11.268h-3v-5.604c0-1.337-.026-3.059-1.865-3.059-1.865 0-2.15 1.455-2.15 2.96v5.703h-3v-10h2.881v1.367h.041c.402-.76 1.384-1.561 2.847-1.561 3.044 0 3.606 2.003 3.606 4.609v5.585z" />
        </svg>

        <span>LinkedIn</span>
      </a>

      <a href="https://x.com/cometchat" target="_blank" className="flex items-center space-x-1 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.162 5.656c-.793.352-1.645.589-2.54.696a4.468 4.468 0 0 0 1.958-2.46 9.043 9.043 0 0 1-2.845 1.088 4.496 4.496 0 0 0-7.664 4.1 12.758 12.758 0 0 1-9.272-4.7 4.493 4.493 0 0 0 1.393 6.002 4.46 4.46 0 0 1-2.035-.562v.057a4.497 4.497 0 0 0 3.606 4.41 4.503 4.503 0 0 1-2.029.077 4.502 4.502 0 0 0 4.198 3.12 9.01 9.01 0 0 1-5.575 1.922c-.362 0-.721-.021-1.077-.063a12.73 12.73 0 0 0 6.901 2.021c8.282 0 12.808-6.86 12.808-12.808 0-.195-.005-.388-.014-.58a9.152 9.152 0 0 0 2.25-2.336z" />
        </svg>

        <span>Twitter</span>
      </a>

      <a href="https://github.com/cometchat" target="_blank" className="flex items-center space-x-1 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577v-2.17c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.744.084-.729.084-.729 1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305 3.495.997.108-.775.418-1.305.76-1.605-2.665-.3-5.467-1.332-5.467-5.932 0-1.31.467-2.382 1.235-3.222-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.5 11.5 0 0 1 3.003-.404 11.5 11.5 0 0 1 3.003.404c2.292-1.552 3.298-1.23 3.298-1.23.653 1.653.241 2.873.118 3.176.77.84 1.233 1.912 1.233 3.222 0 4.61-2.807 5.628-5.48 5.922.429.369.813 1.096.813 2.211v3.281c0 .319.218.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
        </svg>

        <span>GitHub</span>
      </a>
    </div>
  </div>
</div>