-
|
I'm experiencing an issue where calling Broader Intention: Structured LLM Background Entities Beyond the immediate technical issue, I'm working tlon a system where the LLM can use structured tool calls to dynamically add contextual entities (i.e a simple list of JSON array objects) as background context for ongoing conversations. So that User can select from UI and pass that back to LLM to continue conversation. I was able to render all the JSON object and but issue the selecting one of the objects using Below I have created, simple assistant tool UI that mimics what I am developing above. When I complete inputting age below Any help or assistance I would appreciate it. Current Setup Page const fakeToolCall = {
id: "msg-1",
role: "assistant",
content: [
{
type: "tool-call",
toolCallId: "tool-11",
toolName: "multi_step_tool",
args: {},
},
],
};
// Minimal model adapter for local runtime (no-op)
const DummyModelAdapter = {
async *run() {
// No-op: this is just for UI testing
},
};
export default function MultiStepToolTestPage() {
const runtime = useLocalRuntime(DummyModelAdapter, {
initialMessages: [fakeToolCall],
});
return (
<AssistantRuntimeProvider runtime={runtime}>
<MultiStepToolUI />
<div className="max-w-xl mx-auto mt-8">
<Thread />
</div>
</AssistantRuntimeProvider>
);
} Assistant Tool UI export const MultiStepToolUI = makeAssistantToolUI<MultiStepArgs, MultiStepResult>({
toolName: "multi_step_tool",
render: ({ args, result, status, addResult }) => {
const [step, setStep] = useState<1 | 2>(1);
const [name, setName] = useState("");
const [age, setAge] = useState<number | "">("");
if (result) {
return (
<div className="p-4 bg-green-100 rounded">
<div>Result submitted:</div>
<pre>{JSON.stringify(result, null, 2)}</pre>
</div>
);
}
return (
<div className="p-4 bg-gray-50 rounded space-y-4">
{step === 1 && (
<div>
<label>
What is your name?{" "}
<input
value={name}
onChange={e => setName(e.target.value)}
className="border px-2 py-1 rounded"
/>
</label>
<button
className="ml-2 px-3 py-1 bg-blue-500 text-white rounded"
disabled={!name}
onClick={() => setStep(2)}
>
Next
</button>
</div>
)}
{step === 2 && (
<div>
<label>
What is your age?{" "}
<input
type="number"
value={age}
onChange={e => setAge(Number(e.target.value))}
className="border px-2 py-1 rounded"
/>
</label>
<button
className="ml-2 px-3 py-1 bg-green-600 text-white rounded"
disabled={!age || !name}
onClick={() =>{
console.log("status is :", status);
addResult({ name, age: Number(age) });
}}
>
Submit
</button>
</div>
)}
</div>
);
},
}); |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
I have a same issue 
|
Beta Was this translation helpful? Give feedback.
-
|
@ysl0628 Thank you for bring that up. Out of curiosity how did you find the code block above? I am novice to front-end development world @Yonom, any input from your end? |
Beta Was this translation helpful? Give feedback.
-
|
@ysl0628
const fakeToolCallMessage = {
id: "msg-1",
role: "assistant" as const,
status: { type: "requires-action", reason: "tool-calls" } as const, // Add this status
content: [
{
type: "tool-call" as const,
toolCallId: "fake-toolcall-1",
toolName: "fake_tool_name",
argsText: JSON.stringify(args),
args,
// state: "call",
} as const
],
createdAt: new Date(),
};
export default function FakeToolUITestPage() {
const runtime = useLocalRuntime(DummyModelAdapter, {
initialMessages: [fakeAssistantMessage, fakeToolCallMessage],
unstable_humanToolNames : ["fake_tool_name"] // This must configured
});Although, I had actually done #2 above without the adding status, human in loop would never work The Here is the evaluation source code |
Beta Was this translation helpful? Give feedback.
-
|
@saadswift |
Beta Was this translation helpful? Give feedback.
@ysl0628
I have the found the solution to the problem. In order to get Human In loop (interaction)
addResultworking, two things needs to be applied{ type: "requires-action", reason: "tool-calls" }in the example below