HTML/CSS to Image MCP for AI Agents

npm install @composio/core ai @ai-sdk/mcp @ai-sdk/openai

import { Composio } from "@composio/core";

const composio = new Composio();
const { mcp } = await composio.create("your-user-id", {
  toolkits: ["htmlcss_to_image"],
  mcp: true,
});

import { createMCPClient } from "@ai-sdk/mcp";
import { openai } from "@ai-sdk/openai";
import { generateText, stepCountIs } from "ai";

const client = await createMCPClient({
  transport: { type: "http", url: mcp.url, headers: mcp.headers },
});

const { text } = await generateText({
  model: openai("gpt-5.6-sol"),
  tools: await client.tools(),
  prompt: "Create a PNG image from HTML: <div style=\"padding:24px;background:#111;color:white;font-family:Arial\">Launch report ready</div>",
  stopWhen: stepCountIs(10),
});

console.log(text);
await client.close();

npm install @composio/core @composio/openai openai

import OpenAI from "openai";
import { Composio } from "@composio/core";
import { OpenAIResponsesProvider } from "@composio/openai";

const composio = new Composio({ provider: new OpenAIResponsesProvider() });
const client = new OpenAI();

const session = await composio.create("your-user-id", { toolkits: ["htmlcss_to_image"] });
const tools = await session.tools();

let response = await client.responses.create({
  model: "gpt-5.6-sol",
  tools,
  input: [{ role: "user", content: "Create a PNG image from HTML: <div style=\"padding:24px;background:#111;color:white;font-family:Arial\">Launch report ready</div>" }],
});

while (response.output.some((o) => o.type === "function_call")) {
  const outputs = await composio.provider.handleToolCalls(session, response.output);
  response = await client.responses.create({
    model: "gpt-5.6-sol",
    tools,
    previous_response_id: response.id,
    input: outputs,
  });
}

console.log(response.output_text);