Quickstart: From Agent to Chat Widget

In this quickstart you’ll create an AI Agent, give it a personality and tools, and embed it as a chat widget on your website. The whole process takes about five minutes.

What you’ll have at the end: A live chat widget on your site powered by your own AI Agent — ready to help your users with whatever you’ve trained it to do.

This guide uses a website as the example, but the chat widget isn’t limited to websites. You can embed it anywhere that supports HTML or React — inside a web app, a mobile app’s webview, an internal tool, a documentation site, or any other place your users need help.

Before you start

All you need is a free Runtype account. Sign up at use.runtype.com if you haven’t already.

Runtype provides platform keys for popular AI models out of the box, so you don’t need to bring your own API keys to get started.

Step 1: Create a new Product

Navigate to the Products section from the sidebar and click New Product.

You’ll be asked to choose a Surface type — this is how your users will interact with your product. Select Chat Widget.

Next, give your product a name and choose a capability option:

• New Agent — Creates a fresh AI Agent for your product
• Use Existing — Select an Agent or Flow you’ve already built
• Skip for now (we’ll choose this for our example) — Add capabilities later in the editor

Click Create and Runtype will set up:

• A Product — the container for everything you’re building
• An Agent — the AI brain that powers your chat (default agent added for a chat surface if you skipped)
• A Chat Surface — the widget your users will interact with

You’ll be taken to the Product editor with the Surface panel open, ready to configure.

Think of a Product as a project folder. It holds your Agent (the AI Capability), the chat widget (the Surface), and any other Surfaces you add later like API endpoints or Slack bots. For a broader overview, see Creating a Product.

Step 2: Configure your Agent

After creating the Product, you’ll land in the Product editor with the Surface panel open. Click into your Agent capability to configure it. If you’re new to the layout, see Understanding the Runtype UI.

Write a system prompt

The system prompt tells your Agent how to behave.

Pick one that fits your use case, or write your own. Here’s a custom example for a product support Agent:

You are a support assistant for Acme Inc.
Help customers with questions about our products and services.
Be friendly and concise. If you don't know the answer, let the
customer know you'll escalate their question to a human.

You can always come back and refine your system prompt later. Start simple and iterate based on how the Agent performs.

Choose a model

Select which AI model powers your Agent. Runtype supports models from OpenAI, Anthropic, Google, and more. The default model works great for most use cases.

Add tools (optional)

Tools give your Agent the ability to take actions — like searching the web, looking up data, or calling external APIs. You can skip this for now and add tools later.

Some popular tools to consider:

• Exa — Web search
• Firecrawl — Web scraping and content extraction

Click Save when you’re happy with your Agent configuration. For a deeper walkthrough, see Creating and configuring Agents.

Step 3: Style your widget

Next, you’ll be back at your Product. Select “Save & Continue” to move to the next step: styling your widget.

Runtype offers several theme presets to get you started quickly. Pick one that matches your brand, or click Advanced Editor to fine-tune colors, fonts, and layout.

You can also use the AI theme generator inside the Advanced Editor to create a custom theme automatically. There are two ways to use it:

• From a website URL — Paste your website address and Runtype will take a screenshot, extract your brand colors, and generate a matching theme.
• From a description — Describe the look you want in plain text (e.g. “dark mode with purple accents”) and optionally attach reference images. Runtype will generate a theme based on your description.

You can preview how the widget will look in collapsed, expanded, and fullscreen modes right from this step.

You can skip this step and come back to it later. The default theme looks clean and professional on most sites. Once you’re ready, click Continue.

Step 4: Embed the widget on your site

The final onboarding step gives you the embed code. Runtype automatically creates a client token — a secure key that connects the widget to your Agent.

Option A: Script tag (any website)

Copy the script tag and paste it into your website’s HTML, just before the closing </body> tag:

1
<script
2
  src="https://cdn.jsdelivr.net/npm/@runtypelabs/persona@latest/dist/install.global.js"
3
  data-runtype-token="YOUR_CLIENT_TOKEN"
4
></script>

That’s it. The widget will appear in the bottom-right corner of your page.

Option B: React / bundler app

If you’re using React or another bundler-based app, install the package and initialize the widget:

$
npm install @runtypelabs/persona

1
import "@runtypelabs/persona/widget.css";
2
import { initAgentWidget, markdownPostprocessor } from "@runtypelabs/persona";
3
4
initAgentWidget({
5
  target: "body",
6
  config: {
7
    clientToken: "YOUR_CLIENT_TOKEN",
8
    postprocessMessage: ({ text }) => markdownPostprocessor(text),
9
  },
10
});

For local development, the widget works on localhost automatically. When you’re ready to go live, add your production domain to the Allowed Origins list in the Surface settings. For more detail, see Setting up a chat Surface.

Step 5: Test it out

Send a message in the chat widget — either from the Runtype dashboard preview or from your own site. You should see your Agent respond according to the system prompt you wrote.

If something doesn’t feel right, head back to your Product and click the Agent Capability to adjust the system prompt, model, or tools. If you want to inspect behavior after testing, see What are Logs?.

Your Product can have multiple Capabilities and multiple Surfaces. For example, you could add a knowledge base search Flow as a Capability, then expose it through both the chat widget and an API endpoint.

What’s next?

Now that your chat widget is live, here are a few things you can do to make it even better:

• Creating and configuring Agents — Give your Agent access to Flows (multi-step automations) or connect it to other Agents as tools. This lets it handle more complex tasks.
• What are Surfaces? — Deploy the same Agent via an API endpoint, Slack bot, MCP server, or other channels — all from the same Product.
• What are Logs? — Check your Agent’s conversations in the dashboard to see how users are interacting with it and spot areas for improvement.
• Running an Eval — Create Evaluations to systematically measure your Agent’s response quality and track improvements over time. If you are new to the concept, start with What are Evals?.