# Visual Referencing

## Summary

Generative AI can be used to apply brand-specific colors and generate themed components for Next.js and Chakra UI applications. By providing context or brand information, developers can create components that match a brand's identity. Additionally, generative AI can create color palettes based on a single color and mood, enabling themed components tailored to specific contexts.

## Example: Creating brand themed elements through visual referencing

### Prompt:

{% code title="prompt" overflow="wrap" %}

```less
Create a McDonald's themed button component in Next.js and Chakra UI. Generate a color palette from a single color based on a happy mood.
```

{% endcode %}

### Response:

{% code overflow="wrap" %}

```javascript
import React from 'react';
import { Button } from '@chakra-ui/react';

const McDonaldsThemedButton = ({ children, ...props }) => {
  const brandColors = {
    primary: '#FFC72C',
    secondary: '#E51837',
  };

  const generatedHappyPalette = {
    100: '#FFD580',
    200: '#FFCA61',
    300: '#FFBF42',
    400: '#FFB523',
    500: '#FFAB04',
  };

  return (
    <Button
      bg={brandColors.primary}
      color={brandColors.secondary}
      _hover={{ bg: generatedHappyPalette[300] }}
      {...props}
    >
      {children}
    </Button>
  );
};

export default McDonaldsThemedButton;
```

{% endcode %}

### Discussion

&#x20;Utilizing generative AI to apply colors from context or brand information, and to generate color palettes for themed components in applications, offers several advantages:

1. Brand consistency: By creating components that adhere to a specific brand's color scheme, developers can maintain consistency across the application and improve brand recognition.
2. Streamlined component creation: Generative AI can quickly generate themed components that match a brand's identity or mood, reducing manual effort and increasing productivity.
3. Personalized user experience: Generating color palettes based on a specific mood allows developers to tailor the user experience to different contexts or user preferences.
4. Maintainable and scalable code: By utilizing generative AI to create components with consistent color schemes and themes, developers can create code that is easier to maintain and scale in the future.

Using generative AI to apply colors and generate themed components in  applications enables developers to create components that match a brand's identity, maintain consistency, and provide a personalized user experience while saving time and effort.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gdf.ai/gdf-full-stack-engineering/subject-knowledge-areas/visualization/visual-referencing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.