For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dashboard
User GuideDeveloper GuidesAPI Reference
User GuideDeveloper GuidesAPI Reference
  • Getting Started
    • What is Runtype?
    • Creating your account
    • Platform Keys vs. BYOK
    • Understanding the Runtype UI
    • Quickstart: Social Media Post Generator
    • Quickstart: From Agent to Chat Widget
  • Dashboard
    • What is the Dashboard?
    • Daily Executions
  • Playground
    • What is the Playground?
  • Products & Surfaces
    • What are Products?
    • What are Surfaces?
    • Creating a Product
    • Setting up a Chat Surface
    • Setting up an API Surface
    • Setting up an MCP Surface
    • Setting up an A2A Surface
    • Setting up a Slack Surface
    • MCP authentication
    • Authenticating with product API keys
    • Embedding the chat widget (script tag)
    • Embedding the chat widget (React)
    • Surface orchestration modes
    • Product views
    • Adding Capabilities to a product
    • Connecting external agents
    • How A2A works
    • Connecting to Cursor / VS Code
    • Connecting to Claude Desktop
    • Scoping API keys to capabilities
    • Auto-generated OpenAPI spec
    • Calling your API endpoints
    • Client tokens and domain restrictions
    • AI-powered theme generation
    • Widget theming and customization
    • Product versioning and status
  • Flows
    • What are Flows?
    • Creating and Editing Flows
    • Flow step types overview
    • Agent and Flow Templates
    • Using prompt steps
    • Using transform-data steps
    • Using conditional steps
    • Using fetch-url and api-call steps
    • Using record steps (upsert/retrieve)
    • Flow variables and templates
    • Flow versioning and publishing
    • Running flows in batch
    • Handling batch failures
    • Debugging flows
  • Agents
    • What are Agents?
    • Creating and configuring Agents
    • Agent tools
  • Records
    • What are Records?
    • Creating and managing records
    • Using records in flows
    • Filtering and searching records
  • Tools
    • What are Tools?
    • Built-in Tools
    • Creating custom tools
    • Creating external tools
    • Runtime tools
  • Evals
    • What are Evals?
    • Running an Eval
    • Interpreting eval results
  • Schedules
    • What are Schedules?
    • Automating batch processing
  • Logs
    • What are Logs?
    • Working with Logs
  • Integrations
    • Connecting AI model providers
    • Slack integration
    • Google Workspace integration
    • GitHub integration
    • Linear integration
    • Weaviate (vector search)
    • Firecrawl (web scraping)
    • Exa (web search)
  • Settings
    • What's in Settings?
    • Available AI models
    • What are Organizations?
    • Managing AI models
    • Managing API keys
    • Billing and plans
    • Usage data
    • Team members and permissions
    • Appearance and preferences
    • Integrations (PostHog, Weaviate, Daytona)
  • Troubleshooting & FAQ
    • FAQ
    • Rate Limits and Usage
    • Managing Runtype with Claude
    • Flow execution failures
    • Common errors and solutions
    • Authentication issues
Dashboard
LogoLogo
On this page
  • Getting the embed code
  • Installation
  • Usage
  • Client Tokens
  • Next steps
Products & Surfaces

Embedding the chat widget (React)

Was this page helpful?
Previous

Surface orchestration modes

Next
Built with

For React applications, use the React embed code from the Ship tab of your chat Surface for tighter integration with your app’s component lifecycle.

Getting the embed code

  1. Open your Product and select the chat Surface.
  2. Go to the Ship tab.
  3. Select the React tab.
  4. Select or create a Client Token.
  5. Copy the generated React code.

The generated code uses @runtypelabs/persona to initialize the chat widget within a React component, including cleanup on unmount.

Installation

Install the Persona package:

$npm install @runtypelabs/persona

Usage

Paste the generated code from the Ship tab into your React component. The code handles:

  • Widget initialization with your Client Token and theme
  • Mounting to a container element via useRef
  • Cleanup via destroy() on component unmount

The Ship tab generates a complete working component. Customize it further as needed for your application.

Client Tokens

Chat widgets use Client Tokens (with the ct_live_ or ct_test_ prefix) instead of API keys. They are safe to expose in client-side code. Create and manage them in the Auth tab of your chat Surface.

Next steps

  • Widget theming and customization
  • Client tokens and domain restrictions
  • Embedding the chat widget (script tag) for non-React sites