CodeInterpreter UI component not rendering despite successful tool execution

[krishagel]

Summary

The OpenAI native code interpreter tool is executing correctly (producing accurate calculations) but the custom UI component created with makeAssistantToolUI is not being rendered in the chat interface.

Expected Behavior

When the code interpreter tool executes, a custom UI component should appear showing:

• Loading state during execution
• Code being executed
• Execution results (output, plots, files, etc.)
• Execution time and status

Actual Behavior

• Code interpreter executes successfully (correct Fibonacci calculations prove this)
• No UI component is rendered
• No console logs from the UI component (indicating it's never called)
• Only plain text response appears in chat

Technical Details

Current Implementation

Tool Registration:

• Uses OpenAI's native openai.tools.codeInterpreter({})
• Tool name: code_interpreter (snake_case as per OpenAI API)
• Enabled via provider-native-tools system

UI Component:

// /app/(protected)/nexus/_components/tools/code-interpreter-ui.tsx
export const CodeInterpreterUI = makeAssistantToolUI<any, any>({
  toolName: 'code_interpreter',
  render: ({ args, result, status, toolName, toolCallId }) => {
    console.log('CodeInterpreterUI render called', { 
      toolName, toolCallId, status, args, result
    });
    // ... UI rendering logic
  },
});

UI Registration:

// /app/(protected)/nexus/page.tsx
<AssistantRuntimeProvider runtime={runtime}>
  <WebSearchUI />
  <CodeInterpreterUI />
  <Thread />
</AssistantRuntimeProvider>

Investigation Results

1. Tool Execution Confirmed: Code interpreter produces correct mathematical results
2. UI Component Never Called: No console output despite comprehensive logging
3. Tool Name Variations Tested: Both code_interpreter and codeInterpreter tried
4. Comparison with WebSearch: WebSearchUI follows same pattern but unknown if working

Potential Root Causes

1. Tool Name Mismatch: OpenAI's native tool name doesn't match what assistant-ui expects
2. Response Format Incompatibility: OpenAI's code_interpreter response format may not be compatible with assistant-ui's expected structure
3. Native Tool Support: assistant-ui framework may not support provider-native tools
4. Streaming Format Issue: The AI SDK's handling of OpenAI native tools may not produce the format assistant-ui expects

Environment

• Framework: Next.js 15 with App Router
• AI SDK: v5.0.0
• Assistant-UI: @assistant-ui/react latest
• Provider: OpenAI via @ai-sdk/openai
• Model: GPT-4o with native code interpreter

Files Involved

• /lib/tools/provider-native-tools.ts - Creates native OpenAI tools
• /app/(protected)/nexus/_components/tools/code-interpreter-ui.tsx - UI component
• /app/(protected)/nexus/page.tsx - UI registration
• /app/api/nexus/chat/route.ts - API endpoint

Reproduction Steps

1. Enable code interpreter tool in Nexus interface
2. Send prompt: "Calculate and show me the first 20 Fibonacci numbers"
3. Observe: Correct calculation results appear as plain text
4. Expected: Custom UI component should render showing code execution details

Debugging Attempted

• Verified tool execution works (correct results)
• Added comprehensive console logging (no output)
• Tested both snake_case and camelCase tool names
• Confirmed UI component is properly registered
• Checked assistant-ui documentation for tool UI patterns

Next Steps Needed

1. Deep dive into AI SDK + assistant-ui compatibility with native provider tools
2. Network analysis of actual API responses to see tool call format
3. Compare with working tool UI (if WebSearch actually works)
4. Research assistant-ui source code for tool resolution logic
5. Consider custom tool implementation instead of native if compatibility is impossible

Priority

Medium-High - Feature works functionally but lacks user experience enhancement that tool UI would provide.