diff --git a/helpers/tools.ts b/helpers/tools.ts index 249f4988..b65957e7 100644 --- a/helpers/tools.ts +++ b/helpers/tools.ts @@ -178,7 +178,7 @@ For better results, you can specify the region parameter to get results from a s name: TOOL_SYSTEM_PROMPT_ENV_VAR, description: "System prompt for artifact code generator tool.", value: - "You are a code assistant that can generate and execute code using its tools. Don't generate code yourself, use the provided tools instead. Do not show the code or sandbox url in chat, just describe the steps to build the application based on the code that is generated by your tools.", + "You are a code assistant that can generate and execute code using its tools. Don't generate code yourself, use the provided tools instead. Do not show the code or sandbox url in chat, just describe the steps to build the application based on the code that is generated by your tools. Do not describe how to run the code, just the steps to build the application.", }, ], }, diff --git a/templates/components/engines/typescript/agent/tools/code-generator.ts b/templates/components/engines/typescript/agent/tools/code-generator.ts index 16dbf56b..eedcfa51 100644 --- a/templates/components/engines/typescript/agent/tools/code-generator.ts +++ b/templates/components/engines/typescript/agent/tools/code-generator.ts @@ -33,7 +33,7 @@ port: Port number used by the resulted artifact. Null when no ports are exposed. file_path: Relative path to the file, including the file name. code: Code generated by the artifact. Only runnable code is allowed. -Make sure to use the correct syntax for the programming language you're using. +Make sure to use the correct syntax for the programming language you're using. Make sure to generate only one code file. If you need to use CSS, make sure to include the CSS in the code file using Tailwind CSS syntax. `; // detail information to execute code @@ -62,7 +62,7 @@ export type CodeGeneratorToolParams = { const DEFAULT_META_DATA: ToolMetadata> = { name: "artifact", - description: `Generate a code artifact based on the input.`, + description: `Generate a code artifact based on the input. Don't call this tool if the user has not asked for code generation. E.g. if the user asks to write a description or specification, don't call this tool.`, parameters: { type: "object", properties: { diff --git a/templates/components/llamaindex/typescript/streaming/annotations.ts b/templates/components/llamaindex/typescript/streaming/annotations.ts index 74297438..13842c7a 100644 --- a/templates/components/llamaindex/typescript/streaming/annotations.ts +++ b/templates/components/llamaindex/typescript/streaming/annotations.ts @@ -92,7 +92,6 @@ function retrieveLatestArtifact(messages: Message[]): MessageContentDetail[] { ) { const toolOutput = data.toolOutput as { output?: { code?: string } }; if (toolOutput.output?.code) { - console.log("latestArtifact", toolOutput.output?.code); return [ { type: "text", diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/widgets/Artifact.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/widgets/Artifact.tsx index ee2cd44b..df235470 100644 --- a/templates/types/streaming/nextjs/app/components/ui/chat/widgets/Artifact.tsx +++ b/templates/types/streaming/nextjs/app/components/ui/chat/widgets/Artifact.tsx @@ -234,11 +234,19 @@ function RunTimeError({ function CodeSandboxPreview({ url }: { url: string }) { const [loading, setLoading] = useState(true); + const iframeRef = useRef(null); + + useEffect(() => { + if (!loading && iframeRef.current) { + iframeRef.current.focus(); + } + }, [loading]); return ( <>