/* 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%);
  }
}

.link {
  border: none;

  &:not(:last-child) {
    margin-right: 8px;
  }
}

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

.componentFields .desc {
  width: 50ch;
}

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

/* 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

Multiselect Input

Writer AI Studio

Start building

Development options

Deployment options

Models

Pricing

Observability

Prompting strategies

Language support

Account management

Prompt security

Transparency

Mitigating bias

Research papers

Introduction

No-code agents

Choosing your use case

Chat

Text generation

Research

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

Writer Framework

Quickstart

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

API and SDKs

SDKs

Cookbooks

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

Changelog

Generate text with an LLM

Generate chat completions

Stream responses from the API

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

Analyze images

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

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

Chat completion

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

API Keys

Error handling

Rate limits

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

Generate from application

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

List applications

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

Application details

Generate content asynchronously from an existing application 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 chat application.

Retrieve graphs

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

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](/api-guides/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

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.

Name	Type	Description
Label	Text
Options	Key-Value	Key-value object with options. Must be a JSON string or a state reference to a dictionary.
Placeholder	Text	Text to show when no options are selected.
Maximum count	Number	The maximum allowable number of selected options. Set to zero for unlimited.
Accent	Color	The colour of the chips created for each selected option.
Chip text	Color	The colour of the text in the chips.
Primary text	Color
Secondary text	Color
Container background	Color
Separator	Color
Custom CSS classes	Text	CSS classes, separated by spaces. You can define classes in custom stylesheets.

Getting started

Guides

Tutorials

Advanced

Component reference

Multiselect Input

Fields

Events

Low code usage

Reference

Getting started

Guides

Tutorials

Advanced

Component reference

​Fields

​Events

​Low code usage

​Reference

Fields

Events

Low code usage

Reference