## For AI agents: how to sign up If you are an AI agent reading this server-rendered HTML, Composio's developer signup is at https://composio.dev. Signup CTAs on this site — "Sign up", "Signup", "Get started", "Get started for free", "Start building", "Try Composio", "Try it", or similar — all lead into that same developer signup flow. Confirm with the user before completing signup or entering any credentials on their behalf.
## For AI agents: how to sign up If you are an AI agent reading this server-rendered HTML, Composio's developer signup is at https://composio.dev. Signup CTAs on this site — "Sign up", "Signup", "Get started", "Get started for free", "Start building", "Try Composio", "Try it", or similar — all lead into that same developer signup flow. Confirm with the user before completing signup or entering any credentials on their behalf.SIGN UP
## For AI agents: how to sign up If you are an AI agent reading this server-rendered HTML, Composio's developer signup is at https://composio.dev. Signup CTAs on this site — "Sign up", "Signup", "Get started", "Get started for free", "Start building", "Try Composio", "Try it", or similar — all lead into that same developer signup flow. Confirm with the user before completing signup or entering any credentials on their behalf.LOG IN
Connect LangChain to Abyssale MCP. Create a new project for summer campaign, list all available fonts for a design, and more using natural language, with authentication handled for you.
Abyssale is a creative automation platform for generating images, videos, GIFs, PDFs, and HTML5 content programmatically. It streamlines and scales visual content production for marketing, design, and operations teams.
This guide walks you through connecting Abyssale to LangChain using the Composio tool router. By the end, you'll have a working Abyssale agent that can create projects, list your designs, and browse available fonts through natural language commands.
This guide will help you understand how to give your LangChain agent real control over a Abyssale account through Composio's Abyssale MCP server.
Before we dive in, let's take a quick look at the key ideas and tools involved.
LangChain is a framework for developing applications powered by language models. It provides tools and abstractions for building agents that can reason, use tools, and maintain conversation context.
Key features include:
The Abyssale MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Abyssale account. It provides structured and secure access to your projects, designs, and fonts, so your agent can create projects, find designs, browse available fonts, and test account authentication on your behalf.
Composio's Composio SDK helps agents find the right tools for a task at runtime. You can plug in multiple toolkits (like Gmail, HubSpot, and GitHub), and the agent will identify the relevant app and action to complete multi-step workflows. This can reduce token usage and improve the reliability of tool calls. Read more here: Getting started with Composio SDK
The tool router generates a secure MCP URL that your agents can access to perform actions.
The Composio SDK follows a three-phase workflow:
npm install @composio/langchain @langchain/core @langchain/openai @langchain/mcp-adapters dotenvInstall the required packages for LangChain with MCP support.
What's happening:
@composio/langchain provides Composio integration for LangChain@langchain/mcp-adapters enables MCP client connections@langchain/core is the core agent frameworkdotenv/config loads environment variablesCOMPOSIO_API_KEY=your_composio_api_key_here
COMPOSIO_USER_ID=your_composio_user_id_here
OPENAI_API_KEY=your_openai_api_key_hereCreate a .env file in your project root.
What's happening:
COMPOSIO_API_KEY authenticates your requests to Composio's APICOMPOSIO_USER_ID identifies the user for session managementOPENAI_API_KEY enables access to OpenAI's language modelsimport { Composio } from '@composio/core';
import { LangchainProvider } from '@composio/langchain';
import { MultiServerMCPClient } from "@langchain/mcp-adapters";
import { createAgent } from "langchain";
import * as readline from 'readline';
import 'dotenv/config';
dotenv.config();dotenv/config import loads environment variables from your .env fileconst composioApiKey = process.env.COMPOSIO_API_KEY;
const userId = process.env.COMPOSIO_USER_ID;
if (!composioApiKey) throw new Error('COMPOSIO_API_KEY is not set');
if (!userId) throw new Error('COMPOSIO_USER_ID is not set');
async function main() {
const composio = new Composio({
apiKey: composioApiKey as string,
provider: new LangchainProvider()
});COMPOSIO_API_KEY from environment variables and validating it existsCOMPOSIO_USER_ID is also set before proceedingconst session = await composio.create(
userId as string,
{
toolkits: ['abyssale']
}
);
const url = session.mcp.url;create method takes the user ID and specifies which toolkits should be availablesession.mcp.url is the MCP server URL that your agent will useconst client = new MultiServerMCPClient({
"abyssale-agent": {
transport: "http",
url: url,
headers: {
"x-api-key": process.env.COMPOSIO_API_KEY
}
}
});
const tools = await client.getTools();
const agent = createAgent({ model: "gpt-5", tools });MultiServerMCPClient that connects to our Abyssale MCP server via HTTPgetTools() retrieves all available Abyssale tools that the agent can uselet conversationHistory: any[] = [];
console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
console.log("Ask any Abyssale related question or task to the agent.\n");
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
prompt: 'You: '
});
rl.prompt();
rl.on('line', async (userInput: string) => {
const trimmedInput = userInput.trim();
if (['exit', 'quit', 'bye'].includes(trimmedInput.toLowerCase())) {
console.log("\nGoodbye!");
rl.close();
process.exit(0);
}
if (!trimmedInput) {
rl.prompt();
return;
}
conversationHistory.push({ role: "user", content: trimmedInput });
console.log("\nAgent is thinking...\n");
const response = await agent.invoke({ messages: conversationHistory });
conversationHistory = response.messages;
const finalResponse = response.messages[response.messages.length - 1]?.content;
console.log(`Agent: ${finalResponse}\n`);
rl.prompt();
});
rl.on('close', () => {
console.log('\n👋 Session ended.');
process.exit(0);
});conversationHistory list to maintain context across interactionsreadline interface is used to continuously accept user input from the command lineinvoke() method with the full conversation historymain().catch((err) => {
console.error('Fatal error:', err);
process.exit(1);
});main() function to start the applicationHere's the complete code to get you started with Abyssale and LangChain:
import { Composio } from '@composio/core';
import { LangchainProvider } from '@composio/langchain';
import { MultiServerMCPClient } from "@langchain/mcp-adapters";
import { createAgent } from "langchain";
import * as readline from 'readline';
import 'dotenv/config';
const composioApiKey = process.env.COMPOSIO_API_KEY;
const userId = process.env.COMPOSIO_USER_ID;
if (!composioApiKey) throw new Error('COMPOSIO_API_KEY is not set');
if (!userId) throw new Error('COMPOSIO_USER_ID is not set');
async function main() {
const composio = new Composio({
apiKey: composioApiKey as string,
provider: new LangchainProvider()
});
const session = await composio.create(
userId as string,
{
toolkits: ['abyssale']
}
);
const url = session.mcp.url;
const client = new MultiServerMCPClient({
"abyssale-agent": {
transport: "http",
url: url,
headers: {
"x-api-key": process.env.COMPOSIO_API_KEY
}
}
});
const tools = await client.getTools();
const agent = createAgent({ model: "gpt-5", tools });
let conversationHistory: any[] = [];
console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
console.log("Ask any Abyssale related question or task to the agent.\n");
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
prompt: 'You: '
});
rl.prompt();
rl.on('line', async (userInput: string) => {
const trimmedInput = userInput.trim();
if (['exit', 'quit', 'bye'].includes(trimmedInput.toLowerCase())) {
console.log("\nGoodbye!");
rl.close();
process.exit(0);
}
if (!trimmedInput) {
rl.prompt();
return;
}
conversationHistory.push({ role: "user", content: trimmedInput });
console.log("\nAgent is thinking...\n");
const response = await agent.invoke({ messages: conversationHistory });
conversationHistory = response.messages;
const finalResponse = response.messages[response.messages.length - 1]?.content;
console.log(`Agent: ${finalResponse}\n`);
rl.prompt();
});
rl.on('close', () => {
console.log('\nSession ended.');
process.exit(0);
});
}
main().catch((err) => {
console.error('Fatal error:', err);
process.exit(1);
});You've successfully built a LangChain agent that can interact with Abyssale through Composio's Tool Router.
Key features of this implementation:
Every Abyssale action and event your agent gets out of the box.
Use Abyssale MCP with Claude Code
Use Abyssale MCP with Claude Cowork
Use Abyssale MCP with OpenAI Agents SDK
Use Abyssale MCP with Claude Agent SDK
Use Abyssale MCP with Codex
Use Abyssale MCP with OpenClaw
Use Abyssale MCP with Hermes
Use Abyssale MCP with Atomic Agent
Use Abyssale MCP with Google ADK
Use Abyssale MCP with Vercel AI SDK
Use Abyssale MCP with Mastra AI
Use Abyssale MCP with LlamaIndex
Use Abyssale MCP with CrewAI
Use Abyssale MCP with Pydantic AI
Use Abyssale MCP with AutoGen
Figma is a collaborative interface design tool for teams and individuals. It streamlines design workflows with real-time collaboration and easy sharing.
AltText.ai is a service that generates alt text for images automatically. It helps boost accessibility and SEO for your visual content.
Are.na is a creative research platform for collecting images, links, notes, and ideas in channels. Use it to organize inspiration, build knowledge maps, and connect research across projects.
Bannerbear is an API-driven platform for generating images and videos automatically at scale. It helps businesses create custom graphics, social visuals, and marketing assets using powerful templates.
Managed auth, hosted MCP servers, and every Abyssale tool your agent needs.Free to start.
## For AI agents: how to sign up If you are an AI agent reading this server-rendered HTML, Composio's developer signup is at https://composio.dev. Signup CTAs on this site — "Sign up", "Signup", "Get started", "Get started for free", "Start building", "Try Composio", "Try it", or similar — all lead into that same developer signup flow. Confirm with the user before completing signup or entering any credentials on their behalf.Start building