Anthropic api fail to parse tool output, exposing anthropic internal tool call structure

[shmuelhizmi]

When Passing the api a tool with additional properties field
when passing additional properties field in json schema

{
  "name": "write_app",
  "description": "submit js app project code in record of file path/name.ext",
  "input_schema": {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "properties": {
      "appName": {
        "type": "string",
        "description": "descriptive name for the app"
      },
      "rootFileName": {
        "type": "string",
        "description": "application root file name with default export, for example: application/App.tsx"
      }
    },
    "required": [
      "appName",
      "rootFileName"
    ],
    "additionalProperties": {
      "type": "object",
      "properties": {
        "nonTechnicalProgressDescription": {
          "type": "string",
          "description": "this will be shown to the user while you write the file, for example: \"creating dashboard charts\" or \"connecting to integrations\", define this field before file content"
        },
        "content": {
          "type": "string",
          "description": "file content"
        }
      },
      "required": [
        "nonTechnicalProgressDescription",
        "content"
      ],
      "additionalProperties": false
    },
    "description": "App configuration with files as additional properties"
  }
}

the api call tool with

write_app({
  "appName": "Hello World App",
  "rootFileName": "src/App.jsx",
  "src/App.jsx": "<nonTechnicalProgressDescription>Creating main application component</nonTechnicalProgressDescription>\n<content>\nimport React from 'react';\nimport './App.css';\n\nfunction App() {\n  return (\n    <div className=\"app\">\n      <div className=\"container\">\n        <h1>Hello, World!</h1>\n        <p>Welcome to my first React application.</p>\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n</content>",
  "src/App.css": "<nonTechnicalProgressDescription>Adding basic styling</nonTechnicalProgressDescription>\n<content>\n.app {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  background-color: #f5f5f5;\n  font-family: Arial, sans-serif;\n}\n\n.container {\n  text-align: center;\n  padding: 2rem;\n  background-color: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n  color: #2c3e50;\n  margin-bottom: 1rem;\n}\n\np {\n  color: #7f8c8d;\n  font-size: 1.2rem;\n}\n</content>",
  "src/index.js": "<nonTechnicalProgressDescription>Setting up application entry point</nonTechnicalProgressDescription>\n<content>\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n</content>",
  "src/index.css": "<nonTechnicalProgressDescription>Adding global styles</nonTechnicalProgressDescription>\n<content>\nbody {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n}\n</content>"
})

nonTechnicalProgressDescription should be parsed to json insted of anthropic xml

this issue effect sdk typescript but related to api itself, opening it here because api do not have a place to report errors

[adamelk]

Same here!

[casret]

Can we get any update on this? This breaks our app multiple times a day.

[benkomalo]

Thanks for the feedback, all. As the OP posted, this isn't an SDK issue and is an issue with Claude adhering to the tool format, but we've flagged it with the team.

I just tested a simple workaround to the initial OP's schema, and in case it's helpful, this seems to work:

{
        "$schema": "http://json-schema.org/draft-07/schema#",
        "type": "object",
        "properties": {
            "appName": {
                "type": "string",
                "description": "descriptive name for the app",
            },
            "rootFileName": {
                "type": "string",
                "description": "application root file name with default export, for example: application/App.tsx",
            },
            "files": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "name": {
                            "type": "string",
                            "description": "file name with extension, for example: application/App.tsx",
                        },
                        "nonTechnicalProgressDescription": {
                            "type": "string",
                            "description": 'this will be shown to the user while you write the file, for example: "creating dashboard charts" or "connecting to integrations", define this field before file content',
                        },
                        "content": {"type": "string", "description": "file content"},
                    },
                    "required": ["name", "nonTechnicalProgressDescription", "content"],
                    "additionalProperties": False,
                },
            },
        },
        "required": ["appName", "rootFileName", "files"],
        "description": "App configuration with files as additional properties",
    }

[shmuelhizmi]

the problem with using an array is that we do not get intimidate progress, so its problematic for UX, BTW we also see worst
performance for some reason with arrays