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.