skills.rest
LumaKernel
LumaKernelCOMMUNITY
Explore all skills by this author →
𝕏@lumc_GitHub

install-copilot-kit

Embeds an AI Copilot chat panel with streaming responses and UI actions into HTML dashboards.

17|1|Updated Dec 29, 2019
Search Tags:#streaming#Gemini#UI automation#Vertex AI#html dashboard#ai copilot#chat panel
One-click install
npx skills add https://github.com/LumaKernel/dotfiles --skill install-copilot-kit-lumakernel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: install-copilot-kit
Source: https://github.com/LumaKernel/dotfiles/tree/main/common/claude/skills/install-copilot-kit
Command: npx skills add https://github.com/LumaKernel/dotfiles --skill install-copilot-kit-lumakernel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires marked.

What problem does it solve? Adding an AI assistant to an existing HTML dashboard or web app normally requires building chat UI, provider integrations, streaming rendering, and context plumbing from scratch. This Skill embeds a complete side-panel AI Copilot into a target HTML page in one guided workflow. ## Core Features & Use Cases - Multi-Provider Chat Panel: Integrates Google AI (Gemini API key), Vertex AI (Service Account JSON, Gemini and Claude models), and Chrome Built-in AI (Gemini Nano) with streaming responses and GFM Markdown rendering via marked.js. - UI Actions Engine: Lets the LLM operate page elements (click buttons, switch tabs/filters, scroll to sections) through a registered action registry parsed from :::action blocks in responses. - Automatic Context Collection: Generates buildCtx and buildCtxCompact functions that feed page data, KPIs, and current UI state to the model, with a compact variant for Gemini Nano's small context window. - Use Case: You have a single-file HTML sales dashboard and want users to ask questions about the data and have the AI switch filters or scroll to relevant sections. Point the Skill at the file, approve the design proposal, and it inserts the FAB, chat panel, settings overlay, and action engine before </body>. ## Quick Start Ask the AI to use the install-copilot-kit skill to add an AI Copilot chat panel to your dashboard HTML file, for example: install the copilot kit into ./dashboard.html.

Frequently Asked Questions about install-copilot-kit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add an AI chat panel to an HTML dashboard?▼

Provide the HTML file path as the argument, and the Skill analyzes the page structure, proposes a design covering insertion point, styling, context collection, and UI actions, then inserts the FAB, chat panel, and settings overlay before the closing body tag after your approval.

Which LLM providers can a browser-based copilot use?▼

This kit supports Google AI via API key, Vertex AI via Service Account Key JSON with both Gemini and Claude models, and Chrome Built-in AI (Gemini Nano) which needs no credentials. Provider selection is exposed in a settings overlay with per-provider fields.

Can an LLM control page UI elements like filters and tabs?▼

Yes. The Skill builds an action registry from the page's buttons, selects, tabs, and sections, lists them in the system prompt, and executes :::action blocks from the LLM response after streaming completes, with success or failure feedback shown in chat.

Does Chrome Built-in AI work without an API key?▼

Yes, Gemini Nano runs locally with no authentication, but the Skill checks self.ai.languageModel and capabilities() first. If the API is missing it guides enabling chrome://flags/#prompt-api-for-gemini-nano, and uses a compact context due to the small context window.

What are the limitations of embedding AI chat in a static HTML page?▼

Credentials like API keys and Service Account JSON are stored in localStorage in plaintext, which the Skill explicitly warns about. There is no backend proxy, so keys are exposed to anyone with access to the browser profile.

Related Skills

Explore More Software Engineering Skills→
kevinlinkevinlin
14

data-build-dashboard

Build self-contained HTML dashboards with embedded data and interactive charts.

Community
Intermediate
samuelbonifacio015samuelbonifacio015

llamia-social-circle-validation

Validate the LlamIA platform by engaging real users and iterating on prompts.

Community
Advanced
musher-devmusher-dev

auditing-docs-metrics

Audit developer documentation effectiveness by computing KPIs like Time to First Success.

Official
Advanced
HollowvynHollowvyn

ai-ui-patterns

Guide responsive React UI design for streaming AI chat with Vercel AI SDK.

Official
Intermediate