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


// This script is adding curl exaples to openapi.json file
// Usage: node curl.js <input_file> <output_file>

const fs = require('fs');

const input_file = process.argv[2];
const output_file = process.argv[3];

let json;
try {
	const data = fs.readFileSync(input_file, 'utf8');
	json = JSON.parse(data);
} catch (err) {
	console.log('Could not read input file');
	console.error(err);
	process.exit(1);
}


const paths = json.paths;

function buildExample(schema) {
	const example = {};
	for (const key of schema.required) {
		const prop = schema.properties[key];
		if (prop?.type === 'object') {
			example[key] = buildExample(prop);
		} else if (prop.type === 'array') {
			example[key] = [buildExample(prop.items)];
		} else if (prop.example) {
			example[key] = prop.example;
		} else {
			switch (prop.type) {
				case 'string':
					example[key] = 'string';
					break;
				case 'integer':
					example[key] = 0;
					break;
				case 'number':
					example[key] = 0.0;
					break;
				case 'boolean':
					example[key] = false;
					break;
				default:
					example[key] = null;
			}
		}
	}
	return example;
}

for (const path in paths) {
	const methods = paths[path];

	for (const method in methods) {
		const auth = methods[method].security;
		const bearer = auth?.[0]?.bearerAuth
		const methodObj = methods[method];
		const newMethodObj = { ...methodObj };
		const body = methodObj.requestBody;
		const bodyContent = body?.content;
		const bodyJson = bodyContent?.['application/json'];
		let bodySchema = bodyJson?.schema;
		let bodyData = {};
		if(bodySchema?.['$ref']) {
			const key = bodySchema.$ref.split('/').slice(-1)[0];
			bodySchema = json.components.schemas[key];
			if (bodySchema?.example) {
				bodyData = bodySchema.example;
			} else {
				bodyData = buildExample(bodySchema);
			}
		}
		const curl = []
		curl.push(`curl --location --request ${method.toUpperCase()} ${json.servers[0].url}${path}`);
		if (bearer) {
			curl.push(` --header "Authorization: Bearer <token>"`);
		}
		if (bodyJson) {
			curl.push(` --header "Content-Type: application/json"`);
			curl.push(`--data-raw '${JSON.stringify(bodyData)}'`);
		}

		if (!methods[method]['x-codeSamples']) {
			methods[method]['x-codeSamples'] = [];
		}
		
		methods[method]['x-codeSamples'].unshift({
			lang: 'cURL',
			source: curl.join(' \\\n')
		});
	}
}

process.stdout.write(JSON.stringify(json, null, 2));


// This script is adding curl exaples to openapi.json file
// Usage: node curl.js <input_file> <output_file>

const fs = require('fs');

const input_file = process.argv[2];
const output_file = process.argv[3];

let json;
try {
	const data = fs.readFileSync(input_file, 'utf8');
	json = JSON.parse(data);
} catch (err) {
	console.log('Could not read input file');
	console.error(err);
	process.exit(1);
}


const paths = json.paths;

function buildExample(schema) {
	const example = {};
	for (const key of (schema.required || [])) {
		const prop = schema.properties[key];
		if (prop?.type === 'object') {
			example[key] = buildExample(prop);
		} else if (prop.type === 'array') {
			example[key] = [buildExample(prop.items)];
		} else if (prop.example) {
			example[key] = prop.example;
		} else {
			switch (prop.type) {
				case 'string':
					example[key] = 'string';
					break;
				case 'integer':
					example[key] = 0;
					break;
				case 'number':
					example[key] = 0.0;
					break;
				case 'boolean':
					example[key] = false;
					break;
				default:
					example[key] = null;
			}
		}
	}
	return example;
}

for (const path in paths) {
	const methods = paths[path];

	for (const method in methods) {
		const auth = methods[method].security;
		const bearer = auth?.[0]?.bearerAuth
		const methodObj = methods[method];
		const body = methodObj.requestBody;
		const bodyContent = body?.content;
		const bodyJson = bodyContent?.['application/json'];
		let bodySchema = bodyJson?.schema;
		let bodyData = {};
		if(bodySchema?.['$ref']) {
			const key = bodySchema.$ref.split('/').slice(-1)[0];
			bodySchema = json.components.schemas[key];
			if (bodySchema?.example) {
				bodyData = bodySchema.example;
			} else {
				bodyData = buildExample(bodySchema);
			}
		}
		const curl = []
		curl.push(`curl --location --request ${method.toUpperCase()} ${json.servers[0].url}${path}`);
		if (bearer) {
			curl.push(` --header "Authorization: Bearer <token>"`);
		}
		if (bodyJson) {
			curl.push(` --header "Content-Type: application/json"`);
			curl.push(`--data-raw '${JSON.stringify(bodyData)}'`);
		}

		if (!methods[method]['x-codeSamples']) {
			methods[method]['x-codeSamples'] = [];
		}
		
		const newCurlExample = {
			lang: 'cURL',
			source: curl.join(' \\\n')
		};
		
		// Find index of any existing cURL example
		const curlIndex = methods[method]['x-codeSamples'].findIndex(sample => sample.lang === 'cURL');

		if (curlIndex === -1) {
			// No cURL example exists, add the new one at the start
			methods[method]['x-codeSamples'].unshift(newCurlExample);
		} else if (curlIndex > 0) {
			// cURL example exists but not at start - move it to the start
			const existingCurl = methods[method]['x-codeSamples'][curlIndex];
			methods[method]['x-codeSamples'] = [
				existingCurl,
				...methods[method]['x-codeSamples'].slice(0, curlIndex),
				...methods[method]['x-codeSamples'].slice(curlIndex + 1)
			];
		}
	}
}

process.stdout.write(JSON.stringify(json, null, 2));


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

Analyze images

An array of file variables required for the analysis. The image files must be uploaded to the Writer platform before they can be used in a vision request. Learn how to upload files using the [Files API](/api-guides/api-reference/file-api/upload-files).

The File ID of the image to be analyzed. The file must be uploaded to the Writer platform before it can be used in a vision request.

The name of the file variable. You must reference this name in the prompt with double curly braces (`{{}}`). For example, `Describe the difference between the image {{image_1}} and the image {{image_2}}`.

Vision Request File Variable

Vision Request

bearerAuth

Vision Response

Writer AI Studio

Start building

Development options

Deployment options

Models

Pricing

Prompting strategies

Language support

Account management

Prompt security

Transparency

Mitigating bias

Research papers

Introduction

No-code apps

Choosing an app type

Building a chat app

Building a text generation app

Building a research assistant

Use cases

Deploying an app

Editing an app

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

Deploy to Writer Cloud

Deploy with Docker

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

Ask a question to an LLM

Generate chat completions

Invoke no-code applications via the API

Run applications asynchronously

Create and manage a Knowledge Graph

Call a custom function in a chat

Use no-code applications as tools

Use a Knowledge Graph in a chat

Use another LLM as a tool

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

Text generation

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.

Getting started

Chat completion

No-code applications

Knowledge Graph

Tool calling

Additional capabilities

Integrations

API Reference

Analyze images

Authorizations

Body

Response