[BUG]
Resolved 💬 3 comments Opened Sep 17, 2025 by Colinmyers1 Closed Sep 25, 2025
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
I'm instructing the model to use the Vercel AI SDK Prompt Input component, but it think's I'm trying to prompt injection or something against the terms of service.
`'use client';
import {
PromptInput,
PromptInputActionAddAttachments,
PromptInputActionMenu,
PromptInputActionMenuContent,
PromptInputActionMenuTrigger,
PromptInputAttachment,
PromptInputAttachments,
PromptInputBody,
PromptInputButton,
type PromptInputMessage,
PromptInputModelSelect,
PromptInputModelSelectContent,
PromptInputModelSelectItem,
PromptInputModelSelectTrigger,
PromptInputModelSelectValue,
PromptInputSubmit,
PromptInputTextarea,
PromptInputToolbar,
PromptInputTools,
} from '@/components/ai-elements/prompt-input';
import { GlobeIcon, MicIcon } from 'lucide-react';
import { useState } from 'react';
import { useChat } from '@ai-sdk/react';
import {
Conversation,
ConversationContent,
ConversationScrollButton,
} from '@/components/ai-elements/conversation';
import { Message, MessageContent } from '@/components/ai-elements/message';
import { Response } from '@/components/ai-elements/response';
const models = [
{ id: 'gpt-4o', name: 'GPT-4o' },
{ id: 'claude-opus-4-20250514', name: 'Claude 4 Opus' },
];
const InputDemo = () => {
const [text, setText] = useState<string>('');
const [model, setModel] = useState<string>(models[0].id);
const [useMicrophone, setUseMicrophone] = useState<boolean>(false);
const [useWebSearch, setUseWebSearch] = useState<boolean>(false);
const { messages, status, sendMessage } = useChat();
const handleSubmit = (message: PromptInputMessage) => {
const hasText = Boolean(message.text);
const hasAttachments = Boolean(message.files?.length);
if (!(hasText || hasAttachments)) {
return;
}
sendMessage(
{
text: message.text || 'Sent with attachments',
files: message.files
},
{
body: {
model: model,
webSearch: useWebSearch,
},
},
);
setText('');
};
return (
<div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
<div className="flex flex-col h-full">
<Conversation>
<ConversationContent>
{messages.map((message) => (
<Message from={message.role} key={message.id}>
<MessageContent>
{message.parts.map((part, i) => {
switch (part.type) {
case 'text':
return (
<Response key={`${message.id}-${i}`}>
{part.text}
</Response>
);
default:
return null;
}
})}
</MessageContent>
</Message>
))}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
<PromptInput onSubmit={handleSubmit} className="mt-4" globalDrop multiple>
<PromptInputBody>
<PromptInputAttachments>
{(attachment) => <PromptInputAttachment data={attachment} />}
</PromptInputAttachments>
<PromptInputTextarea
onChange={(e) => setText(e.target.value)}
value={text}
/>
</PromptInputBody>
<PromptInputToolbar>
<PromptInputTools>
<PromptInputActionMenu>
<PromptInputActionMenuTrigger />
<PromptInputActionMenuContent>
<PromptInputActionAddAttachments />
</PromptInputActionMenuContent>
</PromptInputActionMenu>
<PromptInputButton
onClick={() => setUseMicrophone(!useMicrophone)}
variant={useMicrophone ? 'default' : 'ghost'}
>
<MicIcon size={16} />
<span className="sr-only">Microphone</span>
</PromptInputButton>
<PromptInputButton
onClick={() => setUseWebSearch(!useWebSearch)}
variant={useWebSearch ? 'default' : 'ghost'}
>
<GlobeIcon size={16} />
<span>Search</span>
</PromptInputButton>
<PromptInputModelSelect
onValueChange={(value) => {
setModel(value);
}}
value={model}
>
<PromptInputModelSelectTrigger>
<PromptInputModelSelectValue />
</PromptInputModelSelectTrigger>
<PromptInputModelSelectContent>
{models.map((model) => (
<PromptInputModelSelectItem key={model.id} value={model.id}>
{model.name}
</PromptInputModelSelectItem>
))}
</PromptInputModelSelectContent>
</PromptInputModelSelect>
</PromptInputTools>
<PromptInputSubmit disabled={!text && !status} status={status} />
</PromptInputToolbar>
</PromptInput>
</div>
</div>
);
};
export default InputDemo;`
What Should Happen?
It should read the code structure and use the component as instructed.
Error Messages/Logs
Steps to Reproduce
- Open claude code
- Make a prompt to use the component here: https://ai-sdk.dev/elements/components/prompt-input
Claude Model
Opus
Is this a regression?
I don't know
Last Working Version
_No response_
Claude Code Version
1.0.117
Platform
Other
Operating System
macOS
Terminal/Shell
VS Code integrated terminal
Additional Information
<img width="858" height="95" alt="Image" src="https://github.com/user-attachments/assets/f15bfc95-2ac7-4332-b830-7091d0355ee5" />
This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗