# Integrate ChatKit Widgets in Next.js

Teams need a fast way to add branded chat support without rebuilding a chat interface. This skill guides ChatKit widget setup, theming, placement, events, and backend proxy wiring for React and Next.js.

## Install

```bash
npx skillstore add awais68/chatkit-widget
```

## Metadata

- - Status: approved
- - Slug: awais68-chatkit-widget
- - Version: 1.0.0
- - Author: Awais68
- - GitHub username: Awais68
- - License: MIT
- - Repository: https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/chatkit-widget
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: high
- - Risk factors: scripts, external\_commands, network, env\_access
- - Quality score: 38
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/awais68-chatkit-widget
- - Manifest: https://skillstore.pages.dev/api/skills/awais68-chatkit-widget/manifest

## Capabilities

- Defines a ChatKit configuration structure for project identifiers, theme colors, position, behavior, and copy.
- Shows a lazy-loaded React widget component for client-only ChatKit initialization.
- Provides Next.js App Router and Pages Router placement examples.
- Includes role-based display examples for admins, teachers, students, parents, and guests.
- Documents event handling patterns for open, close, message, and error events.
- Includes dark mode and branding customization examples.

## Use Cases

- Add Support Chat to a School Portal: Place a branded chat widget in a Next.js layout and pass session details to personalize support.
- Control Chat Visibility by Role: Show different chat access or welcome messages for admins, staff, students, parents, or guests.
- Document Widget Integration Standards: Create consistent setup guidance for configuration, theming, events, and deployment checks.

## Prompt Templates

### Basic Widget Setup

```
Use the chatkit-widget skill to add a ChatKit widget to my Next.js app. Include the configuration file, component placement, and required environment variables.
```

### Brand the Widget

```
Use the chatkit-widget skill to customize the chat widget for our brand. Set theme colors, position, welcome text, and mobile behavior.
```

### Add Role-Based Access

```
Use the chatkit-widget skill to show the widget by user role. Include examples for admin, staff, customer, and guest behavior.
```

### Harden the Proxy

```
Use the chatkit-widget skill to review a ChatKit API proxy for production. Add authentication, strict allowed actions, method restrictions, rate limits, and safe error handling.
```

## Limitations

- The API proxy example needs stronger authentication and authorization before production use.
- It does not build a full custom chat interface from scratch.
- It assumes a Next.js or React application structure.
- It does not cover backend AI model configuration or retrieval setup.

## Best Practices

- Keep secret keys on the server and expose only public identifiers to the browser.
- Map client requests to fixed server-side actions instead of forwarding arbitrary methods or paths.
- Test widget placement on mobile pages where fixed elements can overlap important controls.

## Anti Patterns

- Do not deploy the proxy example without authentication and authorization checks.
- Do not load widget scripts from untrusted or user-controlled domains.
- Do not log chat messages or user identifiers unless your privacy policy allows it.

## Security Audit

- - Safe to publish: false
- - Audited at: 2026-06-28T11:57:39.014\+00:00
- - Summary: Static analysis found many high-severity patterns, but most weak-crypto, shell-backtick, and reconnaissance alerts are false positives caused by regex use and Markdown examples. No prompt injection or confirmed malicious intent was found, but the sample API proxy can expose a server bearer token through an unauthenticated forwarding route, so publication should wait for a safer implementation.

## Stats

- - Views: 180
- - Downloads: 5
- - Favorites: 0
- - Popularity score: 0