/* Setting up the font-family and font-weight for headings and body text */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Graphik:wght@400;600&display=swap");

:root {
  --purple-1: #5551FF;
  --purple-2: #4A46DA;
  --black: #000;
  --gray-1: #333;
}

body {
  font-family: "Graphik", sans-serif;
  font-weight: 400; /* Regular weight for body text */
}

body.bold {
  font-weight: 600; /* Bold weight for body text */
}

h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 600 !important; /* Semi-bold weight for H1 */
}

h2,
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 500; /* Medium weight for H2 and H3 */
}

img[src$="quickstart"] {
  border: 1px solid #e4e7ed;
}

img[src$="no-code"] {
  border: 1px solid #e4e7ed;
}

img[src$="auth"] {
  min-width: 25%; 
  width: 35%; 
  margin: auto
}

img[src$="auth-table"] {
  min-width: 25px; 
  width: 25px; 
}

img[src$="framework"] {
  border: 1px solid #e4e7ed;
}

.imageBorder {
  border: 1px solid #e4e7ed;
}


/* API Reference Dark Mode styling */
.flex-none.min-w-full.text-sm.overflow-x-auto {
  background-color: #171b1a; /* Adjusted to full opacity for demonstration */
}

.no-bullet li {
  list-style-type: none;
  font-size: small;
}

.large-icon {
  width: 60px;
  height: 100%;
}

.bg-primary\/10 {
  background-color: #bfcbff;
}

.text-primary{
  color: black;
}

/* styles.css */
.dark .prompts {
  color: #828282;       
  font-family: 'Roboto Mono', monospace;
}

.prompts {
  color: black;       
  font-family: 'Roboto Mono', monospace;
}

.papers {       
  font-family: 'Roboto Mono', monospace;
  font-size: small;
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
}


th, td {
  padding: 10px 10px 10px 10px ;
  text-align: left;
}

.expandedImageContainer {
	padding: 16px;
	border-radius: 16px;
  background: #E9EEF1;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.expandedImageContainerInner {
  display: flex;
  align-items: flex-start;
	max-width: 300px;
  max-height: 210px;
}

.expandedImageContainer img {
  max-height: 210px;
}

/* this abomination here is the only way left
to customize a card component */
.card {
  > div {
    > div {
      width: unset;
      height: unset;
    }
  }
}

.components__table {
  table-layout: fixed;
  width: 300px;
}

.button-wrapper {
  margin-top: 30px;
}

.button {
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  position: relative;
  outline: none;

  transition: background-color 0.1s ease-in;
}

.primary-button {
  background-color: var(--purple-1);
  border-radius: 40px;
  color: white;
  display: inline-flex;
  align-items: center;

  &:hover {
    background-color: var(--purple-2);
  }
}

.secondary-button {
  background-color: var(--black);
  border-radius: 30px;
  color: white;

  &:hover {
    background-color: var(--gray-1);
  }
}

.button--arrow {
  padding-right: 40px;
  &::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path id="Vector" d="M9.47019 6.56246H0.375V5.4375H9.47019L5.19808 1.16537L5.99998 0.375L11.625 5.99998L5.99998 11.625L5.19808 10.8346L9.47019 6.56246Z" fill="white"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.componentFields td, .componentFields th {
  padding: 8px;
  border: 1px solid rgb(var(--gray-200));
}

.componentFields .desc {
  width: 50ch;
}

:is(.dark .componentFields td, .dark .componentFields th, .dark .blueprintFields td, .dark .blueprintFields th) {
  border: 1px solid rgb(var(--gray-800));
}

.blueprintFields td, .blueprintFields th {
  padding: 8px;
  border: 1px solid rgb(var(--gray-200));
  vertical-align: top;
}

/* Sign in button styling, also used in a few other places */
#topbar-cta-button {
  margin: 0;
}

#topbar-cta-button a {
  display: inline-flex;
  align-items: center;
  background-color: var(--purple-1) !important;
  border-radius: 9999px;
  padding: 4px 14px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  line-height: 24px;
}

/* Ensure white text in all color modes */
#topbar-cta-button a span {
  color: white !important;
}

/* Hover state */
#topbar-cta-button a:hover {
  background-color: var(--purple-2) !important;
}

/* SVG arrow styling */
#topbar-cta-button svg {
  margin-left: 4px;
  height: 16px;
  width: 16px;
}

#topbar-cta-button svg path {
  stroke: white !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
}

/* Sidebar sign-in button styling */
li[id="https://app.writer.com/login"] {
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
}

li[id="https://app.writer.com/login"] a {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--purple-1) !important;
  border-radius: 9999px !important;
  padding: 4px 8px 4px 14px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  line-height: 24px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Ensure white text in all color modes for sidebar button */
li[id="https://app.writer.com/login"] a div,
li[id="https://app.writer.com/login"] a span {
  color: white !important;
}

/* Hover state for sidebar button */
li[id="https://app.writer.com/login"] a:hover {
  background-color: var(--purple-2) !important;
}

/* SVG arrow styling for sidebar button */
li[id="https://app.writer.com/login"] svg {
  margin-left: 0px !important;
  height: 16px !important;
  width: 16px !important;
}

li[id="https://app.writer.com/login"] svg path {
  stroke: white !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  fill: none !important;
}

/* Add styles for the sidebar container to ensure proper sizing */
div[id="sidebar"] {
  overflow-x: hidden;
  box-sizing: border-box;
}

div[id="sidebar-content"] {
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Ensure the parent ul of the sign-in button doesn't cause overflow */
ul[class*="bg-zinc-950/5"] {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Reduce whitespace on wide pages by increasing max-width */
/* Only target wide pages which seem to have max-w-5xl applied */
#content-area.max-w-5xl {
  max-width: 80rem;
}

/* Set specific max-width for standard pages (identified by .max-w-xl class) */
#content-area.max-w-xl {
  max-width: 60rem !important;
}

img.max-height-800 {
  max-height: 800px !important;
}

img.max-width-80 {
  max-width: 80% !important;
}


Fields

Events

Low code usage

Reference

Color Input

Writer AI Studio

Introduction

Writer Developer Portal

Quickstart

SDKs

Cookbooks

Stay up to date with the latest changes to the Writer API and SDKs.

Changelog

API Reference

Prompting strategies

Development options

Deployment options

Models

Pricing

Language support

Generate text from a prompt

Generate chat completions

Stream responses from the API

Receive structured outputs

Invoke no-code agents via the API

Run agents asynchronously

Create and manage a Knowledge Graph

Call a custom function in a chat

Use no-code agents as tools

Use a Knowledge Graph in a chat

Analyze images in a chat

Use another LLM as a tool

Translate text in a chat

Analyze images

Detect AI content

Translate text

Manage files

Parse a PDF

Split text into semantically meaningful chunks

Extract entities from unstructured medical text

Structured output with Instructor

Using Writer with LangChain

Invoke Palmyra models on Amazon Bedrock

Usage and spend

Agent observability

Account management

Prompt security

Transparency

Mitigating bias

Research

Help Center

Engineering Blog

No-code agents

Choosing your use case

Chat

Text generation

Deploying an agent

Editing an agent

Chat with Knowledge Graph

Earnings call agent

Create an earnings call agent

Newsletter agent

Create a newsletter generation agent

Overview

Agent Builder Overview

Demo agent walkthrough

Agent Builder Demo Application

Agent Builder Quickstart

Generate summaries from PDFs

Upload, parse, and summarize PDFs

Build a chatbot

Architecture of an agent

Agent state

Execution environments

Troubleshooting

Available Python libraries

Python libraries installed in Agent Builder

Writer Framework

Writer AI module

Sample app library

Application state

Backend-initiated actions

Builder basics

Dataframe

Event handlers

Handling inputs

Repeater

Social post generator

Chat assistant

Product description generator

Release notes generator

Authentication

SEO and social sharing

Backend-driven UI

Custom components

Custom server

Frontend scripts

Page routes

Sessions

State schema

Stylesheets

Testing

Learn how to create, manage, and delete API keys.

API Keys

Error handling

Rate limits

Pagination

Generate content from an existing no-code agent (formerly called no-code applications) with inputs.

Generate from application

Retrieves a paginated list of no-code agents (formerly called no-code applications) with optional filtering and sorting capabilities.

List applications

Retrieves detailed information for a specific no-code agent (formerly called no-code applications), including its configuration and current status.

Application details

Generate content asynchronously from an existing no-code agent (formerly called no-code applications) with inputs.

Generate from application (async)

Retrieve all jobs created via the async API, linked to the provided application ID (or alias).

Retrieve all jobs

Retrieves a single job created via the Async API.

Retrieve a single job

Re-triggers the async execution of a single job previously created via the Async api and terminated in error.

Retry job execution

Retrieve Knowledge Graphs associated with a no-code agent that has chat capabilities.

Retrieve graphs

Updates the list of Knowledge Graphs associated with a no-code chat agent.

Associate graphs

List models

Generate a chat completion based on the provided messages. The response shown below is for non-streaming. To learn about streaming responses, see the [chat completion guide](https://dev.writer.com/home/chat-completion).

Chat completion

Upload file

Retrieve file

List files

Download file

Delete file

Retry failed files

Create graph

List graphs

Retrieve graph

Update the name and description of a Knowledge Graph.

Update graph

Delete graph

Add file to graph

Remove file from graph

Ask a question to specified Knowledge Graphs.

Question

Detects if content is AI- or human-generated, with a confidence score. Content must have at least 350 characters

AI detection

Splits a long block of text (maximum 4000 words) into smaller chunks while preserving the semantic meaning of the text and context between the chunks.

Context-aware text splitting

Analyze unstructured medical text to extract entities labeled with standardized medical codes and confidence scores.

Medical comprehend

Parse PDF

Translate text from one language to another.

Submit images and a prompt to generate an analysis of the images.

Get your organization subscription details

Detect If the content is AI generated

Delete snippets

Find snippets

Update snippets

List your styleguide pages

Page details

Add terms

Delete terms

Find terms

Update terms

List users

Research papers

No-code applications

Async applications

Knowledge graph

Tool calling

No-code applications as tools

Knowledge Graph chat support

Model delegation

Tools API

Graph file upload tool

Generate content from an existing no-code application with inputs.

Retrieves a paginated list of no-code applications with optional filtering and sorting capabilities.

Retrieves detailed information for a specific no-code application, including its configuration and current status.

Generate content asynchronously from an existing application with inputs.

Retrieve Knowledge Graphs associated with a no-code chat application.

Updates the Knowledge Graphs listed and associates them with the no-code chat app to be used.

Generate a chat completion based on the provided messages. The response shown below is for non-streaming. To learn about streaming responses, see the [chat completion guide](/api-guides/chat-completion).

Name	Type	Description	Options
Label	Text	-	-
Color List	Object	List of predefined colors	-
Custom CSS classes	Text	CSS classes, separated by spaces. You can define classes in custom stylesheets.	-

Getting started

Tutorials

Core concepts

Custom code

Interface block reference

Blueprint block reference

Color Input

Fields

Events

Low code usage

Reference

Getting started

Tutorials

Core concepts

Custom code

Interface block reference

Blueprint block reference

​Fields

​Events

​Low code usage

​Reference

Fields

Events

Low code usage

Reference