Demo Gato GraphQL + Bricks Builder + Claude

Điền nội dung trang Bricks bằng văn bản do Claude tạo ra

Tự động tạo và chèn nội dung vào các trang Bricks của bạn bằng Claude, tốt hơn nhiều so với Lorem Ipsum!

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image
Target Image

Chúng ta có thể sử dụng Claude với tiện ích mở rộng Bricks để tự động tạo và chèn nội dung vào các trang Bricks của bạn, tốt hơn nhiều so với Lorem Ipsum!

Query này tự động tạo và chèn nội dung vào trang Bricks của bạn bằng Claude.

Để tạo nội dung, chúng ta phải cung cấp một chủ đề qua biến $topic, và truyền nó cho Claude để tạo toàn bộ nội dung.

Nội dung mới được chèn vào tất cả các phần tử heading, texttext-basic.

Chúng ta phải cung cấp các biến sau:

  • customPostId: ID của custom post Bricks cần cập nhật
  • anthropicAPIKey: Khóa API cho Anthropic API
  • topic: Chủ đề cần tạo nội dung

Đây là GraphQL query:

query InitializeVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  emptyArray: _echo(value: [])
    @export(as: "elementHeadingIDs")
    @export(as: "elementHeadings")
    @export(as: "elementTextIDs")
    @export(as: "elementTexts")
    @export(as: "elementTextBasicIDs")
    @export(as: "elementTextBasics")
}
 
query GetBricksData($customPostId: ID!)
  @depends(on: "InitializeVariables")
{
  customPostForContainerHeadings: customPost(by:{ id: $customPostId }, status: any) {
    id
    title
    bricksDataHeading: bricksData(filterBy: { include: ["heading"] })
      @underEachArrayItem(affectDirectivesUnderPos: [1, 3])
        @underJSONObjectProperty(by: { key: "id" })
          @export(as: "elementHeadingIDs")
        @underJSONObjectProperty(by: { path: "settings.text" })
          @export(as: "elementHeadings")
    bricksDataText: bricksData(filterBy: { include: ["text"] })
      @underEachArrayItem(affectDirectivesUnderPos: [1, 3])
        @underJSONObjectProperty(by: { key: "id" })
          @export(as: "elementTextIDs")
        @underJSONObjectProperty(by: { path: "settings.text" })
          @export(as: "elementTexts")
    bricksDataTextBasic: bricksData(filterBy: { include: ["text-basic"] })
      @underEachArrayItem(affectDirectivesUnderPos: [1, 3])
        @underJSONObjectProperty(by: { key: "id" })
          @export(as: "elementTextBasicIDs")
        @underJSONObjectProperty(by: { path: "settings.text" })
          @export(as: "elementTextBasics")
  }
}
 
query GenerateContentWithClaude(
  $topic: NonEmptyString!
  $anthropicAPIKey: String!
  $maxTokens: Int! = 32000
  $promptTemplate: String! = """
You are content writer.
 
I need to generate content for a WordPress page using Bricks.
 
Based on the following topic, please generate:
1. Headings: A list with {$elementHeadingsNumber} headings (max 60 chars)
2. Basic texts: A list with {$elementTextsNumber} descriptions in plain format (max 300 chars)
3. HTML texts: A list with {$elementTextBasicsNumber} descriptions containing HTML (max 300 chars)
 
Please respond in JSON format with this structure:
{
  "headings": ["Heading 1", "Heading 2", "Heading 3"],
  "basicTexts": ["Basic text 1", "Basic text 2", "Basic text 3"],
  "htmlTexts": ["<p>HTML text 1</p>", "<p>HTML text 2</p>", "<p>HTML text 3</p>"]
}
 
Return ONLY the JSON object. Do not include any explanations, markdown formatting, or code blocks. The response must be a valid JSON object starting with { and ending with }.
 
Topic to analyze:
 
{$topic}
"""
  $model: String! = "claude-sonnet-4-0"
)
  @depends(on: "GetBricksData")
{
  elementHeadingsNumber: _arrayLength(array: $elementHeadings)
  elementTextsNumber: _arrayLength(array: $elementTexts)
  elementTextBasicsNumber: _arrayLength(array: $elementTextBasics)
  prompt: _strReplaceMultiple(
    search: [
      "{$topic}",
      "{$elementHeadingsNumber}",
      "{$elementTextsNumber}",
      "{$elementTextBasicsNumber}"
    ],
    replaceWith: [
      $topic,
      $__elementHeadingsNumber,
      $__elementTextsNumber,
      $__elementTextBasicsNumber
    ],
    in: $promptTemplate
  )
  claudeResponse: _sendJSONObjectItemHTTPRequest(input: {
    url: "https://api.anthropic.com/v1/messages",
    method: POST,
    options: {
      headers: [
        {
          name: "x-api-key",
          value: $anthropicAPIKey
        },
        {
          name: "anthropic-version",
          value: "2023-06-01"
        }
      ],
      json: {
        model: $model,
        max_tokens: $maxTokens,
        messages: [
          {
            role: "user",
            content: $__prompt
          }
        ],
      }
    }
  })
    @underJSONObjectProperty(by: { key: "content" })
      @underArrayItem(index: 0)
        @underJSONObjectProperty(by: { key: "text" })
          @export(as: "jsonEncodedContent")
}
 
query ExtractContent
  @depends(on: "GenerateContentWithClaude")
{
  jsonEncodedContent: _echo(value: $jsonEncodedContent)
    @remove
  decodedContent: _strDecodeJSONObject(string: $jsonEncodedContent)
  createdElementHeadings: _objectProperty(object: $__decodedContent, by: { key: "headings" })
  createdElementTexts: _objectProperty(object: $__decodedContent, by: { key: "basicTexts" })
  createdElementTextBasics: _objectProperty(object: $__decodedContent, by: { key: "htmlTexts" })
  
  elementIDs: _arrayMerge(arrays: [
    $elementHeadingIDs,
    $elementTextIDs,
    $elementTextBasicIDs
  ])
    @export(as: "elementIDs")
  elementTexts: _arrayMerge(arrays: [
    $__createdElementHeadings,
    $__createdElementTexts,
    $__createdElementTextBasics
  ])
    @export(as: "elementTexts")
}
 
query GetMergeInputData
  @depends(on: "ExtractContent")
{
  elementToUpdateMergeInputElements: _echo(value: $elementIDs)
    @underEachArrayItem(
      passIndexOnwardsAs: "index",
      passValueOnwardsAs: "id"
      affectDirectivesUnderPos: [1, 2]
    )
      @applyField(
        name: "_arrayItem",
        arguments: {
          array: $elementTexts,
          position: $index
        },
        passOnwardsAs: "text"
      )
      @applyField(
        name: "_echo",
        arguments: {
          value: {
            id: $id,
            settings: {
              text: $text
            }
          }
        }
        setResultInResponse: true
      )
    @export(as: "elementToUpdateMergeInputElements")
}
 
mutation StoreUpdatedElementText($customPostId: ID!)
  @depends(on: "GetMergeInputData")
{
  bricksMergeCustomPostElementDataItem(input: {
    customPostID: $customPostId
    elements: $elementToUpdateMergeInputElements
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
          @passOnwards(as: "message")
          @fail(
            message: $message
            condition: ALWAYS
          )
      }
    }
    customPost {
      __typename
      ...on CustomPost {
        id
        bricksData
      }
    }
  }
}

Các biến sẽ trông như thế này:

{
  "customPostId": 123,
  "anthropicAPIKey": "sk-ant-...",
  "topic": "Sustainable Living"
}

Đăng ký nhận bản tin của chúng tôi

Cập nhật tất cả những điều mới từ Gato GraphQL.