ai-client

Documents conventions for the opentrons-ai-client React and TypeScript frontend codebase.

520|209|Updated Jul 6, 2015
One-click install
npx skills add https://github.com/Opentrons/opentrons --skill ai-client
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-client
Source: https://github.com/Opentrons/opentrons/tree/main/.cursor/skills/ai-client
Command: npx skills add https://github.com/Opentrons/opentrons --skill ai-client

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Working in the opentrons-ai-client React/TypeScript codebase requires knowing its specific conventions for state management, API integration, authentication, and testing, which are easy to get wrong without guidance.

Core Features & Use Cases

  • Project Structure Reference: Maps the src/ layout including pages, components, resources, hooks, and utility modules.
  • State Management Guidance: Documents Jotai atoms such as chatDataAtom, chatHistoryAtom, and featureFlagsAtom, plus the rule to use useGetAccessToken() instead of the removed tokenAtom.
  • API Integration Rules: Lists the chat endpoints (create-protocol, update-protocol, completion, completion-multipart) and the useInputPromptController submission flow.
  • Use Case: When adding a new feature to the AI client, consult this Skill to follow camelCase typing, the useEffect exhaustive-deps FIXME convention, feature flag handling, and the correct make commands for testing and linting.

Quick Start

Use the ai-client skill to review my changes in opentrons-ai-client and confirm they follow the project's state management and API conventions.

Frequently Asked Questions about ai-client

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

FAQPage Schema
How do I manage state in the opentrons-ai-client React app?▼

State management uses Jotai atoms defined in src/resources/atoms.ts, including chatDataAtom for displayed chat turns, chatHistoryAtom for server requests, and featureFlagsAtom persisted to localStorage. Import and use these atoms rather than creating parallel state.

How do I make API calls from the opentrons-ai-client frontend?▼

API calls go through the useInputPromptController hook, which fetches a fresh Auth0 token via useGetAccessToken, builds an Axios config with buildRequestConfig, and calls callApi from useApiCall. Endpoints include create-protocol, update-protocol, completion, and completion-multipart.

Should TypeScript types use camelCase or snake_case in this codebase?▼

All TypeScript types and API payload fields use camelCase throughout src/resources/types.ts and request/response bodies. Do not introduce snake_case fields in new types or API payloads.

How do I get an Auth0 access token in the AI client?▼

Use the useGetAccessToken hook, since tokenAtom has been removed. The getAccessToken function is async, so always await it and wrap the call in try/catch before making authenticated requests.

What commands run tests and linting for opentrons-ai-client?▼

Run commands from the monorepo root: make test-js-opentrons-ai-client for unit tests, make lint-js for ESLint and Prettier checks, make check-js for TypeScript type checking, and make -C opentrons-ai-client dev to start the Vite dev server.