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:
<script src="https://cdn.runtype.com/widget.js" data-token="ct_live_your_token_here"></script>That's it. The widget will appear in the bottom-right corner of your page.
Option B: React component
If you're using React, Runtype provides a component you can drop into your app:
import { AgentWidget } from '@runtypelabs/persona'
function App() {
return <AgentWidget token="ct_live_your_token_here" />
}
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?.