import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";

# Prompt Customization

The prompt template allows users to create prompts and define variables that provide control over instructing the model.

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/prompt_customization.png"),
    dark: useBaseUrl("img/prompt_customization.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

Variables can be used to define instructions, questions, context, inputs, or examples for the model and can be created with any chosen name in curly brackets, e.g., `{variable_name}`. They act as placeholders for parts of the text that can be easily modified.

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/prompt_customization2.png"),
    dark: useBaseUrl("img/prompt_customization2.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you can define their values within the component itself or leave a field empty to be adjusted over the chat interface.

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/prompt_customization3.png"),
    dark: useBaseUrl("img/prompt_customization3.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

You can also use documents or output parsers as prompt variables. By plugging them into prompt handles, they’ll disable and feed that input field.

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/prompt_customization4.png"),
    dark: useBaseUrl("img/prompt_customization4.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

With this, users can interact with documents, webpages, or any other type of content directly from the prompt, which allows for seamless integration of external resources with the language model.

If working with an interactive (chat-like) flow, remember to keep one of the input variables empty to behave as the chat input.

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/prompt_customization5.png"),
    dark: useBaseUrl("img/prompt_customization5.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
