This video is a step-by-step guide on using generative AI, specifically the Gemini CLI, to build and customize widgets in the Google SecOps platform. The presenter demonstrates an iterative "vibe coding" workflow, starting by exporting raw JSON data from a playbook action. They then use a series of plain-English prompts in the Gemini CLI to build a self-contained HTML widget, progressively refining its style, formatting data (like timestamps and tags), and adding key features like dynamic case links.
The tutorial shows you exactly how to take the generated code, replace the static data with the platform's dynamic placeholder, and integrate it directly into a Google SecOps playbook as a new, custom widget. The video concludes by showcasing more advanced examples created with the same method, including interactive charts using e-charts and complex event timelines using D3.js.
Here is what you will learn how to do in this video:
- Export Raw Data: How to find and export the raw JSON data from a completed playbook action to use as a model for your new widget.
- Generate a Widget from JSON: Use a single Gemini CLI prompt to take raw JSON and generate a functional, self-contained HTML/CSS/JS page that displays the data in an expandable table.
- Iteratively Refine with Prompts: Apply a "vibe coding" approach to make incremental changes. You'll see how to ask the AI to:
- Convert Unix timestamps to a human-readable ISO format.
- Change the visual theme (e.g., to a dark blue theme).
- Reduce padding and remove unneeded fields.
- Reformat data arrays into simpler, more useful visuals (like adding icons).
- Add Dynamic Features: Instruct the AI to create dynamic links (like a "Case Link") that use the ID from the JSON data to build a clickable URL.
- Integrate into Google SecOps: Perform the most critical step: replacing the hard-coded JSON in the code with the platform's specific placeholder string, allowing the widget to accept live data.
- Build Advanced Visualizations: See the potential for building more than just tables, with examples of how to prompt the AI to use external libraries like e-charts and D3.js to create interactive graphs and timelines.
Have questions about this session? Drop a post below or in the SecOps Forum.