fullstacked 0.12.0-1273 → 0.12.0-1290

package/fullstacked_modules/@fullstacked/ai-agent/package.json

@@ -1,13 +1,23 @@
 {
     "dependencies": {
+        "@anthropic-ai/sdk": "^0.64.0",
         "@fullstacked/codemirror-view": "git+https://github.com:fullstackedorg/codemirror-view",
+        "@google/genai": "^1.21.0",
+        "@langchain/anthropic": "^0.3.28",
         "@langchain/core": "^0.3.66",
+        "@langchain/deepseek": "^0.1.0",
+        "@langchain/google-genai": "^0.2.18",
+        "@langchain/mistralai": "^0.2.1",
         "@langchain/ollama": "^0.2.3",
         "@langchain/openai": "^0.6.3",
+        "@langchain/xai": "^0.1.0",
         "ollama": "^0.5.16",
         "openai": "^5.10.2",
         "streaming-markdown": "^0.2.15",
-        "zod": "^4.0.14"
+        "zod": "^3.25.76"
+    },
+    "devDependencies": {
+        "@codemirror/theme-one-dark": "^6.1.3"
     },
     "main": "./src/index.ts",
     "name": "@fullstacked/ai-agent",

package/fullstacked_modules/@fullstacked/ai-agent/src/conversation.ts

@@ -14,12 +14,18 @@ import { tool } from "@langchain/core/tools";
 import { ToolCall } from "@langchain/core/messages/tool";
 import { z } from "zod";
 import { Provider } from "./providers/interface";
+import { Extension } from "@codemirror/state";
+import { Runnable } from "@langchain/core/runnables";
+import { BaseLanguageModelInput } from "@langchain/core/language_models/base";
+import { BaseChatModelCallOptions } from "@langchain/core/language_models/chat_models";
 
 type ConversationOptions = {
     model: string;
     provider: Provider;
     messages?: StoredMessage[];
     tools?: ReturnType<typeof createTool>[];
+    codemirrorViewExtension?: Extension[];
+    onStateChange?: (state: "STREAMING" | "IDLE" | "ERROR") => void;
 };
 
 export function createTool<T extends z.ZodSchema>(opts: {
@@ -53,17 +59,25 @@ function classForMessageType(message: BaseMessage) {
 }
 
 export function createConversation(opts: ConversationOptions) {
-    const client = opts.provider.client(opts.model);
+    let chatModel: Runnable<
+        BaseLanguageModelInput,
+        AIMessageChunk,
+        BaseChatModelCallOptions
+    >;
+    const updateChatModel = (provider: Provider, model: string) => {
+        const client = provider.client(model);
+        chatModel = opts.tools
+            ? client.bindTools(opts.tools.map(({ tool }) => tool))
+            : client;
+    };
 
-    const chatModel = opts.tools
-        ? client.bindTools(opts.tools.map(({ tool }) => tool))
-        : client;
+    updateChatModel(opts.provider, opts.model);
 
     const element = document.createElement("div");
     element.classList.add("conversation");
 
     const conversation: BaseMessage[] = mapStoredMessagesToChatMessages(
-        opts?.messages || [],
+        opts.messages || [],
     );
     const messagesContainer = document.createElement("div");
     messagesContainer.classList.add("messages");
@@ -72,8 +86,14 @@ export function createConversation(opts: ConversationOptions) {
         const messageContainer = document.createElement("div");
         messageContainer.classList.add(classForMessageType(message));
         messagesContainer.append(messageContainer);
-        const renderer = createMarkdownStreamRenderer(messageContainer);
-        renderer.write(message.response_metadata["user-defined-message"] || message.content as string);
+        const renderer = createMarkdownStreamRenderer(
+            messageContainer,
+            opts.codemirrorViewExtension,
+        );
+        renderer.write(
+            message.response_metadata["user-defined-message"] ||
+                (message.content as string),
+        );
         renderer.end();
     };
 
@@ -85,10 +105,17 @@ export function createConversation(opts: ConversationOptions) {
         );
 
         const container = document.createElement("div");
-        const userDefinedMessage = t.message?.(toolCall.args) || `Using tool ${toolCall.name}`;
-        container.innerText = userDefinedMessage;
+        const userDefinedMessage =
+            t.message?.(toolCall.args) || `Using tool ${toolCall.name}`;
         messagesContainer.append(container);
 
+        const renderer = createMarkdownStreamRenderer(
+            container,
+            opts.codemirrorViewExtension,
+        );
+        renderer.write(userDefinedMessage);
+        renderer.end();
+
         const toolResponse: ToolMessage = await t.tool.invoke(toolCall);
         toolResponse.response_metadata["user-defined-message"] =
             userDefinedMessage;
@@ -125,8 +152,21 @@ export function createConversation(opts: ConversationOptions) {
 
         aiMessageContainer.append(responseContainer, loadingContainer);
 
-        const renderer = createMarkdownStreamRenderer(responseContainer);
-        const stream = await chatModel.stream(conversation);
+        opts.onStateChange?.("STREAMING");
+        const renderer = createMarkdownStreamRenderer(
+            responseContainer,
+            opts.codemirrorViewExtension,
+        );
+        let stream: Awaited<ReturnType<typeof chatModel.stream>>;
+        try {
+            stream = await chatModel.stream(conversation);
+        } catch (e) {
+            renderer.write(e.toString());
+            opts.onStateChange?.("ERROR");
+            done = true;
+            renderer.end();
+            return;
+        }
         let messageIndex: number = null;
         for await (const chunk of stream) {
             if (messageIndex === null) {
@@ -148,10 +188,13 @@ export function createConversation(opts: ConversationOptions) {
         const aiMessage = conversation.at(messageIndex) as AIMessageChunk;
         const toolPromises = aiMessage.tool_calls.map((t) => onToolRequest(t));
         const awaitedToolPromises = await Promise.all(toolPromises);
-        if (awaitedToolPromises.some((r) => r)) {
-            promptAgent();
-        }
+
         done = true;
+
+        if (toolPromises.length) {
+            return promptAgent();
+        }
+        opts.onStateChange?.("IDLE");
     };
 
     const humanInput = createHumanInput({
@@ -165,5 +208,20 @@ export function createConversation(opts: ConversationOptions) {
     return {
         element,
         serialize,
+        updateChatModel,
+        prompt: onHumanPrompt,
+        generateConversationTitle: async () => {
+            const response = await chatModel.invoke([
+                ...conversation,
+                new HumanMessage(
+                    "Generate a title for this conversation with a 1 to 3 words.",
+                ),
+            ]);
+            return response.content
+                .toString()
+                .replace(/<think>(.|\s)*<\/think>\s*/g, "") // remove ollama think tags
+                .replace(/(\*|\"|\')*/g, "") // remove any md formatting
+                .trim();
+        },
     };
 }

package/fullstacked_modules/@fullstacked/ai-agent/src/index.ts

@@ -1,3 +1,2 @@
 export * from "./conversation";
-export * from "./providers/ollama";
-export * from "./providers/openai";
+export * from "./providers";

package/fullstacked_modules/@fullstacked/ai-agent/src/markdown.ts

@@ -1,8 +1,12 @@
 import * as smd from "streaming-markdown";
 import { createCodeMirrorView } from "@fullstacked/codemirror-view";
 import { SupportedLanguage } from "@fullstacked/codemirror-view/languages";
+import { Extension } from "@codemirror/state";
 
-export function createMarkdownStreamRenderer(el: HTMLElement) {
+export function createMarkdownStreamRenderer(
+    el: HTMLElement,
+    cmExtensions?: Extension[],
+) {
     const renderer = smd.default_renderer(el);
     const defaultAddToken = renderer.add_token;
     renderer.add_token = function (data: any, type: any) {
@@ -11,9 +15,9 @@ export function createMarkdownStreamRenderer(el: HTMLElement) {
         }
 
         let parent = data.nodes[data.index];
-        const codeView = createCodeMirrorView() as ReturnType<
-            typeof createCodeMirrorView
-        > & {
+        const codeView = createCodeMirrorView({
+            extensions: cmExtensions || [],
+        }) as ReturnType<typeof createCodeMirrorView> & {
             setAttribute(attr: string, value: string): void;
             appendChild(text: Text): void;
         };

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/anthropic.ts

@@ -0,0 +1,46 @@
+import Anthropic from "@anthropic-ai/sdk";
+import { ChatAnthropic } from "@langchain/anthropic";
+import { ProviderInfo } from "./interface";
+import { core_fetch2 } from "fetch";
+import { Provider } from "@fullstacked/ai-agent/src/providers/interface";
+
+export const AnthropicInfo: ProviderInfo = {
+    id: "anthropic",
+    title: "Anthropic",
+    configs: [
+        {
+            id: "apiKey",
+            title: "API Key",
+            type: "string",
+            value: "",
+        },
+    ],
+};
+
+async function models(apiKey: string) {
+    const anthropicClient = new Anthropic({
+        apiKey: apiKey,
+        fetch: core_fetch2,
+        dangerouslyAllowBrowser: true,
+    });
+
+    const models = await anthropicClient.models.list();
+    return models.data.map(({ id }) => id);
+}
+
+export function createClaude(opts?: typeof AnthropicInfo.configs): Provider {
+    const apiKey =
+        (opts?.find(({ id }) => id === "apiKey")?.value as string) || "";
+
+    return {
+        models: () => models(apiKey),
+        client: (model) =>
+            new ChatAnthropic({
+                model,
+                apiKey,
+                clientOptions: {
+                    fetch: core_fetch2,
+                },
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/deepseek.ts

@@ -0,0 +1,46 @@
+import { core_fetch2 } from "fetch";
+import { Provider, ProviderInfo } from "./interface";
+import openai from "openai";
+import { ChatDeepSeek } from "@langchain/deepseek";
+
+export const DeepSeekInfo: ProviderInfo = {
+    id: "deepseek",
+    title: "DeepSeek",
+    configs: [
+        {
+            id: "apiKey",
+            title: "API Key",
+            type: "string",
+            value: "",
+        },
+    ],
+};
+
+async function models(apiKey: string) {
+    const client = new openai({
+        apiKey,
+        baseURL: "https://api.deepseek.com",
+        fetch: core_fetch2,
+        dangerouslyAllowBrowser: true,
+    });
+
+    const models = await client.models.list();
+    return models.data.map(({ id }) => id);
+}
+
+export function createDeepSeek(opts?: typeof DeepSeekInfo.configs): Provider {
+    const apiKey =
+        (opts?.find(({ id }) => id === "apiKey")?.value as string) || "";
+
+    return {
+        models: () => models(apiKey),
+        client: (model) =>
+            new ChatDeepSeek({
+                model,
+                apiKey,
+                configuration: {
+                    fetch: core_fetch2,
+                },
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/google.ts

@@ -0,0 +1,40 @@
+import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
+import { GoogleGenAI } from "@google/genai";
+import { Provider } from "@fullstacked/ai-agent/src/providers/interface";
+import { ProviderInfo } from "./interface";
+
+export const GoogleInfo: ProviderInfo = {
+    id: "google",
+    title: "Google",
+    configs: [
+        {
+            id: "apiKey",
+            title: "API Key",
+            type: "string",
+            value: "",
+        },
+    ],
+};
+
+async function models(apiKey: string) {
+    const googleClient = new GoogleGenAI({
+        apiKey,
+    });
+
+    const models = await googleClient.models.list();
+    return models.page.map(({ name }) => name.slice("models/".length));
+}
+
+export function createGemini(opts?: typeof GoogleInfo.configs): Provider {
+    const apiKey =
+        (opts?.find(({ id }) => id === "apiKey")?.value as string) || "";
+
+    return {
+        models: () => models(apiKey),
+        client: (model) =>
+            new ChatGoogleGenerativeAI({
+                model,
+                apiKey,
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/index.ts

@@ -0,0 +1,41 @@
+import { ProviderInfo } from "./interface";
+import { OpenAIInfo, createOpenAI } from "./openai";
+import { OllamaInfo, createOllama } from "./ollama";
+import { Provider } from "./interface";
+import { AnthropicInfo, createClaude } from "./anthropic";
+import { GoogleInfo, createGemini } from "./google";
+import { createGrok, xAIInfo } from "./xai";
+import { DeepSeekInfo, createDeepSeek } from "./deepseek";
+import { MistralInfo, createMistral } from "./mistral";
+
+export function providers(): ProviderInfo[] {
+    return [
+        OllamaInfo,
+        OpenAIInfo,
+        AnthropicInfo,
+        GoogleInfo,
+        xAIInfo,
+        DeepSeekInfo,
+        MistralInfo,
+    ];
+}
+
+export function getProvider(providerInfo: ProviderInfo) {
+    switch (providerInfo.id) {
+        case "ollama":
+            return createOllama(providerInfo.configs);
+        case "openai":
+            return createOpenAI(providerInfo.configs);
+        case "anthropic":
+            return createClaude(providerInfo.configs);
+        case "google":
+            return createGemini(providerInfo.configs);
+        case "xai":
+            return createGrok(providerInfo.configs);
+        case "deepseek":
+            return createDeepSeek(providerInfo.configs);
+        case "mistral":
+            return createMistral(providerInfo.configs);
+    }
+    return null;
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/interface.ts

@@ -1,5 +1,24 @@
 import { BaseChatModel } from "@langchain/core/language_models/chat_models";
 
+type ConfigType =
+    | {
+          type: "string";
+          value: string;
+      }
+    | {
+          type: "key-value";
+          value: [string, string][];
+      };
+
+export type ProviderInfo = {
+    id: string;
+    title: string;
+    configs: (ConfigType & {
+        id: string;
+        title: string;
+    })[];
+};
+
 export interface Provider {
     models(): Promise<string[]>;
     client(model: string): BaseChatModel;

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/mistral.ts

@@ -0,0 +1,47 @@
+import { core_fetch2 } from "fetch";
+import { Provider, ProviderInfo } from "./interface";
+import { ChatMistralAI } from "@langchain/mistralai";
+import { HTTPClient } from "@mistralai/mistralai/lib/http";
+import { Mistral } from "@mistralai/mistralai";
+
+export const MistralInfo: ProviderInfo = {
+    id: "mistral",
+    title: "Mistral AI",
+    configs: [
+        {
+            id: "apiKey",
+            title: "API Key",
+            type: "string",
+            value: "",
+        },
+    ],
+};
+
+async function models(apiKey: string) {
+    const mistralClient = new Mistral({
+        apiKey: apiKey,
+        httpClient: {
+            request: (r) => core_fetch2(r),
+        } as HTTPClient,
+    });
+
+    const models = await mistralClient.models.list();
+    return models.data.map(({ id }) => id);
+}
+
+export function createMistral(opts?: typeof MistralInfo.configs): Provider {
+    const apiKey =
+        (opts?.find(({ id }) => id === "apiKey")?.value as string) || "";
+
+    return {
+        models: () => models(apiKey),
+        client: (model) =>
+            new ChatMistralAI({
+                model,
+                apiKey,
+                httpClient: {
+                    request: (r) => core_fetch2(r),
+                } as HTTPClient,
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/ollama.ts

@@ -1,10 +1,29 @@
 // @ts-ignore
 import { Ollama as OllamaClient } from "ollama/browser";
 import type * as ollama from "ollama";
-import { Provider } from "./interface";
+import { Provider, ProviderInfo } from "./interface";
 import { core_fetch2 } from "fetch";
 import { ChatOllama } from "@langchain/ollama";
 
+export const OllamaInfo: ProviderInfo = {
+    id: "ollama",
+    title: "Ollama",
+    configs: [
+        {
+            id: "host",
+            title: "Host",
+            type: "string",
+            value: "http://localhost:11434",
+        },
+        {
+            id: "headers",
+            title: "Custom Headers",
+            type: "key-value",
+            value: [],
+        },
+    ],
+};
+
 async function models(opts: ollama.Config) {
     const ollamaClient: ollama.Ollama = new OllamaClient({
         ...opts,
@@ -16,14 +35,12 @@ async function models(opts: ollama.Config) {
     return models.map((m) => m.name);
 }
 
-type OllamaOptions = {
-    host: string;
-    headers: { [key: string]: string };
-};
-
-export function createOllama(opts?: Partial<OllamaOptions>): Provider {
-    const baseUrl = opts?.host || "http://localhost:11434";
-    const headers = opts?.headers || {};
+export function createOllama(opts?: typeof OllamaInfo.configs): Provider {
+    const baseUrl =
+        (opts?.find(({ id }) => id === "host")?.value as string) ||
+        "http://localhost:11434";
+    const headers =
+        (opts?.find(({ id }) => id === "headers")?.value as {}) || {};
 
     return {
         models: () =>

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/openai.ts

@@ -1,11 +1,24 @@
 import { core_fetch2 } from "fetch";
-import { Provider } from "./interface";
+import { Provider, ProviderInfo } from "./interface";
 import openai from "openai";
 import { ChatOpenAI } from "@langchain/openai";
 
-async function models(opts: OpenAIOptions) {
+export const OpenAIInfo: ProviderInfo = {
+    id: "openai",
+    title: "OpenAI",
+    configs: [
+        {
+            id: "apiKey",
+            title: "API Key",
+            type: "string",
+            value: "",
+        },
+    ],
+};
+
+async function models(apiKey: string) {
     const openAIClient = new openai({
-        apiKey: opts.apiKey,
+        apiKey,
         fetch: core_fetch2,
         dangerouslyAllowBrowser: true,
     });
@@ -14,17 +27,16 @@ async function models(opts: OpenAIOptions) {
     return models.data.map(({ id }) => id);
 }
 
-type OpenAIOptions = {
-    apiKey: string;
-};
+export function createOpenAI(opts?: typeof OpenAIInfo.configs): Provider {
+    const apiKey =
+        (opts?.find(({ id }) => id === "apiKey")?.value as string) || "";
 
-export function createOpenAI(opts: OpenAIOptions): Provider {
     return {
-        models: () => models(opts),
+        models: () => models(apiKey),
         client: (model) =>
             new ChatOpenAI({
                 model,
-                apiKey: opts.apiKey,
+                apiKey,
                 configuration: {
                     fetch: core_fetch2,
                 },

package/fullstacked_modules/@fullstacked/ai-agent/src/providers/xai.ts

@@ -0,0 +1,43 @@
+import { core_fetch2 } from "fetch";
+import { Provider, ProviderInfo } from "./interface";
+import openai from "openai";
+import { ChatXAI } from "@langchain/xai";
+
+export const xAIInfo: ProviderInfo = {
+    id: "xai",
+    title: "xAI",
+    configs: [
+        {
+            id: "apiKey",
+            title: "API Key",
+            type: "string",
+            value: "",
+        },
+    ],
+};
+
+async function models(apiKey: string) {
+    const client = new openai({
+        apiKey,
+        fetch: core_fetch2,
+        baseURL: "https://api.x.ai/v1",
+        dangerouslyAllowBrowser: true,
+    });
+
+    const models = await client.models.list();
+    return models.data.map(({ id }) => id);
+}
+
+export function createGrok(opts?: typeof xAIInfo.configs): Provider {
+    const apiKey =
+        (opts?.find(({ id }) => id === "apiKey")?.value as string) || "";
+
+    return {
+        models: () => models(apiKey),
+        client: (model) =>
+            new ChatXAI({
+                model,
+                apiKey,
+            }),
+    };
+}

package/fullstacked_modules/@fullstacked/ai-agent/summary.txt

@@ -0,0 +1,7 @@
+Once upon a time, in a land far away, there was a curious little fox named Felix. Felix had a peculiar habit of collecting shiny objects. One day, while exploring the forest, he stumbled upon a magical mirror that showed not his reflection, but his deepest desires.
+
+Felix looked into the mirror and saw himself as a mighty king, ruling over a grand kingdom. He wished for that life instantly. The mirror granted his wish, and suddenly, Felix was a king with a golden crown and a kingdom of his own.
+
+But as days passed, Felix realized that being a king was lonely. He missed the simplicity of his forest life. One day, he decided to return to the mirror and wished to be himself again. The mirror, surprised by his honesty, granted his wish and returned him to the forest.
+
+From that day on, Felix learned that true happiness comes from being himself, not from what he desires. And so, he continued his adventures, collecting shiny objects, but always remembering the lesson he learned from the magical mirror.