Actions, Not Just Chat

React Component GPT:

We need a GPT that understands our React components, knows our CSS variables, and can spit out code that's ready to use. This isn't about general knowledge; it's about our knowledge. The standard GPT knowledge upload is fine for broad docs, but for precise component generation, we need control. That's where Actions come in.

The Problem: Disconnected Knowledge

Our design system lives in zeroheight. Our CSS variables are in a .css file. Our React components are in .jsx files. These are all discrete sources of truth. A generic LLM has no idea how they connect. If someone asks for a "primary button," it might give generic HTML, not our Button component with --color-brand-primary. Unacceptable.

The Solution: Custom Actions to Bridge the Gap

We build an API. This API becomes our "knowledge retrieval service." The GPT uses Actions to call this API when it needs specific, localized data.

1. Extract Data (The ETL of our Design System):

   • zeroheight Content: Use the zeroheight API to pull down all component documentation. Store it, parse it, clean it. We're interested in usage guidelines, props, and design rationale.
   • CSS Variables/Tokens: This is crucial. Scrape our actual CSS files or token JSON. We need the variable names (--color-brand-primary), their semantic meaning (e.g., "primary brand color"), and their default values. This data needs to be structured.
   • React Component Signatures: Optionally, parse our actual React component files to extract prop types and default values. This helps the GPT understand the component's API.

2. GPT's Role (The Orchestrator):

   • The GPT's prompt is vital. We instruct it: "You are an expert React developer. When asked to create or style a component, use the get_component_info action to retrieve specific details from our design system. Only use the CSS variables and component props returned by the action. Do not hallucinate."
   • When a user asks, "Generate a primary button component with a large size," the GPT identifies Button, primary, and large. It then calls our API Action: get_component_info(component_name='Button', style_attributes=['primary', 'large']).
   • Our API returns the relevant zeroheight content, the --color-brand-primary variable, and maybe padding: var(--spacing-large).
   • The GPT uses that specific information to generate the React component code, importing the correct component, applying the className or style with the correct CSS variables.

Why This Works

This approach isn't about chat; it's about programmatic access to our design system's knowledge.

• Accuracy: We control the retrieval. The GPT can't invent variables or component usage patterns.
• Maintainability: Our API can be updated independently of the GPT. If a variable name changes, we update our extraction and vector store, not the GPT's brain.

This is how we leverage LLMs for actual developer productivity, turning a design system into a code-generating assistant.