adk-frontend

Connect React/Vite frontends to Botpress ADK bots with typed actions and authentication.

11|1|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/botpress/skills --skill adk-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: adk-frontend
Source: https://github.com/botpress/skills/tree/main/skills/adk-frontend
Command: npx skills add https://github.com/botpress/skills --skill adk-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides production-ready frontend integration patterns for Botpress ADK, enabling developers to connect frontend apps to ADK bots with strong typing, secure authentication, and centralized client management.

Core Features & Use Cases

  • Typed action calls: Utilize generated BotActionDefinitions to call bot actions with complete input/output typing.
  • Authentication patterns: Implement PAT cookies and OAuth flows for secure, persistent user sessions.
  • Client management: Centralized API client store to share workspace- and bot-scoped clients across the app.
  • Type generation: Integrate triple-slash references to generated types for robust type safety and maintainability.
  • Use Case: Build a React app that authenticates with Botpress, reads user data, and invokes bot actions with end-to-end typing.

Quick Start

Install the Botpress ADK frontend skill, configure the client with workspace and bot IDs, authenticate via the CLI login flow, and perform a sample action using generated types.

Frequently Asked Questions about adk-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect a React frontend to Botpress ADK with type-safe action calls?

Authentication patterns for Botpress ADK include PAT cookies and OAuth flows. These mechanisms provide secure, persistent user sessions for frontend apps communicating with Botpress bots.

How does triple-slash type generation work for Botpress frontend integration?

Triple-slash type generation integrates references to generated types for robust type safety and maintainability. It enforces the use of generated types in a service layer for action calls, ensuring frontend code remains type-safe.

Do I need a centralized client store to manage Botpress workspace and bot clients?

A centralized API client store is required to share workspace- and bot-scoped clients across your frontend app. This client management approach maintains consistent configuration and secure access when communicating with Botpress.

Can I use this frontend integration pattern with Vite as well as React?

Yes, the frontend integration patterns support React and Vite applications connecting to Botpress ADK. Developers can authenticate via the CLI login flow, configure workspace and bot IDs, and perform actions using generated types.

What is the best way to maintain type safety when calling Botpress bot actions from a frontend?

The best way to maintain type safety is enforcing generated types through a dedicated service layer for action calls. Utilizing BotActionDefinitions provides complete input and output typing for all bot actions invoked from the frontend.