Skip to main content
This tutorial gets you from zero to a working Char agent in your application. Claude Code handles the installation, configuration, and verification.
Prefer manual setup? See Get Started Manually for step-by-step installation without Claude Code.

​
What you’ll build

By the end of this tutorial, you’ll have:
  • The Char agent embedded in your web application
  • Styling that matches your app’s theme
  • Your first WebMCP tool that lets the agent interact with your UI
  • Verification that everything works

​
Prerequisites

  • Claude Code installed
  • A web application (React, Vue, Next.js, or any HTML project)
  • Your app running on localhost

​
Step 1: Install the plugin

In Claude Code, run: 
/plugin marketplace add WebMCP-org/char-plugin
Then install the Char plugin: 
/plugin install char@webmcp-org-char-plugin
You’ll see confirmation that the plugin installed successfully. This adds four MCP servers (chrome-devtools, char-docs, webmcp-docs, char-saas) and the /char:setup skill.

​
Step 2: Run setup

/char:setup
Or just tell Claude: “Set up Char in my app” Claude will guide you through these phases:
PhaseWhat happens
DetectIdentifies your framework
EmbedInstalls @mcp-b/char, adds the component
PositionAsks how you want the agent to appear
StyleMatches your app’s theme
First ToolCreates a WebMCP tool for your UI
TestTakes screenshots to verify it works
First time? A browser window opens for authentication. Sign in, name your organization, and authorize. This only happens once.

​
Step 3: Test it yourself

Claude will prompt you to test the agent:
  1. Open your app in the browser
  2. Click the chat bubble
  3. Ask the agent to perform the action you created a tool for
If it works, you’re done with the basics.

​
What’s next

Claude will ask if you want to continue with:
  • Comprehensive coverage — The integration-specialist agent analyzes your codebase and creates tools for all forms, buttons, and data displays
  • Production SSO — Configure your identity provider for production deployment
You can do these now or come back later.

​
Troubleshooting

​
Plugin not found

/plugin marketplace update webmcp-org-char-plugin
Restart Claude Code.

​
Agent not appearing

  1. Check the browser console for errors
  2. Confirm @mcp-b/global is imported first in your entry file
  3. Confirm the <char-agent/> component is in your HTML

​
Debug mode

Add enable-debug-tools to control the agent directly from Claude Code: 
<char-agent dev-mode='{"anthropicApiKey":"..."}' enable-debug-tools />
This exposes WebMCP tools for opening/closing the panel, sending messages, and inspecting state.

​
Next steps

Add WebMCP Tools

Create tools for forms, buttons, and data

Create Skills

Guide agent behavior with workflows