Can I get full TypeScript support for my bot actions?

Yes, the skill provides patterns for using triple-slash references to link ADK-generated type files directly to your frontend code, ensuring your action inputs and outputs are fully typed.

What is the benefit of the service layer pattern mentioned?

The service layer pattern decouples your UI components from the Botpress client, allowing for reusable, type-safe functions that handle action calls, error logging, and data transformation in one place.

How does this skill handle Botpress authentication?

It implements a production-ready pattern using cookie-based Personal Access Token (PAT) storage and OAuth callback flows, rather than less secure localStorage methods.

Does this work with React state management?

It specifically includes patterns for using Zustand to manage client instances and React Query (TanStack Query) for handling mutations, loading states, and cache invalidation.

Botpress ADK Frontend Integration

Name: Botpress ADK Frontend Integration
Author: botpress

bybotpress

•

API 开发

Integrates frontend applications with Botpress ADK bots using type-safe patterns for authentication, client management, and action calls.

This skill provides a comprehensive set of production-tested patterns and guidelines for developers building frontend interfaces that connect to Botpress ADK bots. It simplifies complex tasks like implementing secure cookie-based OAuth flows, managing stateful API clients with Zustand, and ensuring end-to-end type safety through ADK-generated TypeScript definitions. By providing standardized implementation strategies for React and the official Botpress client, it ensures your frontend architecture follows best practices for performance, security, and developer experience.

主要功能

01Zustand-powered client state management and caching

02Type-safe bot action calls and mutations

03Standardized patterns for error handling and optimistic updates

046 GitHub stars

05Secure cookie-based authentication and OAuth flows

06End-to-end type safety with triple-slash references

使用场景

01Synchronizing TypeScript types between bot logic and frontend code

02Building a custom web dashboard that interacts with a Botpress bot

03Implementing secure login and route protection for bot users

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add botpress/skills adk-frontend

For use in Claude.ai and ChatGPT

Download Skill