Authentication

Pencil requires two separate authentication steps to fully function: Pencil Activation (to unlock the extension) and Claude Code Authentication (to enable AI-powered design features). Both must be completed before you can use Pencil.

Pencil Activation

When you launch Pencil for the first time, the extension will prompt you to activate your account. Follow these steps:

  1. Enter your email address when prompted by the activation dialog.
  2. Check your inbox for an activation code (this usually arrives within a few seconds).
  3. Enter the activation code back into Pencil to complete the process.

Troubleshooting Activation

  • Email not received — Check your spam or junk folder. Some corporate email filters may block the message. Try using a personal email address if the issue persists.
  • “Invite not found” error — This means your email is not yet on the allowlist. Join the waitlist at the Pencil website and wait for your invitation.
  • Repeated activation prompts — Restart your IDE completely. If the prompt keeps reappearing, try uninstalling and reinstalling the Pencil extension.

Claude Code Authentication

Claude Code authentication is required for all AI-powered features in Pencil, including design-to-code conversion, component generation, and intelligent suggestions. Run the following command in your terminal:

$ claude

This will open a browser window where you can authenticate with your Anthropic account. Once authentication is complete, your credentials are saved locally and Pencil will automatically detect them.

To verify that Claude Code is properly installed and authenticated, run:

$ claude --version

Common Issues

“Claude Code isn’t connected”

This means Pencil cannot find valid Claude Code credentials. Open your terminal and run the claude command to re-authenticate, then restart your IDE.

“Invalid API key”

This error typically occurs when there are conflicts between different authentication methods (e.g., an environment variable overriding CLI credentials). Remove any stale ANTHROPIC_API_KEY environment variables and re-run claude to refresh your credentials.

CLI works but Pencil says not logged in

If claude --version succeeds in your terminal but Pencil still reports you as unauthenticated, you may have a custom provider configuration that is interfering. Check your Pencil extension settings and ensure no custom API provider overrides are set.

Authentication Methods

Recommended: Claude CLI

The recommended way to authenticate is through the Claude CLI. It handles token management, automatic refresh, and secure local storage of credentials. Simply run:

$ claude

Alternative: API Keys

If you prefer to use an API key directly, set the ANTHROPIC_API_KEY environment variable:

# Add to your shell profile (.bashrc, .zshrc, etc.) export ANTHROPIC_API_KEY="sk-ant-...your-key-here"

Warning

Using API keys directly means you are responsible for key rotation and secure storage. Never commit API keys to version control. The Claude CLI method is preferred because it manages credentials automatically.

Security & Privacy

Pencil takes your security and data privacy seriously. Here is how authentication and data handling work under the hood:

  • The MCP (Model Context Protocol) server runs entirely on your local machine. No design data is transmitted to remote servers.
  • AI-powered features (design-to-code, component generation) send only the minimal required context to Claude’s API for processing.
  • Authentication credentials are stored locally on your filesystem and are never shared with third parties.
  • No telemetry or usage data is collected without your explicit consent.

Note on AI Features

When using AI-powered features, relevant design context (such as component structure and style properties) is sent to the Claude API to generate code. No data is sent to remote servers outside of these explicit AI feature invocations.

Last updated: February 22, 2026