Backprompter

Backprompter Documentation

Everything you need to build, test, and ship AI agents — from your first system prompt to a production chat UI for your users.

What is Backprompter?

Backprompter is an AI agent development and deployment platform. It gives developers a workspace to create and refine AI agents (via system prompts), chat with them interactively, run structured evaluations, and then deploy a polished chat interface for end users — all without writing any backend code.

Ways to Use Backprompter

Build and test your agents with the Backprompter UI and deploy them in multiple ways:

Core Concepts

App

An application for your users. An app contains agents and app-related files that your agents can use to respond to your users.

Agent

An AI assistant defined by configurations like system prompt, model, and other parameters. Agents live inside an app.

Builder

A named developer identity within your account. Builders are used to track who authored changes.

Mock User

A synthetic end-user profile used during testing. Provides realistic user context to the agent.

Version

A snapshot of an agent's configuration at a point in time. Versions let you compare and roll back changes.

Evaluation

A scored record of a conversation — human feedback, an AI evaluator score, and notes. Stored for later review.

Getting Started

After signing in, the main Backprompter UI is divided into a left sidebar for configuration and a right chat pane for testing.

Screenshot: main UI overview (sidebar + chat pane)

1. Set Your Builder Identity

Before creating anything, select or create a Builder in the top section of the sidebar. Single account can share multiple builders. It allows you to collaborate and track versions by builder identity.

2. Create an App

  1. Click the + button next to Apps in the sidebar.
  2. Give the app a name and optional description.
  3. You don't need to have an OpenRouter or OpenAI API key. But if you want to use your own keys you can optionally enable Bring Your Own Keys (BYOK) to supply your own OpenRouter and/or OpenAI API key.
  4. Click Save. The app now appears in the Apps dropdown.
BYOK When BYOK is enabled, your API keys are encrypted before being stored. They are never displayed after saving. Use the Edit Key button in the app modal to rotate them later.

3. Create an Agent

  1. Select your app in the Apps dropdown.
  2. Click + next to Agents.
  3. Fill in the Name and Summary fields.
  4. Write the System Prompt — this defines the agent's behavior and personality.
  5. Configure the model, temperature, max tokens, artifact type, and RAG source (see below).
  6. Click Test Now to immediately start chatting, or Save and Commit to save as a committed version which you can reload anytime.
Screenshot: the Create Agent modal with its configuration fields

Agent Configuration Options

When creating or editing an agent, you can configure:

Combo-Agents

A combo-agent is a special agent that orchestrates multiple sub-agents. Once you have built some agents, you can build a combo-agent simply by tagging other agents in the system prompt. You can describe in natural language how and when to call the sub-agents, and the combo-agent will handle the routing and context management automatically.

Example system prompt that creates a combo-agent:


        1. Call @ResearchAgent with the user's question.
        2. If @ResearchAgent is unable to answer, tell the user that the question is out of scope.
        3. If @ResearchAgent is able to answer, pass the result to @SummaryAgent and ask it to produce a one-paragraph summary.
        4. Forward the summary to the user.
Tips
  • Sub-agent names must match exactly (case-sensitive) the agent names inside the same app. Typing @ in the system prompt will trigger an autocomplete dropdown showing all available agents to reference.
  • As shown in the above example, a combo-agent can synthesize a response on its own based on the sub-agents response and context or forward the sub-agent's response.

Meta-Router

The meta-router automatically picks the best agent to handle a user message. It is useful when a single app contains several specialized agents and you want the system to route automatically.

  1. To include an agent in the meta-router, ensure Routable through meta-router is checked.
  2. Click the 🔀 button in the Agents section header to open the routing settings.
  3. Set a Default agent — used as a fallback when routing confidence is low.
  4. Optionally enable Prefetch default agent to run the default agent in parallel with routing, reducing latency.
  5. Click Save.

To test the behavior of meta-router, select Auto in the agent dropdown on the chat interface.

Testing Agents

Mock Users

Mock users let you test how an agent responds to different user personas without needing real users. Each mock user has a name, a short summary, and a longer detailed profile that gets injected into the agent's context.

  1. Click + next to Mock Users in the sidebar.
  2. Fill in the name, summary, and profile fields.
  3. Click Save, then select the mock user from the dropdown before chatting.

User Simulation

The Simulate User action in the sidebar's Actions section runs an automated multi-turn conversation. The platform will generate synthetic user messages based on the selected mock user's profile and send them to the current agent automatically (up to 4 turns by default). This is useful for quickly stress-testing an agent without typing manually.

Evaluation

After a conversation, click Evaluate to open the evaluation modal. You can:

All saved evaluations are viewable via View All Evaluations in the Actions section. The table is sortable and filterable.

Screenshot: Evaluation modal with human feedback, rating, and a suggested system prompt update

Agent Versions

Every time you edit an agent and click Test Now, an editing version is created automatically. You can also create explicit snapshots at any time.

Agents can be downloaded as JSON (⬇️ button) and re-uploaded (⬆️) to the same or a different app.

Files & RAG

Upload files to an app so agents can retrieve relevant content at query time (Retrieval-Augmented Generation).

  1. Click 📁 Files in the app actions bar.
  2. Upload files (text, PDF, Office docs, code) or fetch a URL.
  3. Select one or more files, choose or create a Collection, and click Index for Search.
  4. On the agent, set RAG to Knowledge Base and choose the collection.

Files can also be attached directly to a single message using the Attach Files button in the chat composer.

Voice Chat

Backprompter supports real-time voice conversations using Deepgram's streaming speech-to-text and text-to-speech. Click the Voice button in the chat composer to start a voice session. The voice status indicator at the bottom of the chat pane shows the current state (idle, listening, speaking).

Note Voice chat requires microphone access in your browser and an active backend connection.

Billing & Credits

Backprompter has two plans. See the Pricing page for the full rate table; this is the short version.

Plans

Credits & pay-as-you-go

Dev Pro usage is charged against a prepaid credit balance shown in the billing badge in the app header. You top up credits from the billing panel. Charges include a per-call orchestration fee, the model's API cost plus a service markup, and storage for app configuration and RAG documents. Exact rates are on the Pricing page.

Bring Your Own Keys (BYOK) Supply your own OpenRouter or OpenAI key in the app settings and the model costs are billed directly to your key — only orchestration and storage fees apply. See BYOK under Getting Started.

API Access

You can call any agent from your own backend without using the Backprompter UI. Full details are available in the auto-generated API Reference for each app:

  1. Select an app in the sidebar.
  2. Click 🔌 API in the app actions bar to open the API Reference page.
  3. To authenticate server-to-server requests, go to 🚀 Deploy and click Generate API Key. Pass the key as the x-bp-api-key header.

The API Reference page documents every endpoint and shows live example payloads tailored to your app's agents.

Deploying a Chat UI for End Users

Backprompter can deploy a hosted chat interface so your users can interact with your agents without needing access to the developer UI. The deployed UI is a separate, standalone web app.

  1. Select the app you want to deploy.
  2. Click 🚀 Deploy in the app actions bar.
  3. Under Deploy a chat UI, configure the End-user login methods (see below).
  4. Click Deploy UI.
  5. Wait for the deployment to complete. A link to your live chat URL will appear.
Screenshot: Deploy modal showing API access and the chat UI deployment section

You can re-deploy at any time to update settings (e.g. change auth modes or add new agents). Existing users are not affected until they refresh.

Auth Modes

Choose one or more methods your end users can use to sign in:

Disabling Secret Code If you previously deployed with Secret code enabled and then uncheck it and redeploy, all existing secret-code access will be revoked immediately.

Secret Keys

When Secret code is enabled, click Generate Secret Key to create a new one-time access key. Secret keys are shown only once — copy and distribute them before closing the modal.

The keys table shows all existing keys with their creation date. You can revoke individual keys at any time using the Revoke action in the table.

Screenshot: the Deploy modal showing the secret keys table with Copy/Revoke actions

Your Deployed URL

The deployed chat UI is hosted at:

https://bptr-chat.web.app/#/<your-app-id>

Share this URL with your end users. The #/<your-app-id> fragment ensures users land directly in the correct app.

Tip Your app ID is shown in the API Reference page. It is also the last segment of the URL path visible in the browser when your app is selected.

SDK Integration

Detailed guides for each deployment option.

Option 1 — Deploy a Chat UI (No Code Required)

The fastest path to production. Backprompter hosts a complete, polished chat interface for your end users — no frontend or backend code needed.

  1. Build and configure your agents in the Backprompter UI.
  2. Click 🚀 Deploy in the app actions bar.
  3. Choose the login methods you want your users to see (anonymous, email/password, Google, or secret code).
  4. Click Deploy UI. Within moments your app is live at:
    https://bptr-chat.web.app/#/<your-app-id>
Best for Internal tools, demos, beta products, or any scenario where you don't want to build your own chat UI.

Option 2 — Backprompter SDK on Your Own Frontend

Build your own custom UI while letting Backprompter handle authentication and agent calls. The SDK authenticates users through Backprompter's multi-tenant auth system, so users get persistent accounts and their data is scoped to your app.

Prerequisite You must first Deploy UI from the Backprompter dashboard with the login methods you want to support (e.g. email/password, Google, anonymous). This registers your app in Backprompter's multi-tenant auth system and enables the SDK's sign-in methods for your App Key.

Setup

<!-- 1. Include the SDK -->
<script src="https://cdn.jsdelivr.net/npm/backprompter-sdk/dist/backprompter-full.min.js"></script>

<script>
  // 2. Point the SDK at your app (find your App Key in the API Reference page)
  Backprompter.setAppKey('your-app-key');
</script>

Sign users in

// Email + password
await Backprompter.signIn(email, password);

// Anonymous (no sign-up required)
await Backprompter.signInAnonymously();

// Sign out
await Backprompter.signOut();

Call an agent

const result = await Backprompter.run({
  agentId: 'your-agent-name',   // omit to let the meta-router pick
  userPrompt: userMessage,
  conversationHistory,          // array of { role, content } pairs
  profileString,                // optional: personalise responses with a user profile
});

console.log(result.response);  // agent's reply
Best for Custom chat UIs, branded experiences, or apps that need Backprompter's built-in user accounts and per-user data storage without running your own backend.

Option 3 — Backprompter SDK on Your Own Backend

Call agents from your own server using a Backprompter API key. Your backend handles user authentication however you like; Backprompter never sees your users' credentials.

Generate an API key

  1. Open the 🚀 Deploy modal for your app.
  2. Click Generate API Key and copy the key — it is shown only once.

Install the server SDK

npm install backprompter-server-sdk

Call an agent

import BackprompterServer from 'backprompter-server-sdk';

const bp = new BackprompterServer({
  apiKey: process.env.BACKPROMPTER_API_KEY,
  tenantId: process.env.BACKPROMPTER_APP_KEY,
});

const result = await bp.run({
  agentId: 'your-agent-name',
  userPrompt: req.body.message,
  conversationHistory,         // array of { role, content } pairs
  profileString,               // optional: any user context you want to inject
});

res.json({ reply: result.response });
How auth works Requests authenticated with x-bp-api-key bypass Backprompter's Firebase auth entirely. Your backend is responsible for verifying that the caller is allowed to make the request before forwarding it to Backprompter.
Best for Existing backends, server-side rendering, or any integration where you already have your own user authentication and just want to add AI agent capabilities.

Tutorials

Step-by-step walkthroughs for the most common Backprompter workflows. Open the Tutorials page →