ADK Frontend Integration

What is ADK Frontend Integration?

• Authentication - Cookie-based PAT storage with OAuth flow
• Client Management - Zustand store pattern for client caching and reuse
• Type Generation - Using ADK-generated types for full type safety
• Action Calls - Calling bot actions with proper error handling and optimistic updates

Key Technologies

• @botpress/client - Official TypeScript client for Botpress API
• Triple-slash references - TypeScript pattern for importing generated types
• React Query - For mutations and cache management (optional but recommended)
• Zustand - For client state management

When to Use This Skill

Authentication Questions

• "How do I authenticate with Botpress from my frontend?"
• "What are Personal Access Tokens (PATs)?"
• "Should I use cookies or localStorage for tokens?"
• "How do I implement OAuth login flow?"
• "How do I protect routes based on authentication?"
• "How do I handle token expiration?"

Client Setup Questions

• "How do I initialize the Botpress client?"
• "What's the best way to manage multiple client instances?"
• "Why use a client store?"
• "How do I create workspace-scoped vs bot-scoped clients?"
• "What's the difference between regular client and Zai client?"

Type Generation Questions

• "How do I get types for my bot's actions?"
• "What are triple-slash references?"
• "How do I import generated types?"
• "Where are the .adk type files?"
• "How do I keep types in sync between bot and frontend?"
• "Why can't TypeScript find my action types?"

Calling Actions Questions

• "How do I call a bot action from my frontend?"
• "What's the syntax for client.callAction()?"
• "How do I handle errors when calling actions?"
• "How do I implement optimistic updates?"
• "How do I chain multiple action calls?"
• "How do I use React Query with bot actions?"

Available Documentation

./references/

Core Integration Patterns

• authentication.md - Complete authentication system with PATs, cookies, OAuth, route protection
• botpress-client.md - Client initialization, Zustand store pattern, Zai client setup
• calling-actions.md - Type-safe action calls, mutations, error handling, optimistic updates
• type-generation.md - Triple-slash references, generated types, maintaining type safety

Architecture & Setup

• overview.md - Architecture overview, when to use ADK frontends, project structure
• project-setup.md - Vite + React scaffolding, TypeScript config, environment setup
• recommended-stack.md - Recommended tech stack with rationale

Data & State Patterns

• service-layer.md - Service layer pattern for wrapping API calls with types
• data-fetching.md - TanStack Query patterns, mutations, optimistic updates
• state-management.md - Zustand vs TanStack Query, when to use each
• realtime-updates.md - Polling strategies, interval tiers, performance considerations

How to Answer Frontend Questions

1. Authentication Implementation

authentication.md

• PAT generation in Botpress Cloud
• Cookie-based storage (not localStorage)
• AuthContext with React Context API
• OAuth callback flow via cli-login
• Route protection with TanStack Router
• Profile fetching from both Botpress API and bot tables

1. Explain the authentication strategy (cookies vs localStorage)
2. Show the AuthProvider implementation
3. Demonstrate the OAuth flow
4. Provide route protection examples
5. Highlight security best practices

2. Client Setup and Management

botpress-client.md

• Client initialization with apiUrl, workspaceId, token, botId
• Zustand store for client caching
• Dynamic client keys for reuse
• Workspace-scoped vs bot-scoped clients
• Extended timeouts for Zai operations

1. Show the clientsStore.ts pattern
2. Explain how client caching works
3. Demonstrate getApiClient() usage
4. Show when to use workspace vs bot-scoped clients
5. Explain getZaiClient() for AI operations

3. Type Generation and Import

type-generation.md

• ADK generates types in

  .adk/

  directory during dev/build
• Triple-slash directives for referencing external types
• Generated files: action-types.d.ts, table-types.d.ts, workflow-types.d.ts
• Creating type aliases for cleaner code
• Keeping types in sync with adk dev

1. Explain how ADK generates types
2. Show triple-slash reference syntax
3. Demonstrate importing generated types
4. Provide examples of creating type aliases
5. Show how types stay in sync automatically

4. Calling Bot Actions

calling-actions.md

• client.callAction() signature
• Type-safe input/output with BotActionDefinitions
• Service layer pattern for reusable action calls
• Using useMutation for loading states and error handling
• Optimistic updates for instant UI feedback
• Chaining actions (sequential vs parallel)

1. Show the basic callAction() syntax
2. Demonstrate type-safe service functions
3. Provide useMutation examples
4. Show error handling patterns
5. Explain optimistic updates when relevant

Common Patterns Reference

Authentication Flow

// 1. Cookie helpers
function setCookie(name: string, value: string, days = 365);
function getCookie(name: string): string | null;
function deleteCookie(name: string);

// 2. AuthContext
interface AuthContextType {
  token: string | null;
  isAuthenticated: boolean;
  userProfile: UserProfile | null;
  isLoadingProfile: boolean;
  login: (token: string) => void;
  logout: () => void;
}

// 3. OAuth Flow
// Redirect: https://app.botpress.cloud/cli-login?redirect=...
// Callback: /auth/callback?pat=bp_pat_...
// Store PAT in cookie and navigate to app

Client Store Pattern

// stores/clientsStore.ts
const useClientsStore = create<ClientsState>()((set, get) => ({
  APIClients: {},
  getAPIClient: (props) => {
    const key = props?.botId
      ? `${props.workspaceId}-${props.botId}`
      : (props?.workspaceId ?? DEFAULT_API_CLIENT_KEY);

    const cached = get().APIClients[key];
    if (cached) return cached;

    const newClient = new APIClient({
      apiUrl: API_BASE_URL,
      workspaceId: props?.workspaceId,
      token: getPat() ?? "",
      botId: props?.botId,
    });

    set((state) => ({
      APIClients: { ...state.APIClients, [key]: newClient },
    }));

    return newClient;
  },
}));

export const getApiClient = (props?) =>
  useClientsStore.getState().getAPIClient(props);

Type Import Pattern

// types/index.ts
/// <reference path="../../../bot/.adk/action-types.d.ts" />
/// <reference path="../../../bot/.adk/table-types.d.ts" />

import type { BotActionDefinitions } from "@botpress/runtime/_types/actions";
import type { TableDefinitions } from "@botpress/runtime/_types/tables";

// Create type aliases
export type SendMessageAction = BotActionDefinitions["sendMessage"];
export type TicketTableRow = TableDefinitions["TicketsTable"]["Output"];

Action Call Pattern

// services/bot-service.ts
export async function sendMessage(input: SendMessageAction["input"]) {
  const client = getApiClient({ botId, workspaceId });
  const result = await client.callAction({
    type: "sendMessage",
    input,
  });
  return result.output as SendMessageAction["output"];
}

// Component usage with useMutation
const { mutate: send, isPending } = useMutation({
  mutationFn: sendMessage,
  onSuccess: () => {
    toast.success("Message sent");
    queryClient.invalidateQueries({ queryKey: ["messages"] });
  },
  onError: (error) => {
    toast.error("Failed to send message");
  },
});

Examples of Questions This Skill Answers

Beginner Questions

• "How do I connect my React app to a Botpress bot?"
• "What is a Personal Access Token?"
• "Where do I find my workspace ID and bot ID?"
• "How do I install @botpress/client?"

Authentication Questions

• "How should I store authentication tokens?"
• "How do I implement login/logout?"
• "How do I protect authenticated routes?"
• "Should I use cookies or localStorage?"
• "How do I handle the OAuth callback?"

Type Safety Questions

• "How do I get TypeScript types for my bot?"
• "What are triple-slash references?"
• "Why can't TypeScript find my action types?"
• "How do I keep types in sync?"
• "Where are the generated type files?"

Implementation Questions

• "How do I call a bot action?"
• "How do I query bot tables from my frontend?"
• "How do I handle loading states?"
• "How do I implement optimistic updates?"
• "How do I chain multiple action calls?"

Advanced Questions

• "How do I use Zai from my frontend?"
• "What's the difference between workspace and bot-scoped clients?"
• "How do I implement client caching?"
• "How do I handle token expiration?"
• "How do I implement retry logic?"

Response Format

1. Start with a concise explanation (1-2 paragraphs)
2. Provide working code examples from the references
3. Include file references (e.g., "From authentication.md:60-85")
4. Highlight security considerations when relevant
5. Show common pitfalls and how to avoid them
6. Link to related topics for deeper exploration

Example Response Structure

Question: "How do I authenticate users in my frontend?"

Answer:
The recommended pattern uses cookie-based PAT storage with OAuth flow.
Here's the complete implementation:

1. Cookie Helpers (authentication.md:89-111)
   [code example]

2. AuthContext Setup (authentication.md:64-76)
   [code example]

3. OAuth Flow (authentication.md:473-533)
   [code example]

Key Security Considerations:
- Use SameSite=Lax for CSRF protection
- Always use HTTPS in production
- Never log PATs to console
- Implement token expiration handling

Related Topics:
- Route protection: authentication.md:369-467
- Profile fetching: authentication.md:304-347
- Client initialization: botpress-client.md:29-51

Critical Patterns to Always Reference

1. Client Management

// ✅ CORRECT - Use client store
const client = getApiClient({ workspaceId, botId });

// ❌ WRONG - Create new client every time
const client = new Client({ apiUrl, workspaceId, token, botId });

2. Type Imports

// ✅ CORRECT - Triple-slash at top of file
/// <reference path="../../../bot/.adk/action-types.d.ts" />
import type { BotActionDefinitions } from "@botpress/runtime/_types/actions";

// ❌ WRONG - No triple-slash reference
import type { BotActionDefinitions } from "@botpress/runtime/_types/actions";

3. Action Calls

// ✅ CORRECT - Service layer with types
export async function sendMessage(input: SendMessageAction["input"]) {
  const client = getApiClient({ botId, workspaceId });
  const result = await client.callAction({ type: "sendMessage", input });
  return result.output as SendMessageAction["output"];
}

// ❌ WRONG - Direct call in component
const result = await client.callAction({ type: "sendMessage", input: data });

4. Authentication Storage

// ✅ CORRECT - Cookie with SameSite
document.cookie = `token=${value};expires=${expires};path=/;SameSite=Lax`;

// ❌ WRONG - localStorage without security
localStorage.setItem("token", value);

Best Practices to Emphasize

Security

• Always use HTTPS in production
• Use cookies with SameSite protection
• Never log PATs or tokens
• Implement token expiration handling
• Use HttpOnly cookies when possible (SSR)

Type Safety

• Always use generated types from ADK
• Create type aliases for cleaner code
• Use triple-slash references correctly
• Keep types in sync with adk dev
• Type all action inputs and outputs

Performance

• Cache clients with Zustand store
• Use workspace-scoped clients when no bot operations needed
• Implement optimistic updates for better UX
• Use React Query for cache management
• Run independent actions in parallel

Error Handling

• Always handle 401 (expired token) errors
• Provide user feedback on errors
• Implement retry logic for transient failures
• Log errors appropriately (never log tokens)
• Show loading states during async operations

Code Organization

• Use service layer for action calls
• Centralize types in single file
• Keep authentication logic in context
• Separate client configuration from usage
• Reuse service functions across components

Troubleshooting Common Issues

"Cannot find module '@botpress/runtime/_types/actions'"

• Check triple-slash reference path
• Verify .adk/ directory exists
• Restart TypeScript server
• Ensure adk dev/build has run

"Types not updating after bot changes"

• Restart adk dev
• Delete .adk/ and rebuild
• Restart TypeScript server
• Check for bot compilation errors

"Authentication fails after reload"

• Implement reload retry logic (authentication.md:191-220)
• Check cookie expiration
• Verify token is being retrieved correctly
• Check for CORS issues

"Client timeout on long operations"

• Use getZaiClient() with extended timeout for AI operations
• Don't use regular client for Zai operations
• Consider breaking into smaller operations

Summary

1. Authentication with PATs and cookies
2. Client management with Zustand
3. Type generation and import with triple-slash references
4. Calling bot actions with full type safety

• Any frontend integration question
• Authentication and security patterns
• Type safety and generated types
• Client setup and configuration
• Action calls and error handling