npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

sec-gemini-web-component

v0.0.5

Published

A web component for Sec Gemini

Readme

Sec-Gemini Web Component Documentation

The Sec-Gemini web component allows for easy integration of Sec-Gemini chat functionality into any website. This documentation outlines how to embed and configure the component using its available attributes.


Installation

There are two primary ways to install the Sec-Gemini web component:

Via CDN (Content Delivery Network)

This is the quickest way to get started. Include the provided script in your HTML. It's recommended to place it before the closing </body> tag.

<body>
  <script src="https://cdn.jsdelivr.net/npm/sec-gemini-web-component/dist/swc.iife.js"></script>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/sec-gemini-web-component/dist/swc.css"
  />
</body>

Usage

Once the component is installed (either via CDN or npm), you can use the <sec-gem-chat> tag in your HTML. Customize its behavior by setting the following attributes:



<sec-gem-chat
      incognito="true"
      session-id=""
      session-name="TestName"
      session-description="TestDescription"
      session-prompt="You are a senior cybersecurity threat intelligence analyst..."
      theme="dark"
      api-key="..."
    >
</sec-gem-chat>

Attributes

Here's a detailed explanation of each attribute:

  • incognito (Optional)

    • Type: boolean
    • Default: false
    • When set to "true", the chat session will operate in incognito mode, meaning the conversation history will not be saved.
  • sessionId (Optional)

    • Type: string
    • Default: "" (empty string)
    • If provided, the component will attempt to load an existing session with this ID. If no session is found, a new one will be created.
  • sessionName (Optional)

    • Type: string
    • Default: "New Session"
    • Sets a display name for the chat session. This is particularly useful for identifying sessions in a user interface or management system.
  • sessionDescription (Optional)

    • Type: string
    • Default: "" (empty string)
    • Provides a brief description for the chat session, offering additional context.
  • sessionPrompt (Optional)

    • Type: string
    • Default: "" (empty string)
    • An initial prompt or message to pre-populate the chat with when a new session is started. This can guide the conversation or set the context for the AI.
  • theme (Optional)

    • Type: string
    • Accepted Values: "light", "dark"
    • Default: "light"
    • Determines the visual theme of the chat interface. Set to "dark" for a dark mode appearance or "light" for a standard light theme.