Claude Chat Mockup

https://github.com/zpg6/claude-chat-mockup
Admin
An illustrative claude.ai chat UI component for landing pages and documentation.
Tokens:4,531
Snippets:30
Trust Score:9.1
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install claude-chat-mockup

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

Install the library using your preferred package manager.

```bash
npm install claude-chat-mockup
# or
pnpm add claude-chat-mockup
# or
yarn add claude-chat-mockup
# or
bun add claude-chat-mockup
```

--------------------------------

### React Quick Start

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

Use the ClaudeWindow component in React applications. Pass prompt, response, tool, and stage details. Children render in the stage; omit for chrome only.

```tsx
import { useState } from "react";
import { ClaudeWindow } from "claude-chat-mockup/react";
import "claude-chat-mockup/style.css";

export function Hero() {
    const [ready, setReady] = useState(false);
    return (
        <ClaudeWindow
            prompt="Design a pricing section for my SaaS landing page."
            response="Here's a responsive pricing section with Pro highlighted."
            tool={{ name: "claude", call: "create_artifact", title: "Pricing Section" }}
            ready={ready}
            stageHeight={300}
        >
            <iframe title="Preview" src="/preview.html" onLoad={() => setReady(true)} />
        </ClaudeWindow>
    );
}
```

--------------------------------

### Vanilla JS Quick Start

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

Instantiate ClaudeWindow in Vanilla JS applications. Mount it to a DOM element and use methods like setPrompt, setToolTitle, and setReady to control the chat interface.

```typescript
import { ClaudeWindow } from "claude-chat-mockup";
import "claude-chat-mockup/style.css";

const chat = ClaudeWindow({
    prompt: "Design a pricing section for my SaaS landing page.",
    response: "Here's a responsive pricing section with Pro highlighted.",
    tool: { name: "claude", call: "create_artifact", title: "Pricing Section" },
    stage: { src: "/preview.html", height: 300 },
}).mount(document.querySelector("#hero"));

// The stage auto-reveals on the iframe's `load`. Drive it by hand, too:
chat.setPrompt("Write a SQL migration for soft-deletes.");
chat.setToolTitle("0007_soft_delete");
chat.setReady(true);
```

--------------------------------

### Initialize and Mount ClaudeWindow Component

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/vanilla.html

Initializes the ClaudeWindow component with various configuration options and mounts it to a specified DOM element. The component is rebuilt on state changes to reflect updates.

```javascript
import { ClaudeWindow } from "../dist/index.mjs";
const STAR_SVG = '<svg viewBox="0 0 24 24" width="21" height="21" aria-hidden="true"><path fill="#d97757" d="M12 2l1.9 5.6L19.5 9l-4.5 3.3L16.6 18 12 14.7 7.4 18l1.6-5.7L4.5 9l5.6-1.4z"/></svg>';

const SAMPLES = [
  {
    prompt: "Design a pricing section for my SaaS landing page — three tiers, an annual toggle, and a highlighted Pro plan.",
    response: "Here's a responsive pricing section with Pro highlighted and an annual toggle.",
    toolTitle: "Pricing Section",
  },
  {
    prompt: "Write a SQL migration to add a soft-delete column to the orders table with an index.",
    response: "Added a nullable deleted_at timestamp plus a partial index for live rows.",
    toolTitle: "0007_soft_delete",
  },
  {
    prompt: "Summarize this quarter's churn by plan and flag anything unusual.",
    response: "Churn held steady except a spike on the Starter plan — details in the report.",
    toolTitle: "Q3 Churn Report",
  },
];

const state = {
  prompt: SAMPLES[0].prompt,
  response: SAMPLES[0].response,
  toolName: "claude",
  toolCall: "create_artifact",
  toolTitle: SAMPLES[0].toolTitle,
  avatar: "You",
  model: "Opus 4.8",
  effort: "High",
  placeholder: "Reply to Claude…",
  footnote: "Claude can make mistakes. Please double-check responses.",
  stageHeight: 300,
  theme: "auto",
  stageReady: true,
};

function makePreview() {
  const el = document.createElement("div");
  el.className = "preview";
  el.innerHTML = 	`<div class="tier"><b>Starter</b><em>$0</em><div class="row"></div><div class="row"></div><button>Choose</button></div> <div class="tier hot"><b>Pro</b><em>$29</em><div class="row"></div><div class="row"></div><button>Choose</button></div> <div class="tier"><b>Team</b><em>$99</em><div class="row"></div><div class="row"></div><button>Choose</button></div>`;
  return el;
}

const hero = document.getElementById("hero");
let chat = null;

function render() {
  if (chat) chat.destroy();
  chat = ClaudeWindow({
    prompt: state.prompt,
    response: state.response,
    tool: {
      name: state.toolName,
      call: state.toolCall,
      title: state.toolTitle || undefined,
    },
    avatar: state.avatar,
    model: state.model,
    effort: state.effort,
    placeholder: state.placeholder,
    footnote: state.footnote,
    theme: state.theme,
    stage: {
      height: Number(state.stageHeight) || 300,
      content: makePreview(),
      ready: state.stageReady,
    },
  }).mount(hero);

  const logo = chat.el.querySelector(".claude-tool-logo");
  if (logo) logo.innerHTML = STAR_SVG;
}

```

--------------------------------

### Cycle Sample Content

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/vanilla.html

Provides functionality to cycle through predefined sample conversations. Each cycle updates the component's prompt, response, and tool title, then re-renders the component.

```javascript
// Cycle sample content and sync the bound inputs.
let sampleIndex = 0;
document.getElementById("sample").addEventListener("click", () => {
  sampleIndex = (sampleIndex + 1) % SAMPLES.length;
  const sample = SAMPLES[sampleIndex];
  Object.assign(state, sample);
  for (const key of ["prompt", "response", "toolTitle"]) {
    const control = form.querySelector(`[data-bind="${key}"]`);
    if (control) control.value = state[key];
  }
  render();
});

render();
```

--------------------------------

### Import Stylesheet

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

Import the necessary stylesheet once in your application.

```typescript
import "claude-chat-mockup/style.css";
```

--------------------------------

### JavaScript for Claude Chat Preview

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/preview.html

This JavaScript code initializes the Claude API to generate a pricing section. It defines functions to create the preview UI and handles theme switching between light and dark modes.

```javascript
import { ClaudeWindow } from "../dist/index.mjs";
const STAR_SVG = '<svg viewBox="0 0 24 24" width="21" height="21" aria-hidden="true"><path fill="#d97757" d="M12 2l1.9 5.6L19.5 9l-4.5 3.3L16.6 18 12 14.7 7.4 18l1.6-5.7L4.5 9l5.6-1.4z"/></svg>';

function makePreview(dark) {
  const el = document.createElement("div");
  el.className = dark ? "preview dark" : "preview";
  el.innerHTML = 
` <div class="tier"><b>Starter</b><em>$0</em><div class="row"></div><div class="row"></div><button>Choose</button></div> 
 <div class="tier hot"><b>Pro</b><em>$29</em><div class="row"></div><div class="row"></div><button>Choose</button></div> 
 <div class="tier"><b>Team</b><em>$99</em><div class="row"></div><div class="row"></div><button>Choose</button></div>`
  return el;
}

function build(mount, theme) {
  const dark = theme === "dark";
  const chat = ClaudeWindow({
    prompt: "Design a pricing section for my SaaS landing page — three tiers, an annual toggle, and a highlighted Pro plan.",
    response: "Here's a responsive pricing section with Pro highlighted and an annual toggle.",
    tool: {
      name: "claude",
      call: "create_artifact",
      title: "Pricing Section"
    },
    theme,
    stage: {
      height: 300,
      content: makePreview(dark),
      ready: true,
    },
  }).mount(mount);

  const logo = chat.el.querySelector(".claude-tool-logo");
  if (logo) logo.innerHTML = STAR_SVG;
}

build(document.getElementById("light"), "light");
build(document.getElementById("dark"), "dark");

window.__ready = true;
```

--------------------------------

### CSS for Pricing Section Preview

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/preview.html

This CSS defines the visual appearance of the pricing tiers, including styles for light and dark themes, a highlighted 'Pro' tier, and interactive elements like buttons.

```css
:root {
  color-scheme: light;
}
body {
  margin: 0;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
  background: #f4f1ea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.shot {
  width: 440px;
}
/* A generic "result" that fades into the loading stage. */
.preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px;
  align-content: center;
  background: linear-gradient(135deg, #f6f3ee, #eae5db);
  color: #2a2721;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.preview.dark {
  background: linear-gradient(135deg, #23241f, #17180f);
  color: #f3f0e8;
}
.tier {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 12px 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview.dark .tier {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.tier.hot {
  border-color: #d97757;
  box-shadow: 0 6px 18px rgba(217, 119, 87, 0.22);
}
.tier b {
  font-size: 12px;
}
.tier em {
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
}
.tier .row {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.09);
}
.preview.dark .tier .row {
  background: rgba(255, 255, 255, 0.14);
}
.tier button {
  margin-top: auto;
  border: 0;
  border-radius: 7px;
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.07);
  color: #2a2721;
}
.preview.dark .tier button {
  background: rgba(255, 255, 255, 0.12);
  color: #f3f0e8;
}
.tier.hot button {
  background: #d97757;
  color: #fff;
}
```

--------------------------------

### Replay Animation

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/vanilla.html

Triggers a replay of the component's loader-to-reveal animation. It temporarily sets the component's ready state to false and then back to true after a short delay.

```javascript
// Replay the loader → reveal cross-fade without a full rebuild.
document.getElementById("replay").addEventListener("click", () => {
  if (!chat) return;
  chat.setReady(false);
  setTimeout(() => chat.setReady(true), 650);
});
```

--------------------------------

### Handle Theme Selection

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/vanilla.html

Attaches event listeners to theme selection buttons. Clicking a button updates the component's theme state and re-renders the component to apply the new theme.

```javascript
// Theme is a segmented control rather than a raw input.
const themeButtons = [...form.querySelectorAll("[data-theme]")];
for (const btn of themeButtons) {
  btn.addEventListener("click", () => {
    state.theme = btn.dataset.theme;
    themeButtons.forEach(b => b.setAttribute("aria-pressed", String(b === btn)));
    render();
  });
}
```

--------------------------------

### ClaudeWindow Vanilla JavaScript API

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

The vanilla JavaScript API for ClaudeWindow provides methods to interact with the chat interface programmatically.

```APIDOC
## ClaudeWindow(options) - Vanilla JavaScript

### Description

Initializes a vanilla JavaScript ClaudeWindow instance. Accepts an options object with fields similar to the React props, and a nested `stage` object for stage-related configurations. Returns a handle to control the instance.

### Options

- `prompt` (string): The user's prompt bubble.
- `response` (ReactNode): Claude's reply copy.
- `tool` (ToolCall): `{ name, call, title?, logo? }` tool-call line.
- `stage`: Object for stage configuration:
  - `src` (string): Source for the stage content.
  - `title` (string): Title for the stage.
  - `height` (number | string): Height of the stage.
  - `ready` (boolean): Whether the stage is ready.
  - `content` (ReactNode): Direct content for the stage.

### Handle Members

- `el` (HTMLElement): The root element of the ClaudeWindow.
- `stage` (HTMLElement): The stage element (`.board-stage`).
- `frame` (HTMLIFrameElement): The built-in iframe element.

### Methods

- `setPrompt(text: string)`: Replaces the user prompt text.
- `setResponse(text: string)`: Replaces Claude's response copy.
- `setToolTitle(text: string)`: Replaces the tool-line title.
- `setReady(ready?: boolean)`: Reveals or re-hides the stage.
- `setTheme(theme: "auto" | "light" | "dark")`: Sets the color scheme.
- `mount(parent: HTMLElement)`: Appends the ClaudeWindow to a specified parent element. Chainable.
- `destroy()`: Removes the ClaudeWindow instance from the DOM.
```

--------------------------------

### ClaudeWindow React Component

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

The ClaudeWindow React component allows for the creation of a chat-like interface. It accepts various props to customize the appearance and behavior of the chat window.

```APIDOC
## ClaudeWindow React Component

### Description

A React component for rendering a chat interface, similar to Claude's.

### Props

#### `prompt` (string) - Required

The user's prompt bubble.

#### `response` (ReactNode) - Optional

Claude's reply copy.

#### `tool` (ToolCall) - Optional

Represents a tool call with `name`, `call`, and optional `title` and `logo`.

#### `children` (ReactNode) - Optional

Stage content, typically an `<iframe>`. Omit for none.

#### `ready` (boolean) - Optional, Default: `false`

Controls the visibility of the stage by cross-fading the loader out.

#### `stageHeight` (number | string) - Optional, Default: `300`

Sets the height of the stage. Accepts a number for pixels or a string for verbatim values.

#### `avatar` (string) - Optional, Default: `"You"`

The avatar displayed in the rail, typically a monogram.

#### `model` (string) - Optional, Default: `"Opus 4.8"`

The label for the composer model.

#### `effort` (string) - Optional, Default: `"High"`

The label for the composer mode.

#### `placeholder` (string) - Optional, Default: `"Reply to Claude…"`

The placeholder text for the composer input.

#### `footnote` (ReactNode) - Optional, Default: `Claude's disclaimer`

Text displayed under the composer.

#### `theme` ("auto" | "light" | "dark") - Optional, Default: `"auto"`

Sets the color scheme. `"auto"` respects `prefers-color-scheme`.
```

--------------------------------

### Bind UI Controls to Component State

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/examples/vanilla.html

Binds input elements to the component's state object. Changes in input values update the state and re-render the component. Handles checkboxes and text inputs.

```javascript
// Seed inputs from state, then bind them back to it.
const form = document.getElementById("controls");
for (const control of form.querySelectorAll("[data-bind]")) {
  const key = control.dataset.bind;
  if (control.type === "checkbox") control.checked = Boolean(state[key]);
  else control.value = state[key];
  control.addEventListener("input", () => {
    state[key] = control.type === "checkbox" ? control.checked : control.value;
    render();
  });
}
```

--------------------------------

### Customizing Claude Window Accent Color

Source: https://github.com/zpg6/claude-chat-mockup/blob/main/README.md

Override the default accent color for the Claude window by setting the `--cl-accent` CSS variable. This allows for custom theming within your own CSS.

```css
.claude-window {
    --cl-accent: #7c5cff;
}
```
Tokens:
Raw