engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.3k

feat: display raw JSON output and human-readable preview in playground

Browse source
This commit is contained in:
Ajax Davis 2025-11-30 20:41:30 +10:00
parent 47ddc4dea7
commit 61ac2aa5dd
2 changed files with 58 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

44
apps/web/src/components/ToolPlayground.tsx
View file

@ -297,8 +297,48 @@ export function ToolPlayground({ tool }: ToolPlaygroundProps): React.ReactElemen
<p className="text-sm text-red-600 dark:text-red-500 mt-1">{error}</p>
</div>
) : output ? (
<div className="rounded-lg border border-border bg-muted/30 p-6 prose prose-sm dark:prose-invert max-w-none">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{output}</ReactMarkdown>
<div className="space-y-4">
{/* JSON Output */}
<div>
<h3 className="text-sm font-medium text-foreground mb-2">Raw Output (JSON)</h3>
<div className="rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto">
<pre className="text-xs text-foreground font-mono">{output}</pre>
</div>
</div>
{/* Human-Readable Preview */}
{(() => {
try {
const parsed = JSON.parse(output);
return (
<div>
<h3 className="text-sm font-medium text-foreground mb-2">
Human-Readable Preview
</h3>
<div className="rounded-lg border border-border bg-muted/30 p-6 prose prose-sm dark:prose-invert max-w-none">
{parsed.formattedOutput ? (
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{parsed.formattedOutput}
</ReactMarkdown>
) : (
<div className="space-y-2">
{Object.entries(parsed).map(([key, value]) => (
<div key={key}>
<span className="font-semibold">{key}:</span>{' '}
{typeof value === 'object'
? JSON.stringify(value, null, 2)
: String(value)}
</div>
))}
</div>
)}
</div>
</div>
);
} catch {
return null;
}
})()}
</div>
) : isExecuting ? (
<div className="flex items-center justify-center py-12">

19
apps/web/src/lib/ai-agent/tool-executor-agent.ts
View file

@ -216,13 +216,26 @@ export async function executeToolWithAgent(
model: openai('gpt-4-turbo'),
messages,
tools: toolsConfig,
system: `You are a helpful assistant. When the user asks you to do something, use the ${sanitizedToolName} tool to help them, then provide a clear, natural language summary of the results.`,
});
console.log('[executeToolWithAgent] Result:', JSON.stringify(result, null, 2));
// Extract the final text output
const fullOutput = result.text || JSON.stringify(result, null, 2);
// Extract tool results from the response
let toolOutput: unknown = null;
if (result.response?.messages) {
for (const message of result.response.messages) {
if (message.role === 'tool' && 'content' in message) {
toolOutput = message.content;
console.log('[executeToolWithAgent] Tool output found:', toolOutput);
break;
}
}
}
// Format the output as JSON
const fullOutput = toolOutput
? JSON.stringify(toolOutput, null, 2)
: result.text || JSON.stringify(result, null, 2);
console.log('[executeToolWithAgent] Final output:', fullOutput);