AssistantDevTools

import { createLocalAssistant } from "@grassroot/assistant/local";
import { createDevToolsPlugin } from "@grassroot/assistant/devtools";
import { AssistantDevTools } from "@grassroot/ui-react/assistant";
 
const plugin = createDevToolsPlugin({
  client: createLocalAssistant({
    chatModel: { async *run() { yield { content: [{ type: "text", text: "Ready." }] }; } },
  }),
});
 
export default function AssistantDevToolsDemo() {
  return <AssistantDevTools plugin={plugin} defaultTab="thread" />;
}

<script setup lang="ts">
import { createLocalAssistant } from "@grassroot/assistant/local";
import { createDevToolsPlugin } from "@grassroot/assistant/devtools";
import { AssistantDevTools } from "@grassroot/ui-vue/assistant";
 
const plugin = createDevToolsPlugin({
  client: createLocalAssistant({
    chatModel: { async *run() { yield { content: [{ type: "text", text: "Ready." }] }; } },
  }),
});
</script>
 
<template>
  <AssistantDevTools :plugin="plugin" default-tab="thread" />
</template>

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { createLocalAssistant } from "@grassroot/assistant/local";
import { createDevToolsPlugin } from "@grassroot/assistant/devtools";
import { GrassrootAssistantDevTools } from "@grassroot/ui-angular/assistant";
 
@Component({
  selector: "app-assistant-dev-tools-demo",
  standalone: true,
  imports: [GrassrootAssistantDevTools],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-assistant-devtools [plugin]="plugin" defaultTab="thread" />`,
})
export class AssistantDevToolsDemoComponent {
  protected readonly plugin = createDevToolsPlugin({
    client: createLocalAssistant({
      chatModel: { async *run() { yield { content: [{ type: "text", text: "Ready." }] }; } },
    }),
  });
}
 
export default AssistantDevToolsDemoComponent;

<script lang="ts">
  import { createLocalAssistant } from "@grassroot/assistant/local";
  import { createDevToolsPlugin } from "@grassroot/assistant/devtools";
  import { AssistantDevTools } from "@grassroot/ui-svelte/assistant";
 
  const plugin = createDevToolsPlugin({
    client: createLocalAssistant({
      chatModel: { async *run() { yield { content: [{ type: "text", text: "Ready." }] }; } },
    }),
  });
</script>
 
<AssistantDevTools {plugin} defaultTab="thread" />

/** @jsxImportSource solid-js */
import { createLocalAssistant } from "@grassroot/assistant/local";
import { createDevToolsPlugin } from "@grassroot/assistant/devtools";
import { AssistantDevTools } from "@grassroot/ui-solid/assistant";
 
const plugin = createDevToolsPlugin({
  client: createLocalAssistant({
    chatModel: { async *run() { yield { content: [{ type: "text", text: "Ready." }] }; } },
  }),
});
 
export default function AssistantDevToolsDemo() {
  return <AssistantDevTools plugin={plugin} defaultTab="thread" />;
}