Open Canvas Documentation

Open Canvas requires both a LangGraph server (for agents) and a web frontend to be running simultaneously.

1. Start LangGraph Server

Navigate to apps/agents and run the development command. This uses the LangGraph CLI to host the graph locally.

cd apps/agents
yarn dev

The server typically runs on http://localhost:54367.

2. Start Frontend

In a new terminal, navigate to apps/web and start the web application.

cd apps/web
yarn dev

The frontend typically runs on http://localhost:3000.

Troubleshooting Ports

If you change the LangGraph port using the --port <PORT> flag, you must also update the client by setting the LANGGRAPH_API_URL environment variable in apps/web/.env or updating the fallback value in constants.ts.

Open Canvas uses Supabase for authentication. To set it up:

1. Create a new project in your Supabase dashboard.
2. Navigate to Project Settings > API.
3. Copy the Project URL and the anon public API key.
4. In apps/web/.env, assign these values to:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
5. Navigate to Authentication > Providers and ensure Email is enabled (and Confirm Email is enabled). You can also enable GitHub or Google providers.

You can use local LLMs via Ollama in your own instance of Open Canvas.

1. Ensure Ollama is installed and a tool-calling capable model (e.g., llama3.3) is pulled.
2. Start the Ollama server: ollama run llama3.3.
3. In apps/web/.env, set the following:
   • NEXT_PUBLIC_OLLAMA_ENABLED=true
   • OLLAMA_API_URL (defaults to http://host.docker.internal:11434; set this if using a custom port).

Note: Local LLMs may have lower instruction-following capabilities compared to proprietary models like GPT-4o or Claude.

To run Open Canvas locally, follow these steps to clone the repository, install dependencies, and configure environment variables.

1. Clone and Install

git clone https://github.com/langchain-ai/open-canvas.git
cd open-canvas
yarn install

2. Configure Environment Variables

You must create .env files from the provided examples in two locations:

• Root directory (for the LangGraph server/agents):

  cp .env.example .env

• apps/web directory (for the frontend):

  cd apps/web/
  cp .env.example .env

3. Build the Monorepo

Run the build command from the root to ensure workspace dependencies are available:

yarn build

git clone https://github.com/langchain-ai/open-canvas.git
cd open-canvas
yarn install
cp .env.example .env
cd apps/web/
cp .env.example .env
cd ../..
yarn build

To extend Open Canvas with a new model provider, follow these steps:

1. Update Model Definitions: Add or update the model provider variables in packages/shared/src/models.ts.
2. Install Provider Package: Inside apps/agents, install the necessary LangChain package (e.g., npm install @langchain/anthropic).
3. Update Model Configuration: Update the getModelConfig function in apps/agents/src/agent/utils.ts to include logic for your new model name and provider.
4. Verify: Test the integration by ensuring you can:
   • Generate a new artifact
   • Generate a follow-up message
   • Update an artifact via chat or quick action
   • Switch between text and code modes

No text generation (but server is running)

If the client makes requests but receives no text, you may have conflicting cookies from different local LangGraph servers. Solution: Clear the oc_thread_id_v2 cookie in your browser and refresh the page.

500 Network Errors or "thread ID not found"

This usually means the client cannot reach the LangGraph server. Solution:

• Verify the LangGraph server is running.
• Ensure the port matches. If using a custom port via --port <PORT>, set the LANGGRAPH_API_URL environment variable in apps/web/.env.

Model name is missing in config.

This occurs when customModelName is not specified in the configuration. Solution: Set the customModelName field inside config.configurable when invoking the graph.

Provide API keys for specialized services:

• GROQ_API_KEY: Used for transcription.
• FIRECRAWL_API_KEY: Used for web scraping.

GROQ_API_KEY=
FIRECRAWL_API_KEY=

Set up Supabase by providing the URL and Anon Key. You can use the same keys for document uploading or provide specific keys using the _DOCUMENTS suffix.

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

# For document uploading (can be the same as the above keys)
NEXT_PUBLIC_SUPABASE_URL_DOCUMENTS=
NEXT_PUBLIC_SUPABASE_ANON_KEY_DOCUMENTS=

The ModelSelector component filters the available models based on several NEXT_PUBLIC_ environment variables. If an environment variable is set to "false", models associated with that provider will be hidden from the selector.

Supported environment variables:

• NEXT_PUBLIC_FIREWORKS_ENABLED (for fireworks/ models)
• NEXT_PUBLIC_ANTHROPIC_ENABLED (for claude- models)
• NEXT_PUBLIC_OPENAI_ENABLED (for gpt- models)
• NEXT_PUBLIC_AZURE_ENABLED (for azure/ models)
• NEXT_PUBLIC_GEMINI_ENABLED (for gemini- models)
• NEXT_PUBLIC_OLLAMA_ENABLED (for ollama- models)
• NEXT_PUBLIC_GROQ_ENABLED (for groq/ models)

If the variable is unset or set to anything other than "false", the models will be enabled by default.

Use NEXT_PUBLIC_*_ENABLED environment variables to control which LLM providers are visible in the Open Canvas web interface. These are set to true or false.

NEXT_PUBLIC_FIREWORKS_ENABLED=true
NEXT_PUBLIC_GEMINI_ENABLED=true
NEXT_PUBLIC_ANTHROPIC_ENABLED=true
NEXT_PUBLIC_OPENAI_ENABLED=true
NEXT_PUBLIC_AZURE_ENABLED=false
NEXT_PUBLIC_OLLAMA_ENABLED=false
NEXT_PUBLIC_GROQ_ENABLED=false