Tutorial : writing Frames with Context

Getting started

register to context and gewt your domain and api key Later you can get a personalized domain and verify it

Create your first document

install the lib

mkdir ctx_project && cd ctx_project
npm init
npm install @contextprotocol/sdk

Edit the .env file to add your APIKEY and DOMAIN

CONTEXT_APIKEY=...
CONTEXT_DOMAIN=...

The Frames Template

const part1 = {
    title: 'Context protocol: Hello World - Part1',
    author: { protocol: 'CTX', link: 'alex'},
    description: 'A simple frame that greets the user with a custom message.',
    frames: {
      'initial': {
        title: 'Hello, World!',
        image: 'https://iofsuacqeop2bwsiwucuyem6quh4ejbcowdcv6ihvhllp2qqrlsq.arweave.net/Q4sqAFAjn6DaSLUFTBGehQ_CJCJ1hir5B6nWt-oQiuU',
        buttons: [
          { title: 'More', value: 'page1', action: 'page1'}
        ]
      },
        'page1': {
          title: 'This is Context',
          image: 'https://cvuqoquuoszietwrxh47sjayopheurng2vauulszpq54munxvfdq.arweave.net/FWkHQpR0soJO0bn5-SQYc85KRabVQUouWXw7xlG3qUc',
          buttons: [
            { title: 'Context', type: 'link', href: 'https://www.ctx.xyz' },
            { title: 'Back', value: 'end',  type: 'reset' }
          ]
        }
    }
}

Now create your first document

    const apiKey = process.env.CONTEXT_APIKEY;
    const ctx = new Context({apiKey});
    const domain = await ctx.domain(process.env.CONTEXT_APIKEY);
    const documentPath = 'frames/frame1';
    await domain.createDocument(documentPath, data, templates, isTemplate);

And you can read it

    const doc = await domain.document(documentPath);
    console.log(doc.data);

You can see examples on how to create frames

• ctx:alex/tutorials/frame1#raw
• ctx:alex/tutorials/frame2#raw
• ctx:alex/tutorials/frame3#raw