Char Setup Assistant - Claude Code Skill

A production-ready Claude Code skill that guides you through setting up Char - an AI agent platform with WebMCP browser automation tools and embedded chat widgets.


What This Skill Does

Helps you integrate Char AI agents into websites with:
- WebMCP Tools - Browser automation (click, fill forms, navigate, screenshot)
- Embedded Agent Widget - Drop-in chat UI powered by @mcp-b/char
- Visual Integration - Automatic theme matching with your website's design
- Stateless Mode - Quick setup using your own Anthropic API key (no backend needed)

Features

✨ Automated Setup
- Creates demo pages or adds to existing websites
- Auto-detects and matches your website's design (colors, fonts, spacing)
- Takes before/after screenshots for verification
- Generates matching theme configuration

🎨 Visual Integration
- Extracts color palette from your page
- Matches fonts and typography
- Applies consistent border radius
- Ensures accessibility (WCAG contrast ratios)

🛠️ Developer Experience
- Quick reference cheat sheet
- Success criteria checklist
- Automated prerequisite verification
- 10 copy-paste ready recipes
- Comprehensive troubleshooting guide

🔧 Progressive Disclosure
- Core setup: ~260 lines, loads instantly
- Detailed docs: Loaded only when needed
- 37.5% token usage reduction vs. v1.0

Quick Start

$3

See docs/INSTALLATION.md for detailed installation instructions.

Quick install:
``bash


Copy to your Claude Code skills folder

cp -r packages/claude-code-skill-char-setup/skills/char-setup ~/.claude/skills/

Or install to your project

mkdir -p .claude/skills
cp -r packages/claude-code-skill-char-setup/skills/char-setup .claude/skills/
`

$3

`bash
cd packages/claude-code-skill-char-setup/skills/char-setup
node scripts/verify-setup.js

Optional: Check API key format


node scripts/verify-setup.js --check-api-key sk-ant-...
`

Expected output:
`
✓ Node.js 24.11.1 (>= 14.0.0)
✓ Google Chrome 120 found (>= 90)
✓ Demo template found
✓ Network connectivity to api.anthropic.com
✓ All required checks passed!
`

$3

Just ask Claude:

> "Set up Char on my website and match my page's design"

or

> "Create a Char demo page"

The skill will:
1. ✅ Create or modify your HTML page
2. ✅ Extract your page's design (colors, fonts)
3. ✅ Generate matching theme configuration
4. ✅ Add the embedded agent widget
5. ✅ Take verification screenshots
6. ✅ Open the page in your browser

What You Need

$3

- Anthropic API Key - Get one at https://console.anthropic.com/settings/keys
- Chrome, Edge, or Chromium 90+ - Required for WebMCP tools
- Node.js 14+ - For verification script

$3

- Chrome DevTools MCP Server - For automated browser testing and visual integration
`bash
claude mcp add --transport stdio chrome-devtools -- \
npx -y @mcp-b/chrome-devtools-mcp
`
- WebMCP Docs MCP - For documentation lookup (usually pre-installed)

Documentation

$3

- Installation Guide - Detailed installation instructions
- Agent Integration Guide - Using the skill in agents
- Quick Reference - Command cheat sheet
- Recipes - 10 copy-paste ready patterns

$3

- Customization Guide - Complete theming reference
- Visual Integration - Design matching best practices

$3

- WebMCP Tools - Complete tool documentation
- Troubleshooting - Common issues and solutions

$3

- Production Deployment - Stateful backend setup

$3

- Changelog - Version history
- Contributing - How to improve this skill

File Structure

`
packages/claude-code-skill-char-setup/
├── README.md # This file
├── docs/
│ ├── INSTALLATION.md # Installation guide
│ └── AGENT_INTEGRATION.md # Agent integration guide
└── skills/
└── char-setup/
├── SKILL.md # Main skill instructions (~260 lines)
├── CHANGELOG.md # Version history
├── CONTRIBUTING.md # Contribution guide
├── references/
│ ├── CUSTOMIZATION.md # Theme configuration
│ ├── VISUAL_INTEGRATION.md # Design integration
│ ├── WEBMCP_REFERENCE.md # Tool documentation
│ ├── TROUBLESHOOTING.md # Common issues
│ ├── PRODUCTION.md # Production deployment
│ └── RECIPES.md # Common patterns
├── assets/
│ ├── templates/
│ │ └── demo.html # Demo page template
│ └── scripts/
│ └── extract-page-styles.js # Style extraction
└── scripts/
└── verify-setup.js # Prerequisite verification
`

Example Usage

$3

`
User: Create a Char demo page

Skill: Creating demo page with:
- Contact form (name, email, message)
- Interactive counter
- Char embedded AI agent widget

Where should I save it?

User: ./demo.html

Skill: [Creates page, verifies prerequisites]
What's your Anthropic API key?

User: sk-ant-api03-xxxxx

Skill: [Injects API key, opens in browser]
✅ Demo created!
💡 Try saying: "Fill out the contact form with test data"
`

$3

`
User: Set up Char on my index.html and match my page's design

Skill: 📸 Taking baseline screenshot...
🎨 Extracting page styles...
- Primary: #667eea (purple gradient)
- Background: #ffffff
- Font: -apple-system, BlinkMacSystemFont, 'Segoe UI'
- Radius: 8px

⚙️ Generating matching theme configuration...
✨ Adding Char widget with custom theme...
📸 Taking verification screenshots...
✅ char-integration-collapsed.png
✅ char-integration-expanded.png
✅ char-integration-mobile.png

👀 Visual integration complete!
Char seamlessly matches your page design.
`

$3

`
User: Add Char to my landing page at ./public/index.html

Skill: Reading your page...
I'll add the Char widget before .
What's your Anthropic API key?

User: sk-ant-xxxxx

Skill: [Adds widget, preserves existing code]
✅ Done! Opening in browser...
`

WebMCP Tools Available

Once set up, your embedded agent can:

| Tool | What It Does |
|------|--------------|
| click | Click buttons, links, elements |
| fill | Fill form inputs |
| navigate | Navigate to URLs |
| take_snapshot | Capture page text content |
| take_screenshot | Capture visual screenshot |
| evaluate_script | Run JavaScript on page |
| hover | Hover over elements |
| press_key | Keyboard input |

See WEBMCP_REFERENCE.md for complete documentation.

Stateless vs Production

$3

- ✅ Quick setup with your API key
- ✅ Perfect for development/testing
- ✅ No backend infrastructure
- ✅ Full WebMCP tool support
- ✅ Visual design matching
- ❌ No user thread persistence
- ❌ Costs on your API account

$3

- ✅ Stateful backend with Durable Objects
- ✅ Per-user thread persistence
- ✅ Organization dashboard
- ✅ Usage analytics
- ✅ Managed infrastructure
- ⏳ Requires Cloudflare Workers setup

See PRODUCTION.md for production deployment.

MCP Integration

This skill adapts based on available MCP servers:

$3

Automated workflow:
- Takes screenshots before/after
- Extracts page design automatically
- Generates matching theme
- Verifies visual integration
- Tests WebMCP tools functionality

Install:
`bash
claude mcp add --transport stdio chrome-devtools -- \
npx -y @mcp-b/chrome-devtools-mcp
`

$3

Manual workflow:
- Creates demo page
- Injects API key
- Provides manual testing instructions
- Recommends installing Chrome DevTools MCP

$3

For documentation lookup during setup:
`bash


Usually pre-installed, verify with:

/mcp

Look for: mcp__docs__SearchWebMcpDocumentation

`

Success Criteria

After setup, you should see:

✅ Page loads successfully
- HTML file opens in browser without errors

✅ Widget appears
- Chat pill visible in bottom-center or bottom-right

✅ Console confirms initialization
`
✅ Char embedded agent initialized!
💡 Try saying: "Fill out the contact form with test data"
`

✅ Agent responds
- Click the pill, type a message, get a response

✅ WebMCP tools work
- Agent can interact with page elements (click, fill forms)

If any check fails, see TROUBLESHOOTING.md.

Development

$3

1. Symlink to your skills directory:
`bash
ln -s $(pwd)/packages/claude-code-skill-char-setup/skills/char-setup ~/.claude/skills/char-setup-dev
`

2. Restart Claude Code

3. Test:
`
"Use the char-setup skill to create a demo page"
`

$3

`bash
cd packages/claude-code-skill-char-setup/skills/char-setup
node scripts/verify-setup.js
`

$3

Edit assets/templates/demo.html to customize the demo page.

The template uses CSS variables for easy style extraction:
`css
:root {
--brand-primary: #667eea;
--brand-secondary: #764ba2;
--bg-main: white;
--border-radius-base: 8px;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI';
}
`

Contributing

We welcome contributions! See CONTRIBUTING.md for:
- Bug report templates
- Feature request guidelines
- Pull request process
- Testing requirements
- Code style guidelines

Changelog

See CHANGELOG.md for version history.

Latest: v2.0.0 (2026-01-07)
- Progressive disclosure optimization (37.5% token reduction)
- Visual integration workflow
- Quick reference and success criteria
- Automated verification script
- 10 copy-paste ready recipes
- Contributing guide

License

MIT

Links

- WebMCP Documentation: https://webmcp.ai/docs
- Char Package: @mcp-b/char
- Claude Code: https://code.claude.com
- Anthropic Console: https://console.anthropic.com

Related Skills

- playwright-skill - Full Playwright browser automation
- webapp-testing - Anthropic's webapp testing skill
- dev-browser` - Browser automation for agents

Support

For issues or questions:
1. Check TROUBLESHOOTING.md
2. Review WEBMCP_REFERENCE.md
3. See RECIPES.md for common patterns
4. File an issue: https://github.com/WebMCP-org/char-ai-saas/issues

---

Made with ❤️ by the WebMCP team